Skip to content
Learn Netverks

Track

html-css

HTML & CSS

Combined page-building track linking semantic HTML with modern CSS.

Mode
iframe_html
Practice
HTML preview sandbox
Lessons
31 units
Start lesson 1 → HTML & CSS: learn together

Before you start

An integration track that builds complete pages by combining semantic HTML and modern CSS in one workflow.

Real projects never separate “HTML day” from “CSS day”—you need confidence wiring structure and style together.

Landing pages, dashboards, marketing sites, and portfolio pieces built without a framework.

Iframe playgrounds on every lesson, hands-on challenges, interview prep, and MCQs tied to each slug.

After introductory HTML and CSS exposure—or as your main path if you learn best by building full pages early.

Lesson order

Sequential — follow top to bottom

31 lessons are live in this track. Start from step 01 for the smoothest path.

  1. 01 intro HTML & CSS: learn together

    beginner

    Open →
  2. 02 two-layers Structure vs presentation

    beginner

    Open →
  3. 03 full-page-skeleton A complete page skeleton

    beginner

    Open →
  4. 04 linking-styles Linking and organizing CSS

    beginner

    Open →
  5. 05 selectors-practice Selectors that match your HTML

    beginner

    Open →
  6. 06 cascade-specificity Cascade, specificity, and debugging

    beginner

    Open →
  7. 07 box-model-lab Box model in real components

    beginner

    Open →
  8. 08 typography-ui Readable typography

    beginner

    Open →
  9. 09 semantic-chrome Page chrome with landmarks

    intermediate

    Open →
  10. 10 buttons-and-links Buttons, links, and focus states

    intermediate

    Open →
  11. 11 flex-navigation Flexbox navigation bar

    intermediate

    Open →
  12. 12 card-pattern Card component pattern

    intermediate

    Open →
  13. 13 styled-forms Accessible styled forms

    intermediate

    Open →
  14. 14 images-and-figures Images, figures, and responsive sizing

    intermediate

    Open →
  15. 15 css-variables-theme CSS variables and simple theming

    intermediate

    Open →
  16. 16 flexbox-layout Flexbox for rows and columns

    intermediate

    Open →
  17. 17 grid-page-layout Grid for page sections

    intermediate

    Open →
  18. 18 responsive-mobile-first Responsive design (mobile-first)

    intermediate

    Open →
  19. 19 centering-recipes Centering patterns that work

    intermediate

    Open →
  20. 20 devtools-workflow DevTools for HTML and CSS together

    intermediate

    Open →
  21. 21 mini-project-profile Mini project: profile landing page

    intermediate

    Open →
  22. 22 interview-essentials Interview essentials (HTML + CSS)

    advanced

    Open →
  23. 23 production-checklist Production checklist before you ship

    advanced

    Open →
  24. 24 summary Track summary and next steps

    beginner

    Open →
  25. 25 positioning-layers Positioning: relative, absolute, and fixed

    intermediate

    Open →
  26. 26 stacking-and-z-index Stacking contexts and z-index

    advanced

    Open →
  27. 27 styled-data-tables Accessible data tables + CSS

    intermediate

    Open →
  28. 28 motion-and-transitions Motion, transitions, and respect for users

    intermediate

    Open →
  29. 29 accessibility-css Accessibility: HTML semantics + CSS visibility

    advanced

    Open →
  30. 30 component-architecture Component architecture without a framework

    advanced

    Open →
  31. 31 dashboard-project Project: dashboard layout

    advanced

    Open →