8 Beginner Design Projects for Aspiring Front-end Developers | Hacker Noon

These are 8 projects with requirements and designs that you can do to add to your portfolio as a Front-end Developer. The order of these projects is from easy to intermediate level.

One best way to start learning React or Vue is to make small components. By making a reusable button, you will learn about basic states and the most basics syntax.

Making a reusable is not that simple, especially the Input component. You have to be wary of different states: Error, Focus, Accessibility, sizes, etc. But you will learn a lot from making them and it will be a big help in the journey of learning a library like React.

You will be making a small version of Airbnb.

Given a simple JSON file, your task is to create a listing with filter functions. You will learn managing state in Front-end library in React or Vue.

Everyone knows Todo App, but did you ever try to make one?

You will practices skills like Array methods and managing states. I think it’s one of the best tasks to start learning a library, as it is not too difficult or too easy.

A Front-end developer needs to know how to use an API. You will practice basic skills working with a simple API in this project.

Now a bit more challenging project, not only will you have to use an API but also manage more complex states in your app. This project will definitely improve your skill as a Front-end developer.

Surprise, Surprise 🙂 another weather app project. In this one, you have to understand an API, display different data, and check user location. There are a lot of things to do and practice and is a perfect challenge for a junior to practice a library.

In this one, you have to deal with different routes, different states, and an interesting API from Github. A good project to put into your portfolio.


These projects are perfect for people who are starting to learn Front-end libraries and want to practice. Not only will you have 8 projects to add to your portfolio but also, you will get a certificate after completion.

In the end, best of luck to everyone who is studying and feel free to leave me a comment below.

Previously published at: https://dev.to/nghiemthu/8-projects-with-designs-you-can-do-to-become-front-end-developer-4pf8


The Noonification banner

Subscribe to get your daily round-up of top tech stories!

read original article here