Skip to content
WANCODE
BM

▍Learn / HTML & CSS

Build Your First Website

Start from zero. Learn how the web works, write real HTML, style it with CSS, master Flexbox and Grid, make it responsive — and finish with your own landing page.

12 published lessons 2.9 hBeginner

Start the track

Free to start. No signup required.

  1. 01What Actually Happens When You Open a Website?Follow a website from the address bar to the screen — then edit a real web page and watch the browser redraw it.
  2. 02Your First HTML PageWrite a complete HTML page from scratch: the doctype, html, head and body, plus how tags, nesting and comments work.
  3. 03Headings, Paragraphs & TextGive your text a clear outline with h1–h6, split it into real paragraphs, and use strong and em for meaning, not just looks.
  4. 04Links, Images & ListsConnect pages with links, add images with helpful alt text, and organise content into bulleted and numbered lists.
  5. 05Understanding HTML StructureReplace a pile of divs with header, nav, main, section, article and footer, and see your page as the tree the browser builds.
  6. 06Introduction to CSSWrite your first CSS rules: selectors, properties and values, element, class and id selectors, and how the cascade decides which rule wins.
  7. 07Colours, Fonts & SpacingStyle a real invitation card: colour formats (named, hex, rgb, hsl), font stacks, readable sizes and line height, and margin vs padding.
  8. 08The Box Model: Padding, Border and MarginEvery element is a box. Learn content, padding, border and margin, fix spacing for real, and make width maths predictable with border-box.
  9. 09Flexbox Made SimpleLine things up in a row, push them apart, and centre anything — the five flexbox properties you'll use every day.
  10. 10CSS Grid FundamentalsBuild a tidy card gallery with CSS Grid: columns with fr and repeat(), gaps, and items that span more than one column.
  11. 11Responsive Design: One Page, Every ScreenMake a page that works on phones, tablets and laptops: the viewport tag, fluid widths, flexible images and mobile-first media queries.
  12. 12Project: Build Your Personal Landing PagePut it all together: a real, responsive personal landing page with semantic HTML, a nav, a hero, an about section and a project grid.