Top 10 Web Projects Build With Html, CSS, javascript, And Reactjs
Tags: beginners, productivity, codenewbie, webdev
Published: 2020-09-12 09:27:26

Hello Developers😁 ,
Hope you all are fine and growing🤗,

Today I bring Something cool for all of my fellow developers who want to get motivated or want to learn Coding👨🏼‍💻.

Today I bring all of my Web projects in front of you guys 👌.

Its 10 of my best projects, I have built so far while learning about web development😅.

All these projects have an online presence and hosted on Github Pages📥.

Here I listed all project with their URL and Github Repo,
You can visit the projects, and clone it from GitHub and improve your coding skills👍.

**Don't Forget To Follow Me on Github ->[My Github Profile](https://github.com/ShahrozAhmd)** 🤤
 
As Well As *Give Stars to Projects*  If You Think I Deserve It 🥺.

#1. TODO App (React.js):
Build this Todo app using react.js, it's just a front end, having features of adding, removing, and updating the tasks. 
####Languages Used: 
Html5, CSS3, JavaScript(ES6), React.js

![](https://raw.githubusercontent.com/ShahrozAhmd/react-todo/master/todo%20react.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/react-todo/)
###Project Github Repo: 
{% github ShahrozAhmd/react-todo no-readme%}
___


#2. Burger Builder App (React.js): 
This is basically an app that gives the ground to customers to build their own customize burger and order it.
*This project is still in process of building*
####Languages Used: 
Html5, CSS3, JavaScript(ES6), React.js

![](https://raw.githubusercontent.com/ShahrozAhmd/burger_builder/master/burger.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/burger_builder/)
###Project Github Repo: 
{% github ShahrozAhmd/burger_builder no-readme%}
___


#3. Expense Tracker App (Javascript):
It's an expense tracker app to calculate your monthly expenses and incomes.
####Languages Used: 
Html5, CSS3, JavaScript(ES6)

![](https://raw.githubusercontent.com/ShahrozAhmd/budget_app/master/expense%20app.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/budget_app/)
###Project Github Repo: 
{% github ShahrozAhmd/budget_app no-readme%}
___


#4. Honda Landing Page: 
Its a landing page design for Honda Motors as a clone or concept.
####Languages Used: 
Html5, CSS3, JavaScript(ES6)

![](https://raw.githubusercontent.com/ShahrozAhmd/hondamotors/master/honda.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/hondamotors/)
###Project Github Repo: 
{% github ShahrozAhmd/hondamotors no-readme%}
___


#5. NGO Website: 
Its a clone of an NGO Website
####Languages Used: 
Html5, CSS3, JavaScript(ES6)

![](https://raw.githubusercontent.com/ShahrozAhmd/saylani-landing-page/master/saylani.png)
###Visit Live Project:
[Visit This project By Clicking Here]( https://shahrozahmd.github.io/saylani-landing-page/)
###Project Github Repo: 
{% github ShahrozAhmd/saylani-landing-page no-readme%}
___


#6. TODO App (Vanilla JS): 
Build this Todo app using Javascript(ES6), it's just a front end, having features of adding, removing, and updating the tasks. 
####Languages Used: 
Html5, CSS3, JavaScript(ES6)

![](https://raw.githubusercontent.com/ShahrozAhmd/todo-vanillajs/master/toto%20js.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/todo-vanillajs/)
###Project Github Repo: 
{% github ShahrozAhmd/todo-vanillajs no-readme%}
___


#7. Javascript Documentation: 
Its a Javascript Documentation, build to learn about Javascript(ES5)
####Languages Used: 
Html5, CSS3, JavaScript(ES5)

![](https://raw.githubusercontent.com/ShahrozAhmd/js-documentaion/master/js%20document.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/js-documentaion/)
###Project Github Repo: 
{% github ShahrozAhmd/js-documentaion no-readme%}
___


#8. Civic Landing Page:
Design a Landing Page For Civic Car.
####Languages Used: 
Html5, CSS3, JavaScript(ES5)

![](https://raw.githubusercontent.com/ShahrozAhmd/civic-landing-page/master/civic.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/civic-landing-page/)
###Project Github Repo: 
{% github ShahrozAhmd/civic-landing-page no-readme%}
___


#9. Data Collecting Form:
Its a form used to get data about peoples. 
####Languages Used: 
Html5, CSS3, JavaScript(ES5)

![](https://raw.githubusercontent.com/ShahrozAhmd/survey-form/master/form.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/survey-form/)
###Project Github Repo: 
{% github ShahrozAhmd/survey-form no-readme%}
___


#10. Tribute Page: 
Its a Tribute Page For A Very Famous Personality
####Languages Used: 
Html5, CSS3, JavaScript(ES6), React.js

![](https://raw.githubusercontent.com/ShahrozAhmd/tribute-page/master/tribute.png)
###Visit Live Project:
[Visit This project By Clicking Here](https://shahrozahmd.github.io/tribute-page/)
###Project Github Repo: 
{% github ShahrozAhmd/tribute-page no-readme%}
___


That's All Developers😇 .
Hope You, Will, Like It👍.

Have Any Questions??? Ask Me In Comments, I am Available For You👀.

Happy Coding !!!🧑🏻‍💻