loading...
Cover image for 16 front-end projects (with designs) to help improve your coding skills
Frontend Mentor

16 front-end projects (with designs) to help improve your coding skills

mattstuddert profile image Matt Studdert ・12 min read

There's nothing quite like building projects to grow as a developer. Tutorials are a brilliant learning tool. But at some point, the training wheels need to come off and you need to start building.

The problem is, as developers, we're often not the best at making things look great ourselves πŸ˜…

I wouldn't even know where to begin if someone asked me to create something beautiful from scratch! But, if a designer hands me a design I'll more than happily code it up.

If you're in the same boat, we've got some great projects for you at Frontend Mentor. Each one includes mobile & desktop designs, a front-end style guide (for fonts, colors, etc) and a basic brief. The assets are all provided and pre-optimized meaning all you need to focus on is writing the code!

You can use any tools you like while building each project. So if you're wanting to practice things like React, Vue, Sass, Tailwind you get to choose your setup.

So, without further ado let's get started on the first challenge:

1) Single price grid component

Design preview for the Single Price Grid Component challenge

Requirements Difficulty Type URL
HTML, CSS Newbie Free View Project

This challenge is a perfect starting point. Instead of building an entire landing page, your task is to build a single component.

Brief

Your users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • See a hover state on desktop for the Sign Up call-to-action

Learning Outcomes

Although small, this project presents some nice layout challenges. It's a great opportunity to practice Flexbox or CSS Grid. You'll also get the basics of building a responsive component.

2) Four card feature section

Design preview for the Four card feature section challenge

Requirements Difficulty Type URL
HTML, CSS Newbie Free View Project

You'll face an interesting layout test in this project. How would you approach the vertically centered cards?

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Learning Outcomes

This will be another useful challenge to build up your confidence when laying out elements. You'll have to choose the best approach to align the cards and make them re-align down to mobile screen size.

3) Huddle landing page with a single introductory section

Design preview for the Huddle landing page with a single introductory section challenge

Requirements Difficulty Type URL
HTML, CSS Newbie Free View Project

This challenge will build on the other two and take it up a notch. You'll need to think about how best to position and space the elements out on the page.

Brief

Your users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • See hover states on desktop for all interactive elements

Learning Outcomes

Think about positioning images and content next to one another. Scaling the content down to mobile without it looking too squashed will be a challenge as well.

4) Base Apparel coming soon page

Design preview for the Base Apparel coming soon page challenge

Requirements Difficulty Type URL
HTML, CSS, JS Newbie Free View Project

You'll get your first sprinkling of JavaScript in this challenge. You'll need to validate the form when it's submitted. Oh, and there's a sneaky layout order swap with the written content and the image from desktop to mobile.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the form is submitted if:
    • The input field is empty
    • The email address is not formatted correctly

Learning Outcomes

You'll learn how to do basic form validation on a single field. This project will also take a bit of layout planning, so be sure to take some time, in the beginning, to think it through.

5) Intro component with sign-up form

Design preview for the Intro component with sign-up form challenge

Requirements Difficulty Type URL
HTML, CSS, JS Newbie Free View Project

Now that you've done form validation on a single field, how about doing it on four? Also, don't forget to make sure the inputs are accessible to screen reader users!

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the form is submitted if:
    • Any input field is empty
    • The email address is not formatted correctly

Learning Outcomes

By now you should have a good handle on basic layout. So the main learning outcome here will be how to write reusable JavaScript code to check the validity of the different form fields.

6) Pricing component with toggle

Design preview for the Pricing component with toggle challenge

Requirements Difficulty Type URL
HTML, CSS, JS Junior Free View Project

This pricing component challenge will present a nice layout challenge for you. Especially if you go for the bonus mentioned below!

Brief

Your users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • Control the toggle with both their mouse/trackpad and their keyboard
  • Bonus: Complete the challenge with just HTML and CSS

Learning Outcomes

If you go for the bonus you'll need to think through your HTML structure carefully. You'll need the perfect markup to be able to make use of pseudo-classes and sibling selectors for the toggle.

7) Insure landing page

Design preview for the Insure landing page challenge

Requirements Difficulty Type URL
HTML, CSS, JS Junior Free View Project

There's only a tiny bit of JavaScript for this challenge with the mobile navigation toggle. But it will be the first time that you're building a multi-section landing page on this track.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Learning Outcomes

Take some time to plan this out before diving into the code. You'll be faced with some interesting tests placing the background patterns.

8) Fylo dark theme landing page

Design preview for the Fylo dark theme landing page challenge

Requirements Difficulty Type URL
HTML, CSS Junior Free View Project

Back to pure HTML and CSS for this one. It's quite a long landing page, so your layout skills will be really tested.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Learning Outcomes

This challenge is all about the layout. Try to pay attention to the responsiveness and get it looking good at all screen sizes.

9) URL shortening API landing page

Design preview for the URL shortening API landing page challenge

Requirements Difficulty Type URL
HTML, CSS, JS, API Intermediate Free View Project

This challenge will give you the first taste of pulling data from an API. You'll be integrating with the rel.ink API to build a fully-functional URL shortener.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • Shorten any valid URL
  • See a list of their shortened links, even after refreshing the browser
  • Copy the shortened link to their clipboard in a single click
  • Receive an error message when the form is submitted if:
    • The input field is empty

Learning Outcomes

Learn how to make HTTP requests and integrate with an external API. This could also be a good project to start diving into JS libraries/frameworks like React or Vue. Also, have a go at using localStorage to save the list of shortened links if the user refreshes their browser.

10) Manage landing page

Design preview for the Manage landing page challenge

Requirements Difficulty Type URL
HTML, CSS, JS Intermediate Free View Project

This landing page will give your CSS skills a nice test. There are some background patterns that need to be positioned accurately and some little details in the switch from desktop to mobile. There are also a few areas that will require some JS.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • See all testimonials in a horizontal slider
  • Receive an error message when the newsletter sign-up form is submitted if:
    • The input field is empty
    • The email address is not formatted correctly

Learning Outcomes

Your major takeaways from this challenge will be related to CSS and layout. If you haven't done so by now, you might want to try out a pre-processor, like Sass, to help keep your code maintainable.

11) Bookmark landing page

Design preview for the Bookmark landing page challenge

Requirements Difficulty Type URL
HTML, CSS, JS Intermediate Free View Project

Another landing page challenge to reinforce what you learned in the last challenge. This one includes a couple of trickier elements though. Firstly, the background patterns aren't included as assets in the download, so you need to code them yourself. Secondly, we've got a couple of JS-based components with the feature tabs and FAQs section.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the newsletter form is submitted if:
    • The input field is empty
    • The email address is not formatted correctly

Learning Outcomes

This challenge will help solidify your knowledge and refine workflow when creating a fairly complex layout. This is another good opportunity to use a pre-processor. You might even want to have a go at using a UI framework, like Tailwind, if you're feeling comfortable with pure CSS/Sass by now.

12) Job listings with filtering

Design preview for the Job listings with filtering challenge

Requirements Difficulty Type URL
HTML, CSS, JS Intermediate Free View Project

Now that you've got a bit more comfortable with JavaScript, let's practice some filtering. In this challenge, you'll need to filter the job listings by the categories selected. There are two options to choose from for how to approach it:

  • Option 1: Filter job listings based on the categories using the HTML data- attribute. In this option, you'd use the hardcoded content that already exists in the index.html file.
  • Option 2: Use the local data.json file to pull the data and then dynamically add the content. This would be perfect if you're looking to practice a JS library/framework like React, Vue, or Svelte.

Brief

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Filter job listings based on the categories selected

Learning Outcomes

You'll learn how to use JavaScript to filter items in the DOM. This is a key skill when building client-side applications, so this challenge will be great practice!

13) Rock, Paper, Scissors game

Design preview for the Rock, Paper, Scissors game challenge

Requirements Difficulty Type URL
HTML, CSS, JS Advanced Free View Project

Let's move away from landing pages and filters for a moment and build a game. This Rock, Paper, Scissors game will test both your CSS skills and your JS chops. There's even a bonus game of Rock, Paper, Scissors, Lizard, Spock if you're feeling adventurous!

Design preview for the Rock, Paper, Scissors, Lizard, Spock bonus challenge

For those of you who don't know about Rock, Paper, Scissors, Lizard, Spock, take a look at this:

Brief

Your users should be able to:

  • View the optimal layout for the game depending on their device's screen size
  • Play Rock, Paper, Scissors against the computer
  • Maintain the state of the score after refreshing the browser (optional)
  • Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Learning Outcomes

This challenge will give your logic-based problem-solving skills a nice run-out. Try to push yourself to build the bonus game if you can. This is another opportunity to practice using localStorage to maintain the state of the game if the user refreshes their browser.

14) REST Countries API with color theme switcher

Design preview for the REST Countries API with color theme switcher challenge

Requirements Difficulty Type URL
HTML, CSS, JS Advanced Free View Project

This is a perfect challenge to start really testing your skills and integrating with a 3rd-party API. You'll be using the REST Countries API to pull data from. This one is perfect for practicing JS libraries/frameworks!

Brief

Your users should be able to:

  • See all countries from the API on the homepage
  • Search for a country using an input field
  • Filter countries by region
  • Click on a country to see more detailed information on a separate page
  • Click through to the border countries on the detail page
  • Toggle the color scheme between light and dark mode (optional)

Learning Outcomes

You'll learn a lot during this challenge. You can use it to practice anything you like, so try to push yourself.

15) myteam multi-page website

Design preview for the myteam multi-page website challenge

Requirements Difficulty Type URL
HTML, CSS, JS Advanced Premium View Project

This is one of our premium (paid) challenges and it offers an awesome chance to build a multi-page website that would look great in your portfolio. If you want to experience the closest feeling to being a professional developer, our premium challenges are where it's at. Our premium challenges come with mobile, tablet, and desktop designs. They also include the original Sketch design file and a simple, but professional design system.

Brief

Your users should be able to:

  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements throughout the site
  • See the correct content for each team member on the About page when the + icon is clicked
  • Receive an error message when the contact form is submitted if:
    • The Name, Email Address or Message fields are empty should show "This field is required"
    • The Email Address is not formatted correctly should show "Please use a valid email address"

Learning Outcomes

If you've never built a multi-page website you should learn loads by completing this challenge. Because it's a larger site, planning it out first is a must. Focus on structuring your CSS/Sass/Styles (or whatever) to keep your code scalable. Some great patterns to look into here are ITCSS, SMACSS, and 7:1. They're all great approaches and will help massively when building larger websites.

16) Minimalist portfolio website

Design preview for the Minimalist portfolio website challenge

Requirements Difficulty Type URL
HTML, CSS, JS Intermediate Premium View Project

If you've got this far then you're definitely going to need a great looking portfolio site to show off your hard work! That's exactly what you can use this challenge for. Build it to the design and then customise it to make it your own.

Brief

Your users should be able to:

  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements throughout the site
  • Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
  • Receive an error message when the contact form is submitted if:
    • The Name, Email Address or Message fields are empty should show "This field is required"
    • The Email Address is not formatted correctly should show "Please use a valid email address"

Learning Outcomes

This challenge is another great opportunity to practice writing reusable and maintainable code. As I mentioned above, premium challenges come with mobile, tablet, and desktop designs and include the original Sketch design file. So you can really practice building a fully-responsive website.

Go forth and code!

If you've got this far, well done! There are more free challenges on Frontend Mentor, so please check it out and browse around.

Whenever you submit a solution on the platform you receive an automated report that includes:

  • An accessibility audit
  • A HTML validation check

These can help you find issues with your code. You'll also be able to receive feedback from the community, so be sure to ask questions when you submit your solution!

Another great way to learn more is to actually write some code reviews yourself! So please feel free to dive in and start answering questions and giving feedback. You'll learn loads and it also has the nice benefit of helping others! πŸ™‚

I hope you find the challenges useful to practice on and build up your portfolio and confidence as a developer.

I always love hearing feedback and suggestions, so please feel free to let me know if you have any!

Posted on by:

mattstuddert profile

Matt Studdert

@mattstuddert

Founder of Frontend Mentor (frontendmentor.io), front-end/JavaScript developer, part-time lead instructor at General Assembly.

Frontend Mentor

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join over 12,000 developers building projects, reviewing code, and helping each other get better.

Discussion

markdown guide
 
 

Thanks, Matheus! I hope you enjoy the challenges!

 

Thank you for provind this content.
I think is helping a lot new programmers who starting on web development.

Maybe I can try coding some challenges on this weekend. thanks again!

You’re welcome! Hopefully the challenges will help a lot of new developers πŸ™‚

I look forward to seeing what you build!

 

Great designs! Awesome stuff.
Planning to start a React implementation playlist on my YouTube channel soon:
youtube.com/channel/UCowumzu6ojutp...

Will post updates here :)

 

Awesome! I look forward to seeing them :)

 

Here's the first one in the series:

 

I LOVE FRONTEND MENTOR!!!! β€οΈπŸ§‘πŸ’›πŸ’šπŸ’™πŸ’œπŸŒˆ
This is such a great resource to practice your fundamentals without having to think up what to make. Takes the stress out of thinking up your next project. And the community solutions are so helpful if you get stuck. It's super fun to comb through other solutions and see how other people have solved the same problems. ✌️

 

Thank you so much, Hannah! Seeing how different people solve the same problem is a really great way to learn new techniques. It's great to hear that you're loving the platform! πŸ™‚

 

Thanks, exactly what I need to improve on that part.
It is one of my current weaknesses, especially creating designs in a few hours, I lack the reflexes and references to do it. What make a great design, how to do it quickly, with everything going with it, my list of things to learn and improve is becoming overwhelming

 

Awesome! I'm happy you like it πŸ™‚ Have you completed any of the challenges yet?

 

Not yet, I first started courses on frontendmasters

Frontend Masters' content is great, good choice!

 

Thank you so much for this! I was completely lost at which project I should build first, I'm going to follow this guide and hopefully improve my front-end skills once I complete all the projects!

Thanks Matt!

 

Hey Edward, only just seen this message. How have you been getting on with the challenges? I hope the article has helped provide a track for you!

 

I've been wanting to hone my CSS skills for a while, thanks a lot for sharing these!

 

You’re welcome! I hope you enjoy the challenge!

 

This is beyond awesome! I use the "Rock, Paper, Scissors, Lizard, Spock" challenge to learn Svelte for fun. Having a simple project (can be done in a couple of hours) that's NOT another to-do app with the design and assets laid out is helpful to put your learning into practice--much better for retention than just following tutorials.

 

Thanks a lot! I'm really happy you like the site and found the Rock, Paper, Scissors, Lizard, Spock challenge useful to practice Svelte. I hope you enjoy the other challenges!

 

Frontend Mentor is great but i miss something like example implementation made by experienced developer πŸ™‚

 

Don't worry, plans are already in the works for exactly this! πŸ™‚ In the meantime though, there are some amazing developers who have been live-streaming themselves working through the challenges. Here are a couple:

thecodercoder image

Jessica has live-streamed a few of our challenges and I know she has plans to do more. You can see her live-streams here.

florinpop17 image

Florin is currently working his way through all of the challenges and has created this YouTube playlist that you can watch.

I'd also recommend checking out the Wall of Fame on the Frontend Mentor dashboard. You can then find solutions from some of the more experienced developers by visiting their profiles.

I hope this helps! πŸ™‚

Update: Adrian Twarog has also just started creating YouTube videos of himself completing the challenges as well πŸ‘‡

You can see his first challenge video here.

 

Not bad! But lack of backend stuff. IMO, each frontender should know the backend at least basically nowadays.

 

Thanks, Vasilevs. It's definitely a nice-to-have skill for a front-end developer. But I wouldn't say it's a must-have. Knowing how to pull data from an API is crucial for a front-end dev though IMO. So the API challenges are perfect for building up that skill set.

 

Hey Matt,
can't agreed completely. In nowadays might be a dead simple task learn something. After 3rd programming language all looks the same, just different syntax. And i know one designer who define the target - learn at least laravel for prototyping, and i saw on my own look that he did the design job and php simple backend. What do you think? I guess in nowadays all people should have a wide scope of view but core specialization in something deeply than others. Just 5 cents

If a front-end developer also knows a server-side language then it's definitely a big plus and they could potentially then work as a full-stack developer. But it's definitely not a requirement for the job. I have been involved in hiring plenty of front-end developers that know HTML, CSS, and JS who can't build out the back-end.

 

Great job. I am so doing this. Thank you for such a great resource.

 

That's great to hear, Chuck. I hope you enjoy the challenges!

 

Such a unique collection! Great work!! πŸ”₯

 

Thanks, Vaibhav! Hopefully, it will help people navigate the site if they're not sure which challenge to take on next πŸ™‚

 
 

a great collection to sharpen your skills.

 

Glad you like them, Rajesh!

 

This is great. Like grindstone to your frontend dev skills.

I hope the community will grow and interact more in the way you imagine. Getting reviews by other users is a neat idea!

 

Thanks a lot, Martin! My next big goal is to build the features/functionality to help facilitate peer-to-peer code reviews and feedback. There's a lot that could be improved in that area, so hopefully, the changes will help everyone get the help they're looking for!

 

This is a great source.
Sending it to all my students immediately.

Thank you very much for sharing.
πŸ‘πŸ‘πŸ‘

 

Awesome! Thanks a lot for sharing it with your students, Dima. I hope they enjoy the challenges! πŸ™‚

 

Love the designs! Great work Matt, thank you for making the majority of these free to access. Looking forward to building them.

 

Thanks, Frankie! Great to hear that you'll be trying them out!

 

Yesssss...the kind of resource I’ve been looking for πŸ™ŒπŸΎ

 

Great! I hope you enjoy the challenges! πŸ™‚

 

We are in the same boat!! Every time I need to build something from scratch without any design, I just block!!
Greate stuff you wrote here.

 

Glad you like it, Carlos πŸ™‚ I hope you enjoy the challenges!

 

Matt, really interesting project you got. Are design frameworks (Bootstrap, bulma, etc) usage allowed or discouraged? or is it free form?

 

Hey Rattanak, thanks a lot. I'm happy you like the idea. You can use any tools you like in the challenges. The end goal is to replicate the design as closely as possible, but how you get there is completely up to you πŸ™‚

 
 

Hi all, here are some of my output also need your advise. thank you
ellezoilo.netlify.com/

 

Amazing work, Elle! It's great to see you're already on the 8th challenge! Have you been posting your solutions to the platform for review?