HTML + CSS
HTML & CSS
Semantic HTML, CSS layouts, Flexbox, Grid, animations, and responsive design — your web fundamentals reference.
📖 6 sections
⏰ 18 min read
✅ Quizzes included
01HTML Fundamentals▼
HTMLSemantic structure



  
  
  Page Title
  


  
...

  
  

    
...

    
  

  
...
Semantic tags
header,nav,main,article,section,aside,footer,figure
Headings
h1-h6. One h1 per page. Hierarchy matters for SEO.
Links
a href="url" target="_blank" rel="noopener"
Images
img src alt width height. Always include alt text.
Forms
form,input,label,button,select,textarea
02CSS Selectors & Box Model▼
CSSSelectors & specificity
/* Type */ p { color: red; }
/* Class */ .card { padding: 1rem; }
/* ID */ #header { height: 60px; }
/* Descendant */ .card p { margin: 0; }
/* Child */ .nav > li { display: block; }
/* Pseudo-class */ a:hover { color: blue; }
/* Pseudo-element */ p::first-line { font-weight: bold; }
/* Attribute */ input[type="email"] { border: 1px solid; }

/* Specificity: ID > Class > Element */
/* !important overrides all (avoid) */
Box model
content + padding + border + margin
box-sizing
border-box: width includes padding+border
margin:auto
Centers block elements horizontally
overflow
hidden,scroll,auto,visible
03Flexbox▼
CSSFlexbox cheatsheet
/* Container */
.container {
  display: flex;
  flex-direction: row;          /* row|column */
  justify-content: center;     /* main axis */
  align-items: center;          /* cross axis */
  flex-wrap: wrap;              /* allow wrapping */
  gap: 16px;                    /* spacing between items */
}
/* justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly */
/* align-items: flex-start|flex-end|center|stretch|baseline */

/* Item */
.item {
  flex: 1;          /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex-grow: 2;     /* take twice the space of flex:1 items */
  align-self: flex-start;  /* override container align */
  order: -1;        /* change visual order */
}
💡
Flexbox is 1D (one direction). Use for navbars, centering, and rows/columns of items. Use Grid for 2D layouts.
04CSS Grid▼
CSSGrid cheatsheet
/* Container */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;    /* 3 cols */
  grid-template-columns: repeat(3, 1fr); /* same */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 24px;
}

/* Item placement */
.item {
  grid-column: 1 / 3;   /* span columns 1 to 2 */
  grid-row: 1 / 2;
  grid-column: span 2;  /* span 2 columns */
}

/* Named areas */
.grid {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
❓ Quiz
What does justify-content in Flexbox control?
justify-content controls alignment along the main axis (horizontal in row, vertical in column). align-items controls the cross axis.
05Responsive Design▼
CSSMedia queries
/* Mobile first approach */
.container { width: 100%; padding: 16px; }

/* Tablet */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: auto; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Common breakpoints */
/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

/* Fluid images */
img { max-width: 100%; height: auto; }
06CSS Variables & Animations▼
CSSCustom properties & animations
:root {
  --primary: #4f46e5;
  --bg: #f8fafc;
  --text: #1e293b;
  --radius: 8px;
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
}

/* Transition */
.card { transition: transform 0.2s ease, box-shadow 0.2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* Keyframe animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero { animation: fadeIn 0.6s ease forwards; }