A friendly, hands-on learning guide

Build Responsive Websites with HTML & CSS

Learn the building blocks of the web, practice with quick activities, and create pages that work beautifully on phones, tablets, and desktop screens.

GET STARTED Try a quiz

Web Development Basics · Course Overview

Learn the tools behind every web page.

Learn the fundamentals of modern web development by building responsive, real-world webpages with HTML5 and CSS3. Explore page structure, layouts, typography, spacing, Flexbox, CSS Grid, and responsive design while developing projects that can become part of your portfolio.

This section provides a practical foundation for creating clean, modern websites and understanding how the different pieces of a webpage work together. Whether you're starting from scratch or improving your existing skills, you'll gain hands-on experience building webpages that look and work well across different screen sizes.

Core technologies

HTML

Build a clear page structure
Add headings, text, images, and links
Give content meaning and order

Core technologies

CSS

Choose colors, spacing, and type
Arrange content with flexible layouts
Adapt designs for different screens

Building Websites

Build for people and devices.

Responsive Design

Use flexible layouts and media queries so pages adapt to phones, tablets, and larger screens.

Accessibility

Make content easier for everyone to use with semantic HTML, clear labels, and keyboard-friendly controls.

Web Development Tools

Write code in an editor, preview it in a browser, and use developer tools to inspect and improve your page.

Learn by trying

Practice: Exercises, Quizzes & Projects

Build confidence with a quick lesson, check what you know, and finish with a small project. No pressure—learn at your own pace!

New material · HTML + CSS

Structure it, style it, make it responsive

HTML gives content meaning. CSS controls its appearance and can adapt the layout to different screen sizes.

<!-- HTML: the page content -->
<main class="card">
  <h1>Hello, world!</h1>
  <p>My first responsive page.</p>
</main>

/* CSS: the page style */
.card {
  width: min(100% - 2rem, 40rem);
  margin: 2rem auto;
  padding: 2rem;
}

@media (max-width: 600px) {
  .card { padding: 1rem; }
}

HTML tags describe the content and its purpose.
CSS rules style elements using selectors and properties.
Flexible widths help content fit different screens.
A media query applies CSS only when its screen condition matches.

Quiz

Web development basics

Choose one answer for each question and see how you did.

Exercise

Plan your first web page

Fill in the prompts to make a starter brief you can use to build a simple responsive page.

Mini project

Build a one-page site

Use the brief from your exercise to create a small page about a hobby, pet, or favorite place.

Write a heading, a short paragraph, and a list in HTML.
Add colors, spacing, and a readable layout with CSS.
Check it on a narrow screen and adjust the layout.
Try using the keyboard to navigate every link and control.