Skip to content
Use casesHTML & CSS projects

Master HTML & CSS with real-world projects

Level up with real HTML and CSS projects, from simple components to advanced responsive layouts that require Flexbox and Grid. Gain hands-on experience solving real-world coding problems while using a professional workflow.

Start building free

Join 1,083,961 developers building projects, reviewing code, and helping each other improve.

Testimonials

"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."

Kevin PowellWeb Developer & YouTuber

"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Jessica ChanWeb Developer & YouTuber

Build HTML & CSS projects that stand out

Frontend Mentor bridges the tutorial-to-practice gap with professionally designed challenges that mirror real work. Each HTML & CSS project includes detailed briefs, Figma design files, and style guides – everything you'd receive on a real project. Practice the complete professional workflow while getting support and feedback from our community.

How to get started building HTML & CSS projects

  1. Pick a project below that matches your current skill level.

  2. Build it from scratch—don’t just copy-paste code. Make it your own.

  3. Push to GitHub and share your work.

  4. Iterate: Add features, refactor your code, try different approaches.

  5. Want feedback? Submit your project for community review on Frontend Mentor.

Beginner HTML & CSS projects

Start your journey with single-component challenges that teach fundamental HTML structure and CSS styling. These projects focus on semantic markup, basic layouts, and responsive design principles. Perfect for those who've completed tutorials but haven't built anything independently yet.

  • Free+

    QR code component

    • HTML
    • CSS
    1newbie

    A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.

  • Free+

    Blog preview card

    • HTML
    • CSS
    1newbie

    This HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model.

  • Free

    Social links profile

    • HTML
    • CSS
    1newbie

    In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!

  • Free

    Product preview card component

    • HTML
    • CSS
    1newbie

    This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

  • Free

    NFT preview card component

    • HTML
    • CSS
    1newbie

    This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

  • Free

    Order summary component

    • HTML
    • CSS
    1newbie

    A perfect project for newbies who are starting to build confidence with layouts!

  • Free

    3-column preview card component

    • HTML
    • CSS
    1newbie

    This challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects.

  • Free

    Profile card component

    • HTML
    • CSS
    1newbie

    This is a perfect challenge to test your layout skills. The card layout doesn't shift, so it's also great for those that haven't dived into responsive websites yet!

  • Free

    Recipe page

    • HTML
    • CSS
    1newbie

    This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.

Intermediate HTML & CSS projects

Level up with grid layouts and multi-section landing pages that require CSS Grid, Flexbox, and responsive design. These projects should prompt you to consider best practices and code structure as your projects get larger.

  • Free

    Testimonials grid section

    • HTML
    • CSS
    2junior

    This challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!

  • Free

    Bento grid

    • HTML
    • CSS
    2junior

    This challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.

  • Premium

    Meet landing page

    • HTML
    • CSS
    1newbie

    This HTML & CSS only challenge is perfect if you're starting to get a bit comfortable with your layout skills. The responsive layout shifts will also be a great test!

  • Premium

    Typemaster pre-launch landing page

    • HTML
    • CSS
    2junior

    This project will be a perfect opportunity to put your CSS Grid skills to the test. The layout shifts from mobile, to tablet, to desktop will also be a nice challenge.

  • Free

    Clipboard landing page

    • HTML
    • CSS
    2junior

    Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.

  • Premium

    Workit landing page

    • HTML
    • CSS
    1newbie

    This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders!

  • Premium

    Art gallery website

    • HTML
    • CSS
    2junior

    This two-page art gallery project will be perfect if you're ready to branch out beyond single landing pages. There are some particularly interesting layout challenges!

  • Premium

    Tech book club landing page

    • HTML
    • CSS
    2junior

    This will be an excellent test of your HTML and CSS skills. The design uses common layout patterns you'll likely use in future projects, as well as some fun details.

Advanced HTML & CSS projects

Challenge yourself with complex layouts and multi-page websites, and try to get as close to the design as possible. These projects will require advanced HTML structure, accessibility best practices, CSS architecture, and attention to detail that are expected in a professional role.

  • Free

    Digital bank landing page

    • HTML
    • JS
    • CSS
    3intermediate

    This challenge will provide a nice test for your layout skills. If you're ready to move up from Junior challenges, this one is a great next step.

  • Free

    Bookmark landing page

    • HTML
    • CSS
    • JS
    3intermediate

    This challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.

  • Free

    Manage landing page

    • HTML
    • CSS
    • JS
    3intermediate

    This challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.

  • Premium

    Scoot multi-page website

    • HTML
    • CSS
    • JS
    3intermediate

    This multi-page website will really test your front-end skills. There are 4 pages to build with mobile, tablet, and desktop designs included.

  • Premium

    Photosnap multi-page website

    • HTML
    • CSS
    • JS
    4advanced

    In this challenge, you'll be building the marketing site for a photo-sharing app. This will be a perfect opportunity to put your CSS Grid skills to the test!

  • Premium

    Arch Studio multi-page website

    • HTML
    • CSS
    • JS
    4advanced

    In this challenge, you'll be building a 4-page site that will look great in any portfolio. You'll even get the chance to play with mapping APIs if you choose the bonus.

  • Premium

    Designo multi-page website

    • HTML
    • CSS
    • JS
    5guru

    This one's a BIG project! This challenge includes 5 different templates that make up a 7-page site. A perfect portfolio piece to show how you build multi-page websites!

Why Frontend Mentor for HTML & CSS projects?

We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.

  • Professional designs included

    Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.

  • Code reviews & feedback

    Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.

  • Portfolio-ready projects

    Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.

Frequently Asked Questions

  • What HTML & CSS projects should I build for my portfolio?

    Focus on projects that demonstrate real-world skills: a responsive landing page showcasing modern CSS Grid and Flexbox, an accessible form with proper validation, and a multi-page website proving you can handle complex layouts. Avoid generic or overly simple projects. Instead, choose projects with professional designs that mimic actual business problems, like e-commerce product pages or SaaS marketing sites that could belong to real companies.

  • How can I practice HTML and CSS effectively?

    The best way to practice HTML and CSS is through consistent, hands-on work on projects. Instead of only reading tutorials, try to build something small on your own – it could be recreating a section of a website or designing a basic webpage from scratch. Set yourself achievable challenges, such as creating a webpage layout or styling a form, to apply what you’ve learned. By coding regularly, you reinforce your understanding of HTML tags and CSS rules in a real context. Using resources like Frontend Mentor can also be helpful, as we provide ready-made project ideas and allow you to compare your solutions with others, enabling you to learn new techniques and receive feedback as you practice.

  • Where can I find HTML and CSS projects to work on?

    The lists above provide some good project ideas to help you get started at your relevant skill level. Each project comes with a professional design, starter code, and optimized assets, allowing you to focus solely on the code. The key is to pick a project that matches your skill level and interests – whether it’s a small personal website, a component like a card or form, or a bigger page. By working on these projects, you’ll get practical experience and learn how to solve real web design problems.

  • Can I build a website using only HTML and CSS?

    Yes, absolutely! You can build a wide range of websites and user interfaces using only HTML for structure and CSS for styling. In fact, a lot of beginner projects, like static landing pages, portfolios, blogs, or simple informational sites, can be entirely created with just HTML and CSS. These languages let you define the content and appearance of a page. While you might later add JavaScript for interactivity (like dynamic menus or form handling), it’s not required for a basic website. Starting with only HTML and CSS is a great way to learn the fundamentals of web development, allowing you to achieve clean, responsive designs without the need for JavaScript.

  • What's the difference between tutorials and project-based learning?

    Tutorials teach isolated concepts in controlled environments – you follow instructions to reach predetermined outcomes. Project-based learning presents problems without solutions, forcing you to combine multiple concepts, debug unexpected issues, and make design decisions. Research shows that project-based learning produces 47% better skill retention because it involves actively problem-solving, rather than passively copying. It's the difference between watching someone cook and actually preparing a meal yourself.

  • Should I use CSS frameworks or write vanilla CSS for projects?

    Learn vanilla CSS first. Frameworks like Bootstrap or Tailwind are shortcuts, not foundations. Without understanding cascade, specificity, and the box model, you'll struggle when frameworks don't cover your needs. Keep building projects with pure CSS until you're comfortable writing it before touching frameworks. This develops problem-solving skills and helps you understand what frameworks actually abstract away. When you do use frameworks, you'll make better decisions about when they help and when they hinder.

  • How do I know if my HTML & CSS code is good quality?

    Quality HTML uses semantic elements (<header>, <nav>, <main>), not just <div>s, passes W3C validation, and remains accessible to screen readers. Quality CSS stays DRY (Don't Repeat Yourself), uses consistent naming conventions (BEM or similar), and maintains low specificity for easier maintenance. Run Lighthouse audits for performance and accessibility scores. Most importantly: can another developer understand and modify your code? Clear, maintainable code beats clever, complex solutions every time. If you submit your solution on Frontend Mentor, we run it through static analysis to flag potential issues. Pro members also receive AI code reviews to identify more issues and provide better guidance.

Join 1,083,961 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in

Related pages

JavaScript projects

Learn JavaScript by building real projects. From beginner-friendly mini projects and API work all the way up to fully-functional multi-page web apps.

Beginner HTML & CSS projects

Practice basic HTML & CSS with simple, beginner-friendly projects to build your skills and confidence.