DEV Community

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

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

Matt Studdert on March 26, 2020

There's nothing quite like building projects to grow as a developer. Tutorials are a brilliant learning tool. But at some point, the training wheel...
Collapse
 
makampos profile image
Matheus de Campos

ohh my god!. Awesome stuff.

Collapse
 
mattstuddert profile image
Matt Studdert

Thanks, Matheus! I hope you enjoy the challenges!

Collapse
 
makampos profile image
Matheus de Campos • Edited

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!

Thread Thread
 
mattstuddert profile image
Matt Studdert

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

I look forward to seeing what you build!

Collapse
 
hannahsaurusrex profile image
Hannah

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

Collapse
 
mattstuddert profile image
Matt Studdert

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! πŸ™‚

Collapse
 
louiseann93 profile image
Lou Willoughby

Thank you Matt! 😊
After starting my own side projects i quickly realised I’m a developer not a designer! πŸ˜‚ it gave me huge writers block so I was really happy to come across frontend mentor!

It definitely made me realise how comfortable I had gotten using frameworks and how I hadn’t built anything vanilla for way over a year! If anything it’s really inspired me to do more of the projects with just HTML and CSS so I can challenge my basic knowledge and improve where I need 😊

Added bonus the slack community are lovely and I try to help others when I can too 😊

Collapse
 
mattstuddert profile image
Matt Studdert

Thanks for your message, Lou! Sorry for my delayed response! It's awesome to hear you're enjoying Frontend Mentor and being in the Slack community. It's been great to see you getting involved! πŸ™‚

Collapse
 
louiseann93 profile image
Lou Willoughby

That’s ok Matt, it’s a pleasure πŸ™‚

Collapse
 
baal17 profile image
baal17 • Edited

Hi Matt! My name is Iqbaal. I am a psychology fresh graduate and started learning code 3 months ago. I really want to be a front end developer in the future. I`ve been learning html and css for 3 months and just started learn javascript 2 weeks ago. Honestly its getting hard. Especially for me who doesnt have any programming background. I realize that i have to improve my skills but at the same time i dont know how to build proper design or project for my portofolio. Thank you for this amazing stuff. Thank you....GBU

Collapse
 
mattstuddert profile image
Matt Studdert

Hey Iqbaal, thanks a lot for your message! Keep at it. It will start getting easier. If you need, perhaps just narrow your focus to HTML & CSS for the moment so that you don't spread yourself too thin. I hope you enjoy the challenges and find them useful to build up your skills and your portfolio!

Collapse
 
kokaneka profile image
kapeel kokane

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

Will post updates here :)

Collapse
 
mattstuddert profile image
Matt Studdert

Awesome! I look forward to seeing them :)

Collapse
 
kokaneka profile image
kapeel kokane

Here's the first one in the series:

Collapse
 
axelledrouge profile image
AxelleDRouge

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
axelledrouge profile image
AxelleDRouge

Not yet, I first started courses on frontendmasters

Thread Thread
 
mattstuddert profile image
Matt Studdert

Frontend Masters' content is great, good choice!

Collapse
 
edwardleung1 profile image
Edward Leung

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!

Collapse
 
mattstuddert profile image
Matt Studdert

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!

Collapse
 
andres profile image
AndrΓ©s PΓ©rez

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
ekafyi profile image
Eka

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.

Collapse
 
mattstuddert profile image
Matt Studdert

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!

Collapse
 
andrejika profile image
Vasilevs P.

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

Collapse
 
mattstuddert profile image
Matt Studdert

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.

Collapse
 
andrejika profile image
Vasilevs P.

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

Thread Thread
 
mattstuddert profile image
Matt Studdert

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.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

yes, definitely :)

Collapse
 
eclecticcoding profile image
Chuck

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
rajeshroyal profile image
Rajesh Royal

a great collection to sharpen your skills.

Collapse
 
mattstuddert profile image
Matt Studdert

Glad you like them, Rajesh!

Collapse
 
youkero profile image
youkero

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

Collapse
 
mattstuddert profile image
Matt Studdert • Edited

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 πŸ‘‡

adriantwarog image

You can see his first challenge video here.

Collapse
 
corelhas profile image
Carlos Orelhas

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.

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
evansaire profile image
Evans Edosa

I’m doing this

Collapse
 
mattstuddert profile image
Matt Studdert

I hope you enjoy working through the challenges!

Collapse
 
v3frankie profile image
Frankie Valentine

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
embiem profile image
Martin Beierling-Mutz

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!

Collapse
 
mattstuddert profile image
Matt Studdert

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!

Collapse
 
spidycoder profile image
Paridhi Jain

I think it is one of the best resource to learn.

Collapse
 
mattstuddert profile image
Matt Studdert

Thank you so much for saying! πŸ™‚

Collapse
 
liam1809 profile image
Liam Ha

love it, thanks alot.

Collapse
 
mattstuddert profile image
Matt Studdert

I hope you enjoy the challenges, Liam!

Collapse
 
ehudthelefthand profile image
ΰΉ‚ΰΈ›ΰΉŠΰΈ‡ΰΉ€ΰΈ«ΰΈ™ΰΉˆΰΈ‡.js

This is so cooool!
I will definitely try it out

Collapse
 
dimshik100 profile image
Dima Vishnevetsky

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

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
rattanakchea profile image
Rattanak Chea • Edited

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

Collapse
 
mattstuddert profile image
Matt Studdert

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 πŸ™‚

Collapse
 
heyrashida profile image
Rashida Thompson

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

Collapse
 
mattstuddert profile image
Matt Studdert

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

Collapse
 
ellemaker profile image
ellemaker

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

Collapse
 
mattstuddert profile image
Matt Studdert

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?

Collapse
 
dannyenagu profile image
DannyEnagu

Great stuff......

Collapse
 
tonnykosgey profile image
Tonny Kosgey

Thanks a lot for sharing this. Just began the projects. Really helpful. Good stuff.

Collapse
 
elviravaladez profile image
Elvira Valadez

This is such a great resource! Thanks for sharing!

Collapse
 
utorrentgame profile image
gta 6 news

Nice work. I like it. Keep it up. Thanks for sharing us.
GTA 5 Cheats PS5

Collapse
 
_omggamer_ profile image
Omggamer

Great blog.
Omggamer

Collapse
 
justariel profile image
JustAriel

yo ty