FUTEAC
Get My Free Roadmap

Web Development

HTML & CSS Foundations

This is the starting point of the Frontend Developer roadmap. You will learn how web pages are structured with HTML, how they are styled with CSS, and how to make them look right on phones and desktops. Every lesson builds on the previous one, and by the end you will have built and styled complete pages of your own. No prior coding experience is assumed — only basic computer use.

Beginner · 15 lessons · 8 hours · English + Urdu · Part of the Frontend Developer Roadmap

HTML & CSS Foundations course cover artwork

What you will learn

  • Structure a web page with semantic HTML elements
  • Style text, colours, and spacing with CSS selectors and the box model
  • Build page layouts with Flexbox and CSS Grid
  • Make any page responsive with media queries
  • Style forms, buttons, and navigation menus
  • Publish a finished page to the web for free

Curriculum

Module 1: Getting Started with HTML
  • How the Web Works and Your First PageFree preview9 min
  • Headings, Paragraphs, Links and Images11 min
  • Lists, Tables and Forms12 min
  • Semantic HTML: Header, Nav, Main and Footer10 min
  • Module Quiz: HTML BasicsQuiz
Module 2: Styling with CSS
  • CSS Selectors and the Cascade11 min
  • Colours, Fonts and Text Styling10 min
  • The Box Model: Margin, Padding and Borders12 min
  • Styling Buttons, Cards and Navigation13 min
  • Module Quiz: CSS StylingQuiz
Module 3: Layout and Responsive Design
  • Flexbox Layouts in Practice13 min
  • CSS Grid Layouts in Practice13 min
  • Responsive Design and Media Queries12 min
  • Reading: Publishing Your Page with GitHub Pages7 min
  • Module Quiz: Layout and ResponsivenessQuiz

Project: Build and Publish Your Personal Portfolio Page — you finish this course by building it, not just by watching.

Requirements

  • No coding experience required
  • A computer with a modern web browser
  • A free code editor such as VS Code

Frequently asked questions

Is HTML & CSS Foundations really free?

Yes. This course is free and open. Its lessons use public learning videos with FUTEAC summaries, tasks and quizzes. An optional verified certificate is available after completion.

Do I get a certificate?

You receive a completion record when you finish the course and pass its quizzes. A verifiable certificate with a public verification link is available as an optional upgrade.

What do I need before starting?

Check the Requirements section on this page. If a course builds on an earlier one, we say so there — and the roadmap shows you the right order.

Related courses

Web Development

Free

JavaScript Essentials

Learn JavaScript from zero and make your web pages interactive — variables, functions, DOM events, and fetching data.

Beginner · 14 lessons · 9 hours · English

Web Development

Free

React from Scratch

Build fast, component-based user interfaces with React — components, props, state, hooks, and routing.

Intermediate · 13 lessons · 10 hours · English