# HTML
> HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
<title>CS50X</title>
</head>
<body>
</body>
</html>
```
## Headings
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
## Paragraphs
```html
<p>This is a paragraph.</p>
```
## Comments
```html
<!-- Write your comments here -->
```
## Images
```html
<img src="url" alt="alternatetext">
```
## Lists
### Unordered List
```html
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
```
### Ordered HTML List
```html
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
```
## Links
```html
<a href="url">link text</a>
```
```html
<a href="https://cs50.harvard.edu/x/2022/" target="_blank">CS50</a>
```
## Tables
```html
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
```
## Layout Elements
```html
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
```
<br /><br />
# CSS
> Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
## How CSS ID Selector is Used
```html
<div id="header"></div>
```
```css
#header { width: 100%; height: 80px; background: blue }
```
## How CSS Class Selector is Used
```html
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing
</p>
```
```css
.content { margin: 20px 0; line-height: 24px; font-size: 15px }
```
## When to Use Class vs ID in CSS
> The basic rule that you need to keep in mind while using classes and ids in CSS is that, **id** is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas **class** is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, buttons, input boxes).
## Typography
```htmlmixed!
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
```
```css
@font-face {
font-family: 'Fuzzy Bubbles';
src: url("/assets/fonts/FuzzyBubbles-Regular.ttf"),
}
@font-face {
font-family: 'Fuzzy Bubbles';
src: url("/assets/fonts/FuzzyBubbles-Bold.ttf"),
}
p {
font-size: 50px;
font-weight: 300; /* bold, normal, 400 = normal, 700 = bold */
/* font-style: italic; */
font-family: 'Fuzzy Bubbles', cursive;
text-transform: uppercase;
text-align: center;
line-height: 1.7;
text-decoration: underline;
}
```
## Color
```css
p {
/* Color Name */
color: purple;
/* Red Green Blue Alpha */
color: rgba(38,56,89,1);
/* Hex Code */
color: #ff6768;
}
```
## Dimensions - Width And Height
```html
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nesciunt repellendus dolorum vero laborum quis
consectetur, facilis mollitia nulla quo distinctio odit sequi, minus ipsum molestias obcaecati ex ipsa officiis!
consectetur, facilis mollitia nulla quo distinctio odit sequi, minus ipsum molestias obcaecati ex ipsa officiis!
</div>
```
```css
.box {
/* width: 100px; */
/* height: 100px; */
/* min-width: 100px; */
/* min-height: 100px; */
max-width: 150px;
max-height: 150px;
display: inline-block;
background-color: burlywood;
}
```
## overflow
```css
.box {
max-width: 200px;
max-height: 200px;
/* auto, hidden, scroll */
/*overflow: scroll;*/
overflow-y: scroll;
display: inline-block;
background-color: burlywood;
}
```
## Viewport Units
```css
.box {
display: inline-block;
background-color: brown;
width: 100vw;
height: 100vh;
}
```
## Padding And Margin
```html
<div class="parent">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>
```
```css
.parent {
display: flex;
background-color: cornsilk;
width: 200px;
}
.box1 {
background-color: cornflowerblue;
width: 100px;
height: 100px;
/* margin-left: 20px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 40px; */
margin: 10px 10px 40px 20px; /* margin: top, right, bottom, left */
}
.box2 {
background-color: darkcyan;
width: 100px;
height: 100px;
padding: 10px 20px 30px 5px;
}
```
## Display
```html
<p>Block element 1</p>
<p>Block element 2</p>
<span>Inline element 1</span>
<span>Inline element 2</s
```
```css
/* Block element */
p {
background-color: cadetblue;
margin-top: 10px;
padding-left: 5px;
display: block; /* by default */
}
/* Inline element */
span {
background-color: brown;
/*display: inline;*/ /* by default */
margin: 10px;
width: 100px;
height: 100px;
display: inline-block;
}
```
## Border
```html
<div class="card"></div>
```
```css
.card {
width: 200px;
height: 200px;
background-color: cadetblue;
border: 5px solid black;
}
```
## Border Radius
```css
.card {
width: 200px;
height: 200px;
background-color: cadetblue;
border-radius: 50%;
/* Top left, Top right, Bottom right, Bottom left*/
/*border-radius: 10px 40px 50px 20px;*/
}
```
## Box Sizing
```css
* {
box-sizing: border-box;
}
.card {
width: 200px;
height: 200px;
background-color: aqua;
border: 5px solid black;
box-sizing: border-box;
}
```
## Background
```html
<div class="card"></div>
```
```css
.card {
width: 600px;
height: 600px;
border: 15px dotted green;
padding: 20px;
background-color: cadetblue;
background-image: url("/assets/images/cat.jpg");
background-size: cover; /* contain */
background-repeat: no-repeat;
background-origin: content-box; /* border-box, padding-box */
}
```
## Box Shadow
```html
<div class="card">Card</div>
```
```css
.card {
width: 200px;
height: 200px;
/* Box-shadow : X-shadow Y-shadow Blur spread color inset */
box-shadow: 5px 10px 10px 5px rgba(223, 236, 235, 0.687) ;
}
```
## Position
### Static
```html
<div class="static">Static</div>
```
```css
static {
background-color: blueviolet;
width: 100px;
height: 100px;
position: static;
}
```
### Relative
```html
<div class="relative">relative</div>
```
```css
.relative {
background-color: bisque;
width: 100px;
height: 100px;
position: relative;
top: 20px;
left: 20px;
}
```
### Absolute
```html
<div class="parent">
<div class="card">card</div>
</div>
```
```css
.parent {
background-color: bisque;
width: 200px;
height: 200px;
position: relative;
}
.card {
background-color: blueviolet;
width: 50px;
height: 50px;
position: absolute;
right: 0;
}
```
### Z-index
```html
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
```
```css
.box {
width: 150px;
height: 150px;
background-color: cadetblue;
font-size: 50px;
margin-bottom: 10px;
position: absolute;
}
.box1 {
z-index: 10;
background-color: grey;
}
.box2 {
z-index: 5;
background-color: chocolate;
top: 50px;
}
.box3 {
z-index: 2;
background-color: aqua;
top: 100px;
}
```
### Fixed
```html
<div class="circle"></div>
```
```css
body {
height: 1200px;
}
.circle {
background-color: brown;
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
}
```
## Flexbox
**Flexbox playground**
> https://codepen.io/enxaneta/full/adLPwv/
<br /><br />
# Extentions
> **Live Server**
> https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
> **Class autocomplete for HTML**
> https://marketplace.visualstudio.com/items?itemName=AESSoft.aessoft-class-autocomplete
> **Prettier - Code formatter**
> https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
> **HTML CSS Support**
> https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
# Resources
> **W3schools**
> https://www.w3schools.com/
> **MDN**
> https://developer.mozilla.org/en-US/
> **htmlreference**
> https://htmlreference.io/
> **cssreference**
> https://cssreference.io/
Sign in with Wallet
Connect another wallet