7 Websites To Find Front End Projects For Your Portfolio

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

This article is inspired by Frontend Mentor — a website where you can download zipped files that contain style guides, APIs, designs, and more so you can code out the projects.

Why make such a list?

Often more than not, when I visit a developer's portfolio, they all showcase the same projects. Calculators, Recipe Finder, To-do, these are all great projects to get into web development, but employers are not looking for these sort of projects any more. The list below will showcase unique ideas that you can build out and showcase on your portfolio.

1- Frontend Mentor

screely-1605089537399.png

With Frontend Mentor, you're getting the following in the zipped file:

✔️JPEG design files for mobile & desktop layouts

✔️ Style guide for fonts, colours, etc

✔️ Optimized image assets

✔️ README file to help you get started

✔️ HTML file with pre-written content

with the added option of a Sketch file, but for a subscription of $8/mo, it also includes access to all premium templates/challenges. You can also submit your code for other members of the community to view and review.

2- Piccalilli

screely-1605089820765.png

A smaller selection of challenges but still a viable one nonetheless. Piccalilli has only 8 challenges but the solutions are posted for everyone to view. The fact that the solutions are available is great as reference to people still new to web development, but it's always important to keep in mind that there is no one solution in web development.

3- CSS Zen Garden

screely-1605089996897.png

This one is old, but still a great way to showcase your CSS skills. The idea here is that everyone is provided with the same HTML file, but it's up to you to use CSS to make it your own. You can see all the submitted designs on CSS Zen Garden's website, you'll see some amazing stuff.

4- Frontloops

screely-1605090209243.png

This one is paid, but it provides you with the following:

✔️ 30 challenges with assets for practicing

✔️ 30 code solutions

✔️ 1st solution free

✔️ Technical hints and advice

5- Build Dribbble Shots

screely-1605090333831.png

This one is my favorite, it honestly is. Dribbble is notorious for having designs that aren't that usable, but there are still some established designers on the platform who know what they're doing. I believe building out Dribbble shots will challenge your CSS layout skills as well as your design skills.

6- Good Code

screely-1605090485982.png

This one is a bit of a shameless plug, but I'd like to include it, it might help someone out there. This is a personal project of mine(that has been shut down), Good Code has 8 Adobe XD Templates, 2 paid and 6 free. The files included are:

✔️ .xd File

✔️ Assets (Icons and images)

✔️ Design exported in .jpg

✔️ README file

Feel free to check it out in case you run out of Frontend Mentor challenges to try. You can also post your solutions to /r/GoodCodeChallenge

That's it, feel free to comment below places I might have missed and I'll add it to this article right away, and be sure to show my tweet some love, it helps out a ton!

Updated List (Updated as soon as I find resources)

7- Dev Challenges

screely-1605092559621.png

Nuruddin Shohan's photo

dev challenges is my favourite one !

Moemin Mamdouh's photo

Definitely a great resource :)

Santos Romero's photo

🤝Muchas gracias por compartir. 🐱‍🏍Estoy empezando con el desarrollo frontend y estas páginas son un gran recurso para perfeccionar nuestras habilidades. 🎨Frontend Mentor is mi favorito.

John Corbin's photo

Nice roundup! Frontend Mentor has some great looking tutorials. 😎

Moemin Mamdouh's photo

Definitely! Helped me out a ton with my CSS layout skills.

Ana Vela's photo

Thanks for putting this together! I'm familiar with a couple of them, and I'm looking forward to checking out some of the ones that are new to me.

Harshita Rawat's photo

Hello sir do you have project ideas for android app development too?