100+ Frontend Projects to level up your Skills
Kaja Uvais

Kaja Uvais @kaja_uvais_a8691e947dd399

About: Hi there! I'm Uvais, a passionate website designer with a love for all things web development. Uvais Codes is your go-to resource for web design tips, coding tutorials, and everything you need to buil

Location:
India
Joined:
Sep 14, 2024

100+ Frontend Projects to level up your Skills

Publish Date: Dec 6 '24
564 31

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

Comments 31 total

  • Shahbaz Ahmad Siddiqui
    Shahbaz Ahmad SiddiquiDec 9, 2024

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

  • RAJESH K
    RAJESH KDec 10, 2024

    Thanks for sharing

  • Alamin Shaikh
    Alamin ShaikhDec 10, 2024

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

    • Kaja Uvais
      Kaja UvaisDec 10, 2024

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

      • Alamin Shaikh
        Alamin ShaikhDec 11, 2024

        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.

  • Thịnh
    ThịnhDec 10, 2024

    Thanks

  • Chibuike Clement
    Chibuike ClementDec 10, 2024

    Thanks for sharing!!

  • Abdo Ayman
    Abdo AymanDec 10, 2024

    Very helpful , Thanks

  • David Miller
    David MillerDec 10, 2024

    Thanks for the list.

  • Isreal Omanudhowho
    Isreal OmanudhowhoDec 10, 2024

    Thanks for sharing

  • Harry Tonye
    Harry TonyeDec 11, 2024

    Am a Beginner and I only know html and some parts of css how can I get project based on this two
    And I like to know more on animation and grid

    • Prawesh kumar
      Prawesh kumarApr 1, 2025

      using html and css create a resume ui template, or create responsive Collage image using grid and add animation while swiching iamge on diffrent screen or on scroll using scroll snap css and can create bsic layout of grid using this tool craftydev.tools/css-responsive-gri...

  • guantai
    guantaiDec 11, 2024

    Great stuff

  • Creative
    CreativeDec 11, 2024

    thanks for your post.

  • TMD
    TMDDec 11, 2024

    Neat! I'd also suggest people look into GitHub Pages or CloudFlare Pages too if they then want to host their work somewhere. Both are free, backed by huge companies that won't mess you around, and great tools in general to understand.

  • Gabriel Akinbile
    Gabriel AkinbileDec 11, 2024

    Thanks a bunch for this.

  • Steven
    StevenDec 12, 2024

    Thanks for your good article

  • Kennedy Phiri
    Kennedy PhiriDec 12, 2024

    Very helpful, thanks.

  • iIKka
    iIKkaDec 18, 2024

    Thank you

  • Mian hassam
    Mian hassamJan 5, 2025

    Thanks for sharing

  • 4rm_Scratch_Dev
    4rm_Scratch_DevMar 6, 2025

    great

Add comment