HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
10 HTML and CSS Projects for Beginners to Practice in 2026
HTML & CSSJuly 7, 2026

10 HTML and CSS Projects for Beginners to Practice in 2026

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

CSS Concepts You Will Practice

Simple Example

Portfolio hero section markup

html

<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>

Portfolio hero section styles

css

.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

CSS Concepts You Will Practice

Simple Example

Responsive navbar markup

html

<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>

Responsive navbar styles

css

.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

CSS Concepts You Will Practice

Simple Example

Landing page markup

html

<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 page styles

css

.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

CSS Concepts You Will Practice

  • Form layout
  • Input styling
  • Border radius
  • Focus effects
  • Button design
  • Spacing

Simple Example

Contact form markup

html

<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 styles

css

.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

CSS Concepts You Will Practice

  • CSS Grid
  • Card design
  • Borders
  • Shadows
  • Spacing
  • Hover effects

Simple Example

Pricing table markup

html

<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 table styles

css

.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

CSS Concepts You Will Practice

  • Grid layout
  • Card layout
  • Image styling
  • Border radius
  • Shadows
  • Hover effects

Simple Example

Blog card grid markup

html

<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 card grid styles

css

.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

CSS Concepts You Will Practice

  • Grid layout
  • object-fit
  • Hover effects
  • Border radius
  • Responsive layout

Simple Example

Image gallery markup

html

<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>

Image gallery styles

css

.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

CSS Concepts You Will Practice

  • Card design
  • Image styling
  • Button styling
  • Shadows
  • Hover effects
  • Flexbox

Simple Example

Product card markup

html

<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 styles

css

.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

CSS Concepts You Will Practice

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

Simple Example

Login page markup

html

<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 page styles

css

.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

CSS Concepts You Will Practice

Simple Example

Responsive homepage structure

html

<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>

Responsive homepage styles

css

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:

  1. Login Page Design
  2. Contact Form Design
  3. Product Card Design
  4. Blog Card Layout
  5. Responsive Navigation Bar
  6. Image Gallery
  7. Pricing Table
  8. Simple Landing Page
  9. Personal Portfolio Website
  10. 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.

Clean class naming example

html

<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.