6 Websites To Find Frontend Projects To Test Your Skills
Tags: webdev, css, html, javascript
Published: 2022-03-11 14:47:49

Many of us want to build projects and test our skills but we don’t know what to build and even if we know what to build we have to design it. websites like this provide us with the design and resources to build projects.

### List

1. [Frontend Mentor](https://www.frontendmentor.io)
2. [Dev Challenges](https://devchallenges.io/)
3. [Code Well](https://www.codewell.cc/)
4. [StyleStage](https://stylestage.dev/)
5. [Piccalilli](https://piccalil.li/category/front-end-challenges-club/)
6. [Frontend Practise](https://www.frontendpractice.com/)

## 1 - Frontend Mentor

![Frontend Mentor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6u03bo1x2uvkqghsvj0.png)

The first on our list is Frontend-Mentor. frontend-mentor is one of the best places to Find Projects to build or test your skills. With Frontend Mentor, you're going to get the following in a zipped file:

- JPEG design files for mobile & desktop layouts
- Style guide for fonts, colors, etc
- Optimized image assets
- README file to help you get started
- HTML file with pre-written content

with the added option of a Sketch/Figma 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 - Dev Challenges

![Dev Challenges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y7s17br0rmori61f0o2.png)

Dev-Challenges is also a very good platform for doing some challenges. They have three paths to try out different skills. With Dev Challenges, you're going to get the following in a zipped file:

- access to a Figma design file online
- Optimized image assets
- README file to help you get started

## 3 - CodeWell

![CodeWell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r11njn91757rd5nluhzy.png)

This one is also a good place to find challenges to test your skills. you are going to get:

- Figma files
- Assets (Icons and images)
- Design exported in PNG for Desktop, mobile, and tablet
- README file

## 4 - StyleStage

![StyleStage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kyechy74h3vro83ouvl.png)

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 their website, you'll see some amazing stuff.

## 5 - Piccalilli

![Piccalilli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sijijtbjw8570fyy4g3d.png)

Piccalilli has only 8 challenges but the solutions are posted for everyone to view. The fact that the solutions are available is great as a 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.

## 6 - Frontend Practice

![Frontend Practice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5cz41x5ykkybq6g8p3d.png)

Here you will find a list of websites that they choose for you to recreate. So you can practice your skills by building these real-world projects they also point out some of the good things that those pages are doing that you can focus on.

That's it, feel free to comment below places I might have missed and I'll add it to this article right away.