Building a project is a must for any beginner web developer to polish their skills and solidify their learning from watching and reading tutorials.

That is why I have gathered and listed the ten perfect basic projects that would greatly help solo developers practice their web development skills.

Without any particular order, you can choose which project to build depending on your current skill level.

## Table of Contents
1. [Calculator](#calculator)
2. [Landing Page](#landing)
3. [Restaurant Page](#restaurant)
4. [Todo List](#todo)
5. [Rock, Paper, and Scissors](#rps)
6. [Sign-up Form](#signup)
7. [Admin Dashboard](#admin)
8. [Tic Tac Toe](#tictactoe)
9. [Library](#library)
10. [Weather App](#weather)

## 1. Calculator <a name="calculator"></a>

![calculator](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/calculator.webp)

This is a good project if you want to learn how to combine JavaScript, HTML, and CSS into one single project.

You will use basic HTML to create the buttons for each digit from 0 to 9, the basic Math operators `+, -, x, /` , and the equal `=` sign.

Anyway, you can add another button, like a clear sign `<-` or a decimal point `.`. Also, don't forget to have a display for the output of what you entered in the calculator.

The CSS will determine the look and colors of your calculator. Finally, you will use JavaScript to perform the basic Math operators for each of the buttons you have added.

If you want some inspiration, you can check out the calculator that I have created below. It's quite simple, but it gets the job done, so it's good.

**Live Demo:** [Calculator](https://naknamu.github.io/calculator/)  
**Source Code:** [https://github.com/naknamu/calculator](https://github.com/naknamu/calculator)


## 2. Landing Page <a name="landing"></a>

![landing page](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/landing.webp)

A landing page is the page you see after you click a link on the internet. Did that make sense?

For instance, when you click on a certain product that you want to buy, the webpage that will be displayed to you will be the landing page.

Basically, if you want someone to buy, subscribe, or take some action, you want them to go to your landing page, and this is what you are going to create.

You can create any landing page for what you want, like the landing page of a game (what I've done), a book, shoes, clothes, food—anything is possible.

A landing page is a good place to practice your CSS skills. The way you arrange the layout of each card or component will depend on your CSS flexbox or grid knowledge.

You can check out the landing page I have created below for reference. Note that it is not yet mobile-responsive, as this is not yet needed in this project. Though you can add that functionality if you want.

**Live Demo:** [Landing Page](https://naknamu.github.io/landing-page/)  
**Source Code:** [https://naknamu.github.io/landing-page/](https://github.com/naknamu/landing-page)

## 3. Restaurant Page <a name="restaurant"></a>

![Restaurant page](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/restaurant.webp)

Do you know that it is possible to build the entire content of a webpage using only JavaScript?

This is achieved by manipulating the DOM elements. Developing a restaurant page is a good exercise for this, as each page's content can be dynamically created by JavaScript functions.

For example, when the user visits the home page, JavaScript would add the content for that. Then, when the user clicks another tab, like the about page, JavaScript would be able to populate the details about the restaurant. Awesome!

Though it all depends on you and how you want to tackle developing a restaurant page.

For inspiration, check out the project below:  

**Live Demo:** [Restaurant Page](https://eckben.github.io/bearysBreakfastBar/)  
**Source Code:** [Github repo](https://github.com/EckBen/bearysBreakfastBar)

## 4. Todo List <a name="todo"></a>

![todo list page](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/todolist.webp)

A to-do list is a project that is usually required or given to beginner web developers to practice their web development knowledge.

A lot of tutorials show how to build a to-do list app to teach beginners basic JavaScript.

That is why if you are able to complete a to-do list app, then you have made huge progress in your learning.

There are many ways to create a to-do list application, depending on the features that you want to add.

For inspiration, check out the to-do list app I have created.

**Live Demo:** [mytodolist](https://naknamu.github.io/mytodos/)  

Check out also the following great todo apps deployed on the internet.

1. [Todoist](https://todoist.com/)
2. [Things](Uhttps://culturedcode.com/things/)
3. [any.do](https://www.any.do/)

## 5. Rock, Paper, and Scissors <a name="rps"></a>

![rock paper scissor application](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/rock-paper-scissors.webp)

Developing a game in a browser is quite fun. That is why, if you want to test your web development knowledge, then the rock, paper, scissors game is the perfect project.

You will create two players, one for the human and the other for the computer, or AI. Building the look or UI of this app will all depend on you. The important factor here is that you should be able to implement the mechanics of the game using HTML, CSS, and JavaScript.

For inspiration, check out this awesome live demo.

[Rock, Paper, and Scissor Game](https://lookingcoolonavespa.github.io/rock-paper-scissors/)

## 6. Sign-up Form <a name="signup"></a>

![signup form](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/signup-form.webp)

A lot of websites utilize a sign-up form to enable users to register for their services and also gain user information.

Knowing how to make a sign-up form is a must for any web developer.

To create a sign-up form, you use HTML for the input fields and labels. Then, you add CSS to make it look appealing to the users. Finally, you use JavaScript to add user validation and check for user input errors. Although input validation can also be achieved by adding HTML attributes like `required`.

Play around with the simple registration form that I have made below.

**Live Demo:** [Signup Form](https://naknamu.github.io/browser_form/)  
**Source Code:** [Github repo](https://github.com/naknamu/browser_form)

## 7. Admin Dashboard <a name="admin"></a>

![admin dashboard](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/dashboard.webp)

An admin dashboard is a good practice for using CSS grids. Depending on which you're most comfortable with, you can also use a CSS flexbox or both.

Anyway, an admin dashboard is for those who have intermediate knowledge of HTML and CSS, so a beginner might have a hard time doing this project.

Check out a live demo of a dummy admin dashboard below.

**Live Demo:** [Admin Dashboard](https://naknamu.github.io/admin-dashboard/)  
**Source Code:** [Github repo](https://github.com/naknamu/admin-dashboard)


## 8. Tic Tac Toe <a name="tictactoe"></a>

![tictactoe](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/tictactoe.webp)

Everyone is familiar with the game of tic-tac-toe. Building it in the browser using only HTML, CSS, and JavaScript is absolutely fun and challenging.

You can make a tic-tac-toe game for two players, both of whom are humans, or you can add an AI or computer player to challenge yourself even further.

Play around with the tic-tac-toe game I have developed below to gain some inspiration.

**Live Demo:** [Tic Tac Toe](https://naknamu.github.io/tictactoe/)  
**Source Code:**  [Github repo](https://github.com/naknamu/tictactoe)


## 9. Library <a name="library"></a>

![library](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/library.webp)

If you love reading books, then you would probably enjoy building a library. 

To build this project, you will need to create an HTML form for the book's details. Then use CSS to make the appearance of your library appealing and organized. Finally, you will use Javascript to store each book's details, for example, in the [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Or if you're a pro, use a backend service like [Firebase](https://firebase.google.com/).

Check out the simple library I have created in the live demo below.

**Live Demo:** [Library](https://naknamu.github.io/my-library/)  
Source Code: [Github Repo](https://github.com/naknamu/my-library)


## 10. Weather App <a name="weather"></a>

![Weather app](https://image.solodevhub.com/solodevhub/ten-projects-web-developer/weatherapp.webp)

Developing a weather application is a good exercise when you want to know how to use an Application Programming Interface, or API. 

Using an API in JavaScript is fairly easy. You just use the `fetch()` function to fetch data asynchronously across the internet.

You can use [openweathermap.org](https://openweathermap.org/) to fetch weather data around the world for free.

Check out the weather app I have built below.

**Live Demo:** [Weather App](https://naknamu.github.io/WeatherApp/)  
**Source Code:** [Github repo](https://github.com/naknamu/WeatherApp)

## Conclusion

These ten basic projects are good exercises for you to gain mastery of web development.

Take your time to complete these projects; don't rush them. Remember that these projects are just learning exercises for you so you can completely grasp developing web applications.

Hopefully, you will be able to build these projects, gain valuable skills as a solo web developer, and achieve your goals. Cheers!