40+ Free Lessons
Learn web design,
step by step.
Every lesson written for complete beginners. Start from the very beginning or jump to any topic.
✦ Recommended Start
The Beginner's Path
Follow our curated order: HTML → CSS → Layout → Typography → Color → Project
Start from Lesson 1Showing 31 lessons
What is HTML?
Understand what HTML is, why it exists, and how browsers use it to display web pages.
Your First HTML File
Create and open your first .html file. See your code in a real browser immediately.
Tags, Elements & Attributes
Learn the building blocks of HTML — tags wrap content, attributes add detail.
Headings, Paragraphs & Text
Structure readable content using h1–h6 headings and paragraph elements.
Links & Navigation
Add clickable links that take users to other pages, sections, or external sites.
Images & Alt Text
Embed images and write accessible alt text that helps all users.
Lists: Ordered & Unordered
Create bullet lists and numbered lists for navigation menus, steps, and more.
Forms & Input Fields
Build contact forms with text fields, dropdowns, checkboxes, and submit buttons.
What is CSS?
Discover how CSS transforms plain HTML into visually designed pages.
Selectors & Properties
Target specific HTML elements and apply visual styles to them.
Colors & Backgrounds
Apply colors using hex codes, RGB values, and named colors. Add background images.
The Box Model
Understand margin, border, padding, and content — the foundation of all CSS layout.
Fonts & Text Styling
Set font families, sizes, weights, and line heights. Use Google Fonts for free.
Borders & Shadows
Add borders, rounded corners, and box shadows to create depth and structure.
Hover & Focus States
Make buttons and links respond visually when users interact with them.
Flexbox Basics
Align elements side by side or stack them vertically using CSS Flexbox.
Introduction to CSS Grid
Create two-dimensional layouts with rows and columns using CSS Grid.
Responsive Design Basics
Build layouts that look great on phones, tablets, and desktops.
Media Queries
Write CSS rules that only apply at certain screen widths.
Mobile-First Design
Design for small screens first, then scale up — the modern standard.
Why Typography Matters
Discover how font choices shape the personality and readability of a website.
Choosing the Right Font
Learn to pick fonts that match your brand and work well on screen.
Font Pairing Rules
Combine two fonts that complement each other without clashing.
Visual Hierarchy & Scale
Guide the reader's eye using size, weight, and contrast.
The Color Wheel
Understand primary, secondary, and complementary colors for design.
Building a Web Color Palette
Create a cohesive 5-color palette for any web project.
Contrast & Accessibility
Ensure text is readable for all users, including those with visual impairments.
Project Setup & Structure
Set up your project folder, files, and linked CSS ready to build.
Building a Landing Page
Put everything together: hero, features, and a call-to-action section.
Making It Responsive
Adjust your landing page to look great on any screen size.
Publishing Your Site
Deploy your finished page to the internet for free using GitHub Pages.