HTML & CSS¶
Eight tutorials, meant to be worked through roughly in order. Together they take you from a single styled page to a complete, responsive, multi-column site shell, using nothing but HTML and CSS — no framework, no build step, just files you can open directly in a browser. Each one builds on ideas from the ones before it, so later tutorials will point back to earlier ones ("Prerequisites: ...") rather than re-explaining a technique from scratch.
Beginner
Your First HTML + CSS Page¶
Combining HTML structure and CSS (colors, the box model, centering, hover transitions) into one complete, real page.
1 of 8 Start tutorial →
Beginner
Layout Designing with div, span, and Float¶
<div>/<span>, id vs. class, and building a header + nav menu + three-column layout + footer with float, width, and overflow.
2 of 8 Start tutorial →
Beginner to Intermediate
CSS Positioning¶
static/relative/absolute/fixed/sticky, z-index and stacking, and real patterns like tooltips and a centered modal.
3 of 8 Start tutorial →
Beginner to Intermediate
Flexbox Layout¶
display: flex, both axes, flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow/shrink/basis, align-self, and real navbar/centering patterns.
4 of 8 Start tutorial →
Intermediate
Multilevel Navigation with Positioning¶
Building a dropdown menu from scratch: a single-level bar, then a second-level dropdown with relative/absolute, then a guided challenge to add a third-level flyout yourself.
5 of 8 Start tutorial →
Intermediate
Complete Page Layout with Float and Positioning¶
Combining both tutorials above into one real page: a sticky toolbar, a vertical sidebar menu, a floated three-column body, a floated four-column footer, and a fixed "back to top" button.
6 of 8 Start tutorial →
Beginner to Intermediate
CSS Transitions and Animations¶
transition properties and timing functions, @keyframes, animation properties, a spinner, a pulsing badge, a fade-in entrance, plus performance and accessibility notes.
7 of 8 Start tutorial →
Beginner to Intermediate
Responsive Web Design¶
The viewport tag, mobile-first design, media queries, responsive units, clamp(), responsive images, and a complete responsive three-card layout.
8 of 8 Start tutorial →