DEV Community: Swapnil Raja

CSS Media Queries for Beginners: How to Make a Website Responsive

Swapnil Raja — Thu, 08 Oct 2026 11:48:21 +0000

CSS media queries allow you to apply different CSS styles for different screen sizes, so your website can work well on mobile, tablet, laptop, and desktop screens.

A website should not look good only on a laptop or desktop screen. Today, users visit websites from mobile phones, tablets, laptops, desktops, and large monitors.

If your website looks perfect on desktop but breaks on mobile, users may leave quickly. Text may become too small, images may overflow, buttons may be hard to tap, and the layout may look messy.

This is where @media rules help. They make your website responsive, mobile-friendly, and easier to use on every device.

If you are new to CSS, start with the CSS Tutorial first, then use this guide to understand responsive design in a practical way.

What Are CSS Media Queries?

CSS media queries are rules that apply CSS only when a certain condition is true.

For example, you can write CSS that works only when the screen width is smaller than 768px.

@media (max-width: 768px) {
 body {
 background-color: lightgray;
 }
}

In this example, the background color changes only when the screen width is 768px or smaller.

This is useful because mobile screens have less space than desktop screens. So we often need different layouts for small screens.

Why Are Media Queries Important?

Media queries are important because they help you create responsive websites. A responsive website automatically adjusts its layout according to the screen size.

A desktop layout may have 3 columns.
A tablet layout may have 2 columns.
A mobile layout may have 1 column.

Without media queries, the same layout may appear on all screen sizes, which can create design problems.

Media queries help you control:

Font size
Image size
Column layout
Navbar layout
Spacing
Button size
Section width
Hide/show elements
Mobile-friendly design

Basic Syntax of CSS Media Query

@media (condition) {
 selector {
 property: value;
 }
}

@media (max-width: 600px) {
 h1 {
 font-size: 28px;
 }
}

This means: if the screen width is 600px or smaller, the h1 font size becomes 28px.

Understanding max-width and min-width

Beginners usually get confused between max-width and min-width. Let us understand both clearly.

max-width Media Query

max-width means the CSS will apply up to a maximum screen width.

@media (max-width: 768px) {
 .container {
 width: 100%;
 }
}

This CSS applies when the screen width is 768px or smaller. Use max-width when you write desktop styles first and then adjust for tablet and mobile screens.

min-width Media Query

min-width means the CSS will apply from a minimum screen width and above.

@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}

This CSS applies when the screen width is 768px or larger. Use min-width when you follow a mobile-first approach.

Mobile-First vs Desktop-First Approach

There are two common ways to write responsive CSS: mobile-first and desktop-first.

Mobile-First CSS

In mobile-first CSS, you first write styles for small screens. Then you use min-width media queries for larger screens.

.container {
 width: 100%;
 padding: 15px;
}
@media (min-width: 768px) {
 .container {
 width: 750px;
 margin: auto;
 }
}
@media (min-width: 1024px) {
 .container {
 width: 1000px;
 }
}

This approach is popular because many users browse websites from mobile devices. Mobile-first CSS also keeps your base design simple.

Desktop-First CSS

In desktop-first CSS, you first write styles for large screens. Then you use max-width media queries for smaller screens.

.container {
 width: 1000px;
 margin: auto;
}
@media (max-width: 768px) {
 .container {
 width: 100%;
 padding: 15px;
 }
}

Beginners should learn both, but mobile-first CSS is usually better for new websites. If you already have a desktop design, desktop-first can also be useful.

Common CSS Breakpoints

Breakpoints are screen widths where your design changes. There is no fixed rule that every website must use the same breakpoints, but beginners can start with these common widths.

Device Type	Common Width
Small mobile	480px
Mobile / large phone	600px
Tablet	768px
Small laptop	1024px
Desktop	1200px

@media (max-width: 600px) {
 .box {
 width: 100%;
 }
}
@media (min-width: 601px) and (max-width: 1024px) {
 .box {
 width: 50%;
 }
}
@media (min-width: 1025px) {
 .box {
 width: 33.33%;
 }
}

Do not blindly copy breakpoints. Resize your layout and add breakpoints where the design actually starts breaking.

Example: Making a Card Layout Responsive

<div class="card-container">
 <div class="card">
 <h2>HTML</h2>
 <p>Learn the structure of webpages.</p>
 </div>
 <div class="card">
 <h2>CSS</h2>
 <p>Learn styling and layouts.</p>
 </div>
 <div class="card">
 <h2>JavaScript</h2>
 <p>Learn interactivity and logic.</p>
 </div>
</div>

.card-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.card {
 background-color: #f5f7fa;
 padding: 20px;
 border-radius: 8px;
}
@media (max-width: 768px) {
 .card-container {
 grid-template-columns: 1fr;
 }
}

On desktop, this layout shows 3 cards in one row. On mobile, the cards appear in one column.

Example: Responsive Navbar

A desktop navbar usually appears in one row, but it may not fit properly on mobile screens.

<nav class="navbar">
 <div class="logo">My Website</div>
 <ul class="nav-links">
 <li><a href="#">Home</a></li>
 <li><a href="#">Tutorials</a></li>
 <li><a href="#">Examples</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 30px;
 background-color: #29ab87;
}
.logo {
 color: white;
 font-size: 24px;
 font-weight: bold;
}
.nav-links {
 display: flex;
 gap: 20px;
 list-style: none;
}
.nav-links a {
 color: white;
 text-decoration: none;
}
@media (max-width: 768px) {
 .navbar {
 flex-direction: column;
 gap: 15px;
 }
 .nav-links {
 flex-direction: column;
 align-items: center;
 padding: 0;
 }
}

Now the navbar becomes vertical on small screens.

Responsive Font Size

.hero-title {
 font-size: 56px;
}
@media (max-width: 768px) {
 .hero-title {
 font-size: 34px;
 }
}

.hero-title {
 font-size: clamp(32px, 5vw, 56px);
}

Responsive Images

Images can overflow on small screens if their width is fixed. The better approach is to let images shrink with the available space.

img {
 max-width: 100%;
 height: auto;
}

You may not always need a media query for images. Sometimes flexible CSS is enough. Related lesson: HTML Images.

Change Layout from Row to Column

Many desktop sections use a two-column layout. On mobile, that layout often needs to become a single column.

<section class="about-section">
 <div class="about-text">
 <h2>About Us</h2>
 <p>We help beginners learn web development.</p>
 </div>
 <div class="about-image">
 <img src="image.jpg" alt="Learning web development">
 </div>
</section>

.about-section {
 display: flex;
 gap: 30px;
 align-items: center;
}
.about-text,
.about-image {
 width: 50%;
}
.about-image img {
 max-width: 100%;
 height: auto;
}
@media (max-width: 768px) {
 .about-section {
 flex-direction: column;
 }
 .about-text,
 .about-image {
 width: 100%;
 }
}

Best Practices for CSS Media Queries

Do not use too many breakpoints. Add a breakpoint only when the layout needs it.
Use flexible units like %, fr, rem, em, vw, and vh.
Test on mobile, tablet, desktop, landscape, and portrait sizes.
Keep media queries organized near the related CSS or in clear sections.
Do not depend only on device names. Think about where your layout breaks.

A flexible container is usually better than a fixed-width container.

.container {
 width: 90%;
 max-width: 1200px;
 margin: auto;
}

Common Mistakes Beginners Make

Mistake	Better Approach
Forgetting the viewport meta tag	Add it inside the head section
Using fixed width everywhere	Use width: 90% and max-width
Very small mobile text	Keep body text readable
Small buttons	Use enough padding for tap targets
Not testing horizontal overflow	Resize and inspect on small screens

For responsive design, your HTML should include the viewport meta tag inside the <head> section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Simple Responsive Page Example

Here is a complete beginner-friendly example that includes a viewport meta tag, responsive hero section, CSS Grid card layout, and a media query for mobile screens.

<!DOCTYPE html>
<html>
<head>
 <title>Responsive Page Example</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 body {
 margin: 0;
 font-family: Arial, sans-serif;
 color: #222;
 }
 .hero {
 background-color: #29ab87;
 color: white;
 padding: 60px 20px;
 text-align: center;
 }
 .hero h1 {
 font-size: 48px;
 margin-bottom: 15px;
 }
 .hero p {
 font-size: 20px;
 max-width: 700px;
 margin: auto;
 }
 .container {
 width: 90%;
 max-width: 1100px;
 margin: 40px auto;
 }
 .cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 }
 .card {
 background-color: #f5f7fa;
 padding: 25px;
 border-radius: 10px;
 }
 .card h2 {
 color: #29ab87;
 }
 @media (max-width: 768px) {
 .hero {
 padding: 40px 15px;
 }
 .hero h1 {
 font-size: 32px;
 }
 .hero p {
 font-size: 16px;
 }
 .cards {
 grid-template-columns: 1fr;
 }
 }
 </style>
</head>
<body>
 <section class="hero">
 <h1>Learn Web Development</h1>
 <p>Start learning HTML, CSS, and JavaScript step by step.</p>
 </section>
 <main class="container">
 <div class="cards">
 <div class="card">
 <h2>HTML</h2>
 <p>HTML creates the structure of webpages.</p>
 </div>
 <div class="card">
 <h2>CSS</h2>
 <p>CSS makes webpages beautiful and responsive.</p>
 </div>
 <div class="card">
 <h2>JavaScript</h2>
 <p>JavaScript adds interactivity to websites.</p>
 </div>
 </div>
 </main>
</body>
</html>

You can paste this example into the Try It Editor and resize the browser to see the layout change.

Media Queries with Flexbox

.row {
 display: flex;
 gap: 20px;
}
.column {
 flex: 1;
}
@media (max-width: 768px) {
 .row {
 flex-direction: column;
 }
}

This changes a horizontal row into a vertical column on mobile. This pattern is very common in responsive websites.

Media Queries with CSS Grid

.grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 15px;
}
@media (max-width: 1024px) {
 .grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 600px) {
 .grid {
 grid-template-columns: 1fr;
 }
}

This layout shows 4 columns on desktop, 2 columns on tablet, and 1 column on mobile.

Do You Always Need Media Queries?

.card-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
}

This automatically adjusts the number of columns based on available space. It is useful for cards, galleries, product lists, and blog sections.

Media queries are still important when you need specific design changes at certain screen sizes.

Final Tips for Beginners

First create the basic layout.
Resize the browser slowly.
Notice where the layout breaks.
Add a media query at that point.
Test again on mobile and desktop.
Keep your CSS simple.

Do not try to memorize every device size. Instead, understand how your layout behaves.

Responsive design is not about writing many media queries. It is about making your content easy to read and use on every screen.

Conclusion

CSS media queries are one of the most important parts of responsive web design. They allow you to apply different styles for different screen sizes.

With media queries, you can make layouts change from desktop to mobile, adjust font sizes, fix spacing, and create better user experiences.

As a beginner, start with simple media queries like @media (max-width: 768px). Then practice by creating responsive navbars, card layouts, hero sections, and full webpages.

If you are learning HTML and CSS, the free HTML tutorial and CSS tutorial on html5andcss3.org cover each topic with examples, and both are also available as free PDF books: HTML Tutorial PDF and CSS Tutorial PDF.

CSS Flexbox vs CSS Grid: Which One Should Beginners Learn First?

Swapnil Raja — Thu, 08 Oct 2026 11:48:20 +0000

When beginners start learning CSS layout, two names appear again and again: Flexbox and CSS Grid.

Both are powerful. Both are modern. Both are used in real websites. But this also creates confusion.

Should you learn Flexbox first?
Should you learn Grid first?
Which one is better for responsive design?
Can you use both together?

The simple answer is: learn Flexbox first, then learn CSS Grid.

Flexbox is easier for small layouts, alignment, navigation bars, buttons, cards, and one-direction layouts. CSS Grid is better for full page layouts, complex sections, galleries, dashboards, and two-direction layouts.

Let's understand the difference in a beginner-friendly way, especially if you are still working through the CSS Tutorial.

What Is CSS Flexbox?

CSS Flexbox is a layout system used to arrange elements in one direction.

That direction can be:

row
column

This is why Flexbox is called a one-dimensional layout system.

Example

<!DOCTYPE html>
<html>
<head>
 <title>CSS Flexbox Example</title>
 <style>
 .container {
 display: flex;
 gap: 20px;
 }
 .box {
 background-color: #29AB87;
 color: white;
 padding: 20px;
 border-radius: 8px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="box">Box 1</div>
 <div class="box">Box 2</div>
 <div class="box">Box 3</div>
 </div>
</body>
</html>

In this example, all boxes appear in one row.

Flexbox is very useful when you want to align items horizontally or vertically.

Related lesson: CSS Flex Container explains how Flexbox starts with the flex container.

What Is CSS Grid?

CSS Grid is a layout system used to arrange elements in rows and columns at the same time.

This is why CSS Grid is called a two-dimensional layout system.

Example

<!DOCTYPE html>
<html>
<head>
 <title>CSS Grid Example</title>
 <style>
 .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 }
 .box {
 background-color: #29AB87;
 color: white;
 padding: 20px;
 border-radius: 8px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="box">Box 1</div>
 <div class="box">Box 2</div>
 <div class="box">Box 3</div>
 <div class="box">Box 4</div>
 <div class="box">Box 5</div>
 <div class="box">Box 6</div>
 </div>
</body>
</html>

In this example, the boxes are arranged in a proper grid layout with columns and rows.

CSS Grid is very useful for full layouts and repeated card sections.

Related lesson: CSS Grid Container is a good starting point for Grid layout.

Main Difference Between Flexbox and Grid

The biggest difference is simple:

Flexbox works in one direction.
Grid works in two directions.

Flexbox is best when you are arranging items in a row or column.

Grid is best when you are arranging items in rows and columns together with display: grid.

Feature	Flexbox	CSS Grid
Layout Type	One-dimensional	Two-dimensional
Works With	Row or column	Rows and columns
Best For	Small components	Full layouts
Beginner Friendly	Easier to start	Slightly advanced
Common Use	Navbar, cards, buttons	Gallery, page layout, dashboard
Responsive Design	Good	Excellent
Can Use Together	Yes	Yes

When Should You Use Flexbox?

You should use display: flex when your layout mainly moves in one direction.

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

This type of layout is perfect for Flexbox.

.container {
 display: flex;
 justify-content: center;
 align-items: center;
}

This will center the child element horizontally and vertically.

For beginners, Flexbox is easier because you can quickly understand alignment, spacing, and direction.

When Should You Use CSS Grid?

You should use CSS Grid when your layout needs rows and columns together.

.card-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

This creates a three-column layout.

CSS Grid is perfect for sections where you want equal columns, repeated cards, or full page structure.

Blog listing page
Product listing page
Portfolio gallery
Dashboard cards
Services section
Tutorial cards

Which One Should Beginners Learn First?

Beginners should learn Flexbox first.

Reason: Flexbox is easier to understand and appears in many common website parts.

After Flexbox, beginners should learn CSS Grid. Grid becomes easier once you already understand layout basics.

Step	Topic
1	CSS display property
2	Flexbox
3	CSS Grid
4	Media queries
5	Responsive layouts using Flexbox and Grid together

Can You Use Flexbox and Grid Together?

Yes, and in real websites, developers often use both together.

For example, you can use CSS Grid for the main page layout and Flexbox inside each card.

Example

<!DOCTYPE html>
<html>
<head>
 <title>Flexbox and Grid Together</title>
 <style>
 .card-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 }
 .card {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 background-color: #f5f7fa;
 padding: 20px;
 border-radius: 8px;
 }
 .card button {
 background-color: #29AB87;
 color: white;
 border: none;
 padding: 10px;
 border-radius: 5px;
 }
 </style>
</head>
<body>
 <div class="card-container">
 <div class="card">
 <h2>HTML</h2>
 <p>Learn the structure of webpages.</p>
 <button>Start Learning</button>
 </div>
 <div class="card">
 <h2>CSS</h2>
 <p>Learn styling and layout design.</p>
 <button>Start Learning</button>
 </div>
 <div class="card">
 <h2>JavaScript</h2>
 <p>Learn interactivity and logic.</p>
 <button>Start Learning</button>
 </div>
 </div>
</body>
</html>

Here, CSS Grid creates the three-column layout, and Flexbox controls the content inside each card.

This is a very common real-world pattern.

Responsive Layout with Flexbox and Grid

Responsive design means your website should look good on mobile, tablet, and desktop.

.card-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

@media (max-width: 768px) {
 .card-container {
 grid-template-columns: 1fr;
 }
}

On desktop, the cards appear in three columns. On mobile, they appear in one column.

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

@media (max-width: 768px) {
 .navbar {
 flex-direction: column;
 gap: 15px;
 }
}

This changes the navbar from row layout to column layout on smaller screens.

For more layout practice, open the Try It Editor and test both examples live.

Common Beginner Mistakes

Many beginners think Flexbox and Grid are competitors. That is not correct.

They are different tools for different layout problems.

Another common mistake is using Flexbox for everything. Flexbox is powerful, but for full page layouts, CSS Grid is often cleaner.

.box {
 width: 500px;
}

This can break the layout on small screens.

.box {
 max-width: 500px;
 width: 100%;
}

This makes your layout more responsive.

Simple Rule to Remember

Here is the easiest rule:

Use Flexbox when items move in one direction.
Use Grid when items move in rows and columns.

Layout Need	Better Choice
Navbar	Flexbox
Card gallery	Grid
Button group	Flexbox
Full page layout	Grid
Card content alignment	Flexbox
Blog listing layout	Grid

Final Answer: Flexbox or Grid?

Both Flexbox and CSS Grid are important.

But for beginners, the best learning order is:

First learn Flexbox. Then learn CSS Grid.

Flexbox will help you understand alignment and spacing. CSS Grid will help you create larger and more structured layouts.

Once you understand both, you can create modern, responsive, and professional-looking websites.

You do not need to choose only one. In real projects, you should use both where they make sense.

10 HTML and CSS Projects for Beginners to Practice in 2026

Swapnil Raja — Thu, 08 Oct 2026 11:48:18 +0000

Learning HTML and CSS is the first step in web development. HTML creates the structure of a webpage, and CSS controls the design, spacing, colors, and layout.

But reading tutorials alone is not enough.

If you really want to improve your HTML and CSS skills, you need to build projects. Projects help you understand how structure and styling work together in real webpages.

As a beginner, you do not need to start with a complex website. Small and focused projects are enough to build confidence and improve your understanding step by step.

In this guide, you will find 10 beginner-friendly HTML and CSS projects you can build in 2026 to practice core frontend skills and get more comfortable writing real code.

Why Beginners Should Build HTML and CSS Projects

Many beginners make the same mistake: they learn HTML tags and CSS properties one by one, but they do not use them inside real projects. That slows down progress because web development is about combining ideas, not just memorizing syntax.

When you build a project, you learn how page structure, layout, spacing, images, forms, buttons, and responsiveness connect in one place.

For example, building a contact form helps you practice HTML forms, labels, inputs, spacing, borders, and button styles. Building a landing page helps you combine sections, images, calls to action, Flexbox, Grid, and responsive design.

Projects help you improve these skills:

Page structure
Layout design
Responsive design
Color combinations
Typography
Spacing
Forms
<button> elements
Navigation menus
Real website sections

If you are still working through the basics, start with the HTML Tutorial and CSS Tutorial, then return here and build one project at a time.

1. Personal Portfolio Website

A personal portfolio website is one of the best beginner projects. It gives you a place to introduce yourself, show your skills, display your work, and add your contact details. It is also useful in real life if you want to become a web developer, freelancer, or designer.

What You Can Include

Your name
Short introduction
Skills section
Projects section
About section
Contact section
Social media links
Resume download button

HTML Concepts You Will Practice

Headings
Paragraphs
Links
Images
Sections
<button> elements
Lists

CSS Concepts You Will Practice

Colors
Fonts
Spacing
Flexbox
Grid
Responsive design
Hover effects

Simple Example

<section class="hero">
 <h1>Hello, I am John</h1>
 <p>I am learning HTML and CSS to become a web developer.</p>
 <a href="#" class="btn">View My Work</a>
</section>

.hero {
 text-align: center;
 padding: 80px 20px;
 background-color: #f5f7fa;
}

.hero h1 {
 font-size: 42px;
 color: #222;
}

.hero p {
 font-size: 18px;
 color: #555;
}

.btn {
 display: inline-block;
 background-color: #29ab87;
 color: white;
 padding: 12px 20px;
 text-decoration: none;
 border-radius: 6px;
}

This project is perfect for practicing the structure of a real website.

2. Responsive Navigation Bar

A navigation bar is one of the most common parts of any website. It usually appears at the top of the page and contains links like Home, About, Services, Blog, and Contact. Building one helps you understand alignment, spacing, and mobile-friendly layout techniques.

What You Can Include

Website logo
Menu links
Button
Mobile layout
Hover effects

HTML Concepts You Will Practice

nav tag
Lists
Links
div elements
Semantic structure

CSS Concepts You Will Practice

Flexbox
Gap
Padding
Background color
Hover effects
Media queries

Simple Example

<nav class="navbar">
 <div class="logo">MySite</div>

 <ul class="nav-links">
 <li><a href="#">Home</a></li>
 <li><a href="#">Tutorials</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</nav>

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #29ab87;
 padding: 15px 30px;
}

.logo {
 color: white;
 font-size: 24px;
 font-weight: bold;
}

.nav-links {
 display: flex;
 gap: 20px;
 list-style: none;
}

.nav-links a {
 color: white;
 text-decoration: none;
}

@media (max-width: 768px) {
 .navbar {
 flex-direction: column;
 gap: 15px;
 }

 .nav-links {
 flex-direction: column;
 padding: 0;
 }
}

This project is useful because almost every website needs a navigation menu.

3. Simple Landing Page

A landing page is a single webpage created for a specific purpose. It may be used to promote a product, service, course, app, or newsletter. For beginners, it is a great project because it teaches how to create a clean and attractive layout.

What You Can Include

Hero section
Main heading
Short description
Call-to-action button
Feature section
Image or illustration
Footer

HTML Concepts You Will Practice

Sections
Headings
Paragraphs
Images
Links
<button> elements

CSS Concepts You Will Practice

Layout
Flexbox
Colors
Typography
Button styling
Responsive design

Simple Example

<section class="landing">
 <div class="content">
 <h1>Learn Web Development Easily</h1>
 <p>Start learning HTML, CSS, and JavaScript with beginner-friendly tutorials.</p>
 <a href="#" class="btn">Start Learning</a>
 </div>

 <div class="image-box">
 <img src="learning.png" alt="Learning web development" />
 </div>
</section>

.landing {
 display: flex;
 align-items: center;
 gap: 40px;
 padding: 60px;
}

.content {
 flex: 1;
}

.content h1 {
 font-size: 48px;
 color: #222;
}

.content p {
 font-size: 18px;
 color: #555;
}

.image-box {
 flex: 1;
}

.image-box img {
 max-width: 100%;
}

@media (max-width: 768px) {
 .landing {
 flex-direction: column;
 padding: 30px;
 }

 .content h1 {
 font-size: 34px;
 }
}

This project helps you understand how modern homepage sections are created.

4. Contact Form Design

Forms are used on almost every website. Contact forms, login forms, signup forms, and feedback forms are common examples. A contact form project is perfect for learning HTML form elements and CSS styling.

What You Can Include

Name field
Email field
Subject field
Message textarea
Submit button

HTML Concepts You Will Practice

Form tag
Input fields
Labels
Textarea
Button
Placeholder text

CSS Concepts You Will Practice

Form layout
Input styling
Border radius
Focus effects
Button design
Spacing

Simple Example

<form class="contact-form">
 <h2>Contact Us</h2>

 <label for="name">Name</label>
 <input type="text" id="name" placeholder="Enter your name" />

 <label for="email">Email</label>
 <input type="email" id="email" placeholder="Enter your email" />

 <label for="message">Message</label>
 <textarea id="message" placeholder="Write your message"></textarea>

 <button type="submit">Send Message</button>
</form>

.contact-form {
 max-width: 500px;
 margin: 40px auto;
 padding: 25px;
 background-color: #f5f7fa;
 border-radius: 10px;
}

.contact-form h2 {
 text-align: center;
 color: #222;
}

.contact-form label {
 display: block;
 margin-top: 15px;
 color: #333;
}

.contact-form input,
.contact-form textarea {
 width: 100%;
 padding: 12px;
 margin-top: 6px;
 border: 1px solid #ccc;
 border-radius: 6px;
}

.contact-form button {
 width: 100%;
 margin-top: 20px;
 padding: 12px;
 background-color: #29ab87;
 color: white;
 border: none;
 border-radius: 6px;
 cursor: pointer;
}

This project helps you understand how forms are structured and styled.

5. Pricing Table

A pricing table is used to show different plans or packages. You can see pricing tables on SaaS websites, course platforms, hosting sites, and subscription products. It is great for practicing cards, columns, buttons, and layout design.

What You Can Include

Plan name
Price
Features list
Buy button
Highlighted popular plan

HTML Concepts You Will Practice

div structure
Headings
Lists
<button> elements
Sections

CSS Concepts You Will Practice

CSS Grid
Card design
Borders
Shadows
Spacing
Hover effects

Simple Example

<section class="pricing">
 <div class="plan">
 <h2>Basic</h2>
 <p class="price">$9/month</p>
 <ul>
 <li>1 Website</li>
 <li>Basic Support</li>
 <li>10GB Storage</li>
 </ul>
 <button>Choose Plan</button>
 </div>

 <div class="plan popular">
 <h2>Pro</h2>
 <p class="price">$19/month</p>
 <ul>
 <li>5 Websites</li>
 <li>Priority Support</li>
 <li>50GB Storage</li>
 </ul>
 <button>Choose Plan</button>
 </div>

 <div class="plan">
 <h2>Premium</h2>
 <p class="price">$29/month</p>
 <ul>
 <li>Unlimited Websites</li>
 <li>24/7 Support</li>
 <li>100GB Storage</li>
 </ul>
 <button>Choose Plan</button>
 </div>
</section>

.pricing {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 25px;
 padding: 50px;
}

.plan {
 padding: 25px;
 border: 1px solid #ddd;
 border-radius: 10px;
 text-align: center;
 background-color: white;
}

.plan.popular {
 border: 2px solid #29ab87;
}

.price {
 font-size: 28px;
 color: #29ab87;
 font-weight: bold;
}

.plan ul {
 list-style: none;
 padding: 0;
}

.plan li {
 margin: 10px 0;
}

.plan button {
 background-color: #29ab87;
 color: white;
 border: none;
 padding: 12px 18px;
 border-radius: 6px;
}

@media (max-width: 768px) {
 .pricing {
 grid-template-columns: 1fr;
 padding: 25px;
 }
}

This project is useful for learning clean card-based layouts.

6. Blog Card Layout

A blog card layout is used to display blog posts in a grid format. It usually includes an image, title, description, and link. This is a very practical project because many websites have blog sections.

What You Can Include

Featured image
Category
Blog title
Short description
Date
Read more button

HTML Concepts You Will Practice

Article tag
Images
Headings
Paragraphs
Links
Sections

CSS Concepts You Will Practice

Grid layout
Card layout
Image styling
Border radius
Shadows
Hover effects

Simple Example

<section class="blog-grid">
 <article class="blog-card">
 <img src="html.jpg" alt="HTML tutorial" />
 <div class="blog-content">
 <span>HTML</span>
 <h2>HTML Basics for Beginners</h2>
 <p>Learn the basic structure of HTML webpages.</p>
 <a href="#">Read More</a>
 </div>
 </article>

 <article class="blog-card">
 <img src="css.jpg" alt="CSS tutorial" />
 <div class="blog-content">
 <span>CSS</span>
 <h2>CSS Styling Guide</h2>
 <p>Learn how to style webpages using CSS.</p>
 <a href="#">Read More</a>
 </div>
 </article>
</section>

.blog-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 25px;
 padding: 40px;
}

.blog-card {
 background-color: white;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.blog-card img {
 width: 100%;
 height: 220px;
 object-fit: cover;
}

.blog-content {
 padding: 20px;
}

.blog-content span {
 color: #29ab87;
 font-weight: bold;
}

.blog-content a {
 color: #29ab87;
 text-decoration: none;
 font-weight: bold;
}

@media (max-width: 768px) {
 .blog-grid {
 grid-template-columns: 1fr;
 padding: 20px;
 }
}

This project is excellent for practicing real website content sections.

7. Image Gallery

An image gallery is a great beginner project for practicing grid layouts and responsive design. You can turn it into a photo gallery, portfolio gallery, travel gallery, product gallery, or art gallery.

What You Can Include

Multiple images
Grid layout
Hover effects
Image captions
Responsive columns

HTML Concepts You Will Practice

Images
div
figure
figcaption
Sections

CSS Concepts You Will Practice

Grid layout
object-fit
Hover effects
Border radius
Responsive layout

Simple Example

<section class="gallery">
 <img src="image1.jpg" alt="Gallery image 1" />
 <img src="image2.jpg" alt="Gallery image 2" />
 <img src="image3.jpg" alt="Gallery image 3" />
 <img src="image4.jpg" alt="Gallery image 4" />
 <img src="image5.jpg" alt="Gallery image 5" />
 <img src="image6.jpg" alt="Gallery image 6" />
</section>

.gallery {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 15px;
 padding: 40px;
}

.gallery img {
 width: 100%;
 height: 220px;
 object-fit: cover;
 border-radius: 10px;
}

.gallery img:hover {
 transform: scale(1.03);
 transition: 0.3s;
}

@media (max-width: 768px) {
 .gallery {
 grid-template-columns: 1fr;
 padding: 20px;
 }
}

This project teaches how to work with images and responsive grids.

8. Product Card Design

A product card is commonly used in ecommerce websites. It shows a product image, name, price, description, and button. This is a useful project because it teaches how to create reusable UI components.

What You Can Include

Product image
Product title
Price
Rating
Short description
Add to cart button

HTML Concepts You Will Practice

Images
Headings
Paragraphs
<button> elements
div structure

CSS Concepts You Will Practice

Card design
Image styling
Button styling
Shadows
Hover effects
Flexbox

Simple Example

<div class="product-card">
 <img src="product.jpg" alt="Wireless headphones" />

 <div class="product-info">
 <h2>Wireless Headphones</h2>
 <p class="price">$49.99</p>
 <p>Comfortable wireless headphones with clear sound quality.</p>
 <button>Add to Cart</button>
 </div>
</div>

.product-card {
 max-width: 320px;
 background-color: white;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
 width: 100%;
 height: 220px;
 object-fit: cover;
}

.product-info {
 padding: 20px;
}

.product-info h2 {
 font-size: 22px;
 color: #222;
}

.price {
 color: #29ab87;
 font-size: 24px;
 font-weight: bold;
}

.product-info button {
 width: 100%;
 padding: 12px;
 background-color: #29ab87;
 color: white;
 border: none;
 border-radius: 6px;
 cursor: pointer;
}

This project is simple but very useful for learning component-based design.

9. Login Page Design

A login page is another common project for beginners. It helps you practice form design, alignment, spacing, and clean UI design. You do not need backend functionality in the beginning. Focus on the layout first.

What You Can Include

Email field
Password field
Login button
Remember me checkbox
Forgot password link
Signup link

HTML Concepts You Will Practice

Form
Input fields
Labels
Checkbox
Links
Button

CSS Concepts You Will Practice

Centering with Flexbox
Form styling
Background design
Input focus effects
Button hover effects

Simple Example

<div class="login-wrapper">
 <form class="login-box">
 <h2>Login</h2>

 <input type="email" placeholder="Email address" />
 <input type="password" placeholder="Password" />

 <button type="submit">Login</button>

 <p>Don't have an account? <a href="#">Sign up</a></p>
 </form>
</div>

.login-wrapper {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #f5f7fa;
}

.login-box {
 width: 350px;
 background-color: white;
 padding: 30px;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.login-box h2 {
 text-align: center;
 color: #222;
}

.login-box input {
 width: 100%;
 padding: 12px;
 margin-top: 15px;
 border: 1px solid #ccc;
 border-radius: 6px;
}

.login-box button {
 width: 100%;
 margin-top: 20px;
 padding: 12px;
 background-color: #29ab87;
 color: white;
 border: none;
 border-radius: 6px;
}

.login-box p {
 text-align: center;
 margin-top: 15px;
}

.login-box a {
 color: #29ab87;
}

This project is great for practicing centered layouts and form design.

10. Responsive Website Homepage

After building small projects, you should create a complete responsive homepage. This project combines many things you learned from the earlier projects and helps you understand how a full webpage comes together.

What You Can Include

Header
Navigation bar
Hero section
Services section
About section
Blog cards
Contact section
Footer

HTML Concepts You Will Practice

Semantic HTML
Header
Nav
Main
Section
Article
Footer
Links and images

CSS Concepts You Will Practice

Flexbox
Grid
Media queries
Responsive layout
Typography
Spacing
<button> elements
Cards

Simple Example

<header>
 <nav class="navbar">
 <div class="logo">WebLearn</div>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Lessons</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
</header>

<main>
 <section class="hero">
 <h1>Learn HTML and CSS</h1>
 <p>Build beautiful and responsive websites from scratch.</p>
 <a href="#" class="btn">Start Now</a>
 </section>

 <section class="services">
 <div class="card">
 <h2>HTML</h2>
 <p>Learn webpage structure.</p>
 </div>

 <div class="card">
 <h2>CSS</h2>
 <p>Learn styling and layout.</p>
 </div>

 <div class="card">
 <h2>Responsive Design</h2>
 <p>Make websites mobile-friendly.</p>
 </div>
 </section>
</main>

<footer>
 <p>&copy; 2026 WebLearn. All rights reserved.</p>
</footer>

body {
 margin: 0;
 font-family: Arial, sans-serif;
 color: #222;
}

.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #29ab87;
 padding: 15px 30px;
}

.logo {
 color: white;
 font-size: 24px;
 font-weight: bold;
}

.navbar ul {
 display: flex;
 gap: 20px;
 list-style: none;
}

.navbar a {
 color: white;
 text-decoration: none;
}

.hero {
 text-align: center;
 padding: 80px 20px;
 background-color: #f5f7fa;
}

.hero h1 {
 font-size: 48px;
}

.hero p {
 font-size: 18px;
}

.btn {
 display: inline-block;
 background-color: #29ab87;
 color: white;
 padding: 12px 20px;
 border-radius: 6px;
 text-decoration: none;
}

.services {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 25px;
 padding: 50px;
}

.card {
 background-color: white;
 padding: 25px;
 border-radius: 10px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

footer {
 text-align: center;
 padding: 20px;
 background-color: #222;
 color: white;
}

@media (max-width: 768px) {
 .navbar {
 flex-direction: column;
 gap: 15px;
 }

 .navbar ul {
 flex-direction: column;
 padding: 0;
 text-align: center;
 }

 .hero h1 {
 font-size: 34px;
 }

 .services {
 grid-template-columns: 1fr;
 padding: 25px;
 }
}

This project will help you understand how a complete webpage is created from start to finish.

Best Order to Build These Projects

If you are a complete beginner, follow this order:

Login Page Design
Contact Form Design
Product Card Design
Blog Card Layout
Responsive Navigation Bar
Image Gallery
Pricing Table
Simple Landing Page
Personal Portfolio Website
Responsive Website Homepage

This order starts with small components and slowly moves toward complete website layouts.

Tips for Building HTML and CSS Projects

Start with the HTML Structure

Before writing CSS, create the complete HTML structure first. Add headings, paragraphs, images, links, and buttons before styling. If you want to review this part, revisit HTML structure, HTML elements and attributes, and HTML semantic layout tags.

Keep Your Code Clean

Use proper indentation and meaningful class names.

<div class="product-card">
 <div class="product-info">
 <h2>Product Name</h2>
 </div>
</div>

This is easier to understand than using random class names.

Use Consistent Colors

Choose two or three main colors for your project instead of using too many. A simple palette could be #29AB87 for the primary color, #222 for text, #f5f7fa for the background, and #ffffff for white.

Practice Responsive Design

Always check your project on different screen sizes. Use CSS media queries, responsive layout, and mobile first design techniques to make your layout mobile-friendly.

Do Not Copy Without Understanding

It is okay to look at examples, but do not copy code without understanding it. Review HTML links, HTML images, CSS display, CSS margin, and CSS padding whenever you need a refresher.

Improve Each Project Slowly

Your first version does not need to be perfect. Build a simple version first, then improve it step by step. You can refine spacing, colors, hover effects, animations, and responsive behavior later.

What Should You Learn After These Projects?

After completing these HTML and CSS projects, the next good step is the JavaScript Tutorial. JavaScript helps you add interactivity to your pages.

Open and close a mobile menu
Validate a contact form
Create an image slider
Add dark mode
Create tabs
Build an FAQ accordion
Make a todo list
Create a quiz app

After JavaScript, you can move into Git, GitHub, React, Next.js, and basic backend development. But do not rush. A strong HTML and CSS foundation will make everything easier later.

Conclusion

HTML and CSS are the foundation of web development. If you want to become more confident in frontend development, you should practice by building real projects.

Start with small projects like login forms, contact forms, product cards, and navigation bars. Then move to bigger projects like landing pages, portfolios, and responsive homepages.

The best way to learn HTML and CSS is simple: learn a concept, build something with it, then improve it.

If you build these 10 beginner-friendly projects, you will understand HTML structure, CSS styling, layout design, responsive design, and real website sections much better. Keep practicing, keep improving, and you will become more confident with every project you build.

Why I Made My HTML Tutorial Downloadable (as a Free PDF)

Swapnil Raja — Fri, 31 Jul 2026 10:46:08 +0000

I run a small site called html5andcss3.org where I write simple HTML tutorials for beginners. Over the last year or so I kept getting the same message from readers, again and again: can I download this somewhere? My internet isn't great, or I only have data on my phone, or I want to read this on a flight.

I ignored it for a while honestly. Then I just counted how many people had asked, and it was a lot more than I expected. So I took the whole HTML tutorial and put it into one PDF. It's free, no email needed, nothing to sign up for. Here's the HTML tutorial PDF if you want it.

It's just the HTML part, not CSS. I kept it separate on purpose so it stays focused on one thing instead of trying to teach everything at once.

It covers the basic stuff you need when you're starting out. What a doctype is and why it's there. Head vs body. Paragraphs, headings, links, images, lists. Semantic tags like header, nav, section, article, and why people bother using them instead of just divs everywhere. Forms and the different input types. Tables and when you'd actually want one.

I'm not going to pretend a PDF is as good as an interactive course where you can type code and see it run. It's not. But that's not really what people were asking for. They wanted something they could open without needing wifi, something that doesn't disappear if a link breaks later.

If you're learning HTML from scratch, or you're teaching someone and want one file to just hand them instead of a bunch of links, the free HTML tutorial PDF might be useful.

If you read it and something's confusing or missing, tell me. It came out of real questions people sent me in the first place, so more of that only makes it better.