My Skill Lab
Programming & Web DevelopmentBeginner

HTML and CSS from Scratch

Build and style real web pages — responsive from day one.

Taught by Sagar Khadka · Full-Stack Developer

What you'll learn

  • Write valid, semantic HTML5 pages with a clear heading outline and accessible images and links
  • Build labelled, validated forms and data tables that work with keyboards and screen readers
  • Explain the cascade, specificity and box model, and debug layout problems in browser DevTools
  • Lay out pages with Flexbox and CSS Grid instead of floats or fixed widths
  • Make any layout responsive with a mobile-first approach, media queries and fluid units
  • Publish a personal portfolio page to the web with GitHub Pages

About this course

This free HTML and CSS course is the place to start if you want to build websites and have never written a line of code. You will learn semantic HTML5 that search engines and screen readers understand, write accessible forms and tables, and style pages with modern CSS: selectors, the cascade, the box model, custom properties, Flexbox and CSS Grid. From the first lesson every page is responsive, so your layouts work on phones, tablets and desktops using mobile-first media queries, fluid type with clamp() and container queries. You need only a laptop, a browser and a free code editor such as VS Code. By the end you will have designed, built and published your own personal portfolio page on GitHub Pages, and you will be ready for a JavaScript course or a full web development bootcamp.

Course content

7 lessons
  1. 1How the Web Works and Your First HTML PageWhat browsers, servers, HTML and CSS each do, plus the editor setup and the page skeleton you will reuse.Preview
  2. 2Semantic HTML: Structure That Means SomethingUse landmarks, headings, lists, links and images so pages are accessible and easy for search engines to read.
  3. 3Forms and Tables Done ProperlyLabelled inputs, built-in validation and accessible data tables that work for every user.
  4. 4CSS Fundamentals: Selectors, Cascade and the Box ModelHow CSS finds elements, decides which rule wins and sizes every box on the page.
  5. 5Typography, Colour and Custom PropertiesReadable type, accessible colour contrast and reusable design tokens with CSS custom properties.
  6. 6Layout with Flexbox and CSS GridUse Flexbox for rows and columns of items and Grid for two-dimensional page and card layouts.
  7. 7Responsive Design and Publishing Your PortfolioMobile-first media queries, container queries and responsive images, then publish your portfolio live.