7 Projects for Your Front-End Portfolio
Tags: career, portfolio, tutorial
Published: 2023-01-29 12:00:00

Web development and in general, programming is a field that requires a lot of practice, maybe you are looking to build your first portfolio or land a job.

In either cases you will need projects to showcase and if you started learning on your own (like I once did) then it’s going to be hard to find opportunities to practice, in this article you’ll find some of them.

I classified them on two different levels (beginners and advanced). All the designs are made by me except when noted.

## Beginners
You can make this simple web sites just by using HTML and CSS.
### Landing Page

![A shoe brand landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2odmgg6q5hzkv2nl295m.png)

Build a landing page for something. It could be a business, an influencer or an e-commerce shop. Th page should have a call-to-action and basic information about the website’s brand displayed on it.

### Restaurant Page

|![Restaurant Page featuring a bowl of food](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w5ozvfzwkc4ffov8ip0.jpg)
|:--:| 
| [Madhu Mia](https://dribbble.com/madhumia) for [Upnow Studio](https://dribbble.com/UpNow_Studio) |

Code a Restaurant page, some of the content you could include are menus, promotions and even a kitchen tour. You could make this a single page web or split into several pages for each option — It’s up to you!

### Help Page

|![A page featuring a help centre](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rief6zrrht7lny2wrvnw.jpg)
|:--:| 
| [Jordan Hughes®](https://dribbble.com/jordanhughes)

Make a help page for a business or software with a search bar and several topics included in, you could even code a chatbot for customer service if you feel confident with it.

## Advanced
This projects can be completed with advance knowledge on HTML, CSS and a Javascript framework (or pure javascript if you prefer).

### Kanban board

|![A website featuring a Kanban Board ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs57at5sjq96ti29l077.jpg)
|:--:| 
|[Patryk Ilnicki](https://dribbble.com/ilnicki)

Design a board similar to Trello’s one where users can drag and drop, remove, add, edit and update cards. You can also allow users to create tags for each card, You choose!

### JavaScript Library Clone

![Code for a recreation of the JavaScript Lodash library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0xtjmikrq7vkh0lvhda.png)

Especially useful if you aim to sharpen your skills with JavaScript, trying to code some of the methods of libraries like Lodash can be a good hook for recruiters.

### Calculator

![Basic web calculator with operations like multiplying and dividing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bbjaieevro5krldlduq.png)

Make a Web Calculator, it could go from a simple one to a very complex scientific one, remember to make it responsive so users from every device can use it.

### Streaming platform

|![A Streaming Platform featuring different movies and series](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dceyc6mpxy66qakbyeg.jpg)
|:--:| 
|[Emmanuel Edokpa](https://dribbble.com/maneel) for [Piqo Design](https://dribbble.com/Piqodesign) 

Using an API like TMDB (The Movie DataBase) to fetch data from famous movies, you could emulate a famous streaming platform like Netflix or Amazon Prime. This could also mean a good time to show your CSS skills making focus states and animations.

Some other ideas
* You could also try to replicate a famous social media app or website like Reddit, Twitter or Instagram, it can give recruiters a nice sight of what you are able to do.
* Never forget to have a well organized and complete Github profile with several projects and regular activity, it is a perfect way to show them your experience and collaboration skills.

**And that’s it for today’s article, I hope you have enjoyed this article as much as I enjoyed writing it. Have a great day! 😃**