10 projects ideas to build as a beginner web developer (HTML, CSS and JavaScript only)

Web developers can benefit from side projects because they are an excellent way to clarify ideas, build expertise and get out of your comfort zone. In this article, we are going to share with you 10 of the best projects ideas for web developer beginners :

  • Book List
  • Calculator app
  • Emoji app
  • Gradient Background generator
  • Number Guesser app
  • Pomodoro app
  • To-Do list App
  • Weather App
  • Weight tracker app

Book List

Difficulty :beginner

This is a great project to build if you want to learn more about how to get data from the user and save it on your website

You'll also practice more working with Local Storage and saving an entire list of items there

Calculator app

Difficulty :beginner

This project will teach you how to use Classes when working in the DOM and how to format your data in a way that looks nice

It will also teach you how to use CSS Grid in practice

Emoji app

Difficulty :beginner

This is a simple app where users can search for emojis and then copy them into the clipboard.

It could be a simple input field to look up inside an emoji list, and the result can be shown with a simple button to copy the emoji into the clipboard

Gradient Background generator

Difficulty :beginner

This is an awesome project to start with as a JavaScript newbie.

It contains a little bit of JavaScript but enough to get you some confidence

You can also use this website yourself after you build it

Number Guesser app

Difficulty :beginner

This project will teach you:

  • how to generate a random number
  • how to get data from the user and compare that data with the one you generated
  • how to restart everything after the number of tries goes to 0

Pomodoro app

Difficulty :beginner

This is an interesting app that will give you the opportunity to manipulate timers and some interesting concepts in javascript!

User stories to implement :

  • Enter a time
  • Start timer
  • Alert when the time is over
  • Bonus : As a user, I can customize the length of each pomodoro.

To-Do list App

Difficulty :beginner

This is a project everyone recommends to build because it ensures you learn the fundamentals. From how to manipulate the DOM to how to work with Local Storage, this is the project that can teach you the most!

you will learn :

  • How to create new tasks
  • How to validate fields
  • Filtering tasks (completed, active, ...) by learning filter and reduce
  • And especially understanding the fundamentals of JavaScript.

Weather App

Difficulty :beginner

This is an awesome project to build if you want to learn more about APIs and how to work with them

You'll learn how to get the data you want from an API and display that on your website

Weight tracker app

Difficulty :beginner

The app should accept a set of manual entries of weight measurements taken at different dates

  • It can plot a graph
  • It can allow to track multiple entities, for example more than one person weight
  • Persist them on the local storage


We know that choosing the right project to start with can be daunting. These are the best projects we found during our research to start with as a beginner, and we hope one of them is the right one for starting your journey.

If you think there's an excellent project app more convenient to be listed on this list, let us know, and we will look into it.

Till then, happy building!