DEV Community

Cover image for 100+ Frontend Projects to level up your Skills
Kaja Uvais
Kaja Uvais

Posted on • Edited on

100+ Frontend Projects to level up your Skills

Are you new to frontend development and struggling to find projects to work on?. Whether beginner or pro, finding some interesting projects to work with can be a challenge. The practice of real projects makes you understand concepts much better, improve your coding skills, and build an impressive portfolio.

In this post, I'll share the GitHub repository that has 100+ frontend projects, complete with source code!

There is an excellent GitHub repository with over a hundred frontend projects that also has source code. You'll find projects in various stages, from the beginner level to advanced.

I’m sharing a few projects here

  • Age Calculator
  • Architecture Website Template
  • BMI Calculator
  • Blog Application
  • Contact Form
  • Calculator App
  • Countdown Timer
  • Ecommerce Website
  • Expense Tracker
  • Login Page
  • Password Generator App
  • TO-DO List
  • Youtube UI Clone
  • Image Finder - React Application
  • Parallex Website

Scroll down for the github project link

Give your support

How to Use This Repository

Once you find this repository (scroll down), here are a few tips on how to make the most of it:

Select a Project that Matching Your Skills

Start with projects where you feel comfortable, gradually taking on more challenging projects as your skills grow. It will give you increasing confidence and see real progress in your work.

Analyze the Code, Then Write Your Own

Study the source code so you know how the project works. Try to rebuild parts on your own in order to really learn them and encourage critical thinking.

Make Projects Yours

When you have successfully replicated a project, try to make it unique. Change its styling, add new features, or optimize the code. This will help develop problem-solving skills and make you understand better.

Practice Consistently

All of this requires building consistency. Ensure you have some time every week to work on a new project or improve an existing one.

Regular practice makes you better developer, so let’s start building and practicing today!

Project Link

Thanks for reading

Top comments (22)

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

This is great, thanks for sharing.

To add on, these sites also allow frontend learning by solving real-world projects:

Collapse
 
rajurk profile image
RAJESH K

Thanks for sharing

Collapse
 
shahbazaldiablo profile image
Shahbaz Ahmad Siddiqui

Thanks Uvais for posting this here, and thanks to Ayush for maintaining this repo on Github...!!!

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you

Collapse
 
james_takahashi_77908481e profile image
James Takahashi

thanks for your post.

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you

Collapse
 
abdo_ayman_1022 profile image
Abdo Ayman

Very helpful , Thanks

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you

Collapse
 
collinsguantai profile image
guantai

Great stuff

Collapse
 
iamaamins profile image
Alamin Shaikh

What's the different between this project and Frontend Mentor?

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

It is a basic frontend project to enhance your skills and is suitable for beginners

Collapse
 
iamaamins profile image
Alamin Shaikh

Perfect! I launched one last month that goes beyond the front end and supports multiple languages/frameworks.

It allows developers to generate personalized project ideas and provides step-by-step guides to help them learn by building.

Collapse
 
dmiller72 profile image
David Miller

Thanks for the list.

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you

Collapse
 
isreal_omanudhowho profile image
Isreal Omanudhowho

Thanks for sharing

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you

Collapse
 
chibuike_clement_9efa348c profile image
Chibuike Clement

Thanks for sharing!!

Collapse
 
kaja_uvais_a8691e947dd399 profile image
Kaja Uvais

Thank you