khushi-purwar / webdev-projectkart

The repository contains the list of awesome & cool web development beginner-friendly projects!

WebDev ProjectKart 💻

Report Bug · Request Extension

Table of contents :

• Overview
• Project Structure
• Open Source programs this repo has been part of
• Available Projects
• Contribution Guidelines
• Project Maintainer
• Our Valuable Contributors
• Feedback

Overview :

Hello Everyone 👋🏻 Glad to see you all here !! I hope everyone is eager to give their best contributions. This repository contains a list of awesome✨ & cool beginner-friendly web development projects ✌️! .

Tech-Stack used :

Project Structure :

• Folder consists of two folder (assets and script) and two files (index.html and readme.md)
• In the assets folder, there are two folders, css and media. css folder contains only CSS files & media folder contain only media files of the main website.
• In the script folder, all the script files will be there.

Open Source programs this repo has been part of :

ICC 2021

GSSOC 2022

Available Projects :

S-No.	Projects	S-No.	Projects	S-No.	Projects
01.	Password_Generator	02.	BMI_Calculator	03.	TIP_Calculator
04.	VAT_Calculator	05.	Digital_Clock	06.	Loan_Calculator
07.	Coin_Toss_App	08.	Calculator	09.	Quote_Generator
10.	Battery_Indicator_App	11.	Contact_Us_Form	12.	Analog_Clock
13.	Headlines	14.	Todo_App	15.	Weather_Application
16.	Simple_Quiz_App	17.	Drawing_App	18.	Stopwatch_App
19.	Number_guessing_game	20.	Event_time_counter	21.	Random_grediant_color
22.	Color_scheme_switcher	23.	Movie Recommendation App	24.	Meme Generator
25.	Github_Homepage_Clone	26.	Ping Pong Game	26.	Tenzies game
27.	2048_Game	28.	Codekaro	29.	Google_Clone
30.	Word_Definition	31.	CryptoRush-Application	32.	Drum Kit
33.	Maze-Game	34.	Rock-Paper-Scissors	35.	Palindrome_Checker
36.	IP-Address Tracker	37.	Anime profiles	38.	Background Generator
39.	BaseX_Calculator	40.	Breakout_Game	41.	Bubble Popping Game
42.	CRUD_Project	43.	CSS Grid	44.	Calculator
45.	Camera-Booth_with_Filters	46.	Candy Crush	47.	Candy-Crush-Game
48.	Color Flipper	49.	Color Picker Game	50.	Color_Code_Converter
51.	Counter	52.	Customize-Ice-Cream	53.	Dice Game
54.	Dictionary App	55.	Digital-clock	56.	Discord_App_Clone
57.	File Upload	58.	GST calculator	59.	GST_Calculator
60.	GitHub Profiles	61.	Google Sheets Api	62.	Google_Keep_Notes_Clone
63.	Grocery store	64.	Login - Register-Neumorphic	65.	LoginForm
66.	Mario Game	67.	Model Window	68.	Movie-Search-App
69.	Neumorphic-power-button	70.	Pokemon Generator	71.	Pong Game
72.	Quiz App	73.	RD return calculator	74.	Random Emoji Generator
75.	Random Jokes	76.	Random User Generator	77.	Register form
78.	Sample Product Landing Page	79.	Simon-Game	80.	Sneaker Site
81.	Sudoku-Solver-Game	82.	Survey Form	83.	TO-DO App
84.	Tic-Tac-Toe-Multiplayer	85.	Tic-Tac-Toe	86.	Tribute Page
87.	Windows 11 Clone	88.	Word Counter	89.	Youtube-Clone
90.	Youtube-Video-Downloader-App	91.	Carousel	92.	favicon
90.	fingerprint scanning animation	91.	flip_card1	92.	images
90.	music_player	91.	ping-pong game	92.	rock-paper-scissor-game
90.	whack a mole game	93.	Colorful Rain Effect	94.	Parallex Web Design
95.	Claymorphism Effect Form	96.	Wikipedia Clone	97.	Mobile Number Validator
98.	Pomodoro Clock	99.	Roman Numeral Converter	100.	Magic 8 Ball
101.	Inovative login Form

Project Maintainer 🕵🏼‍♂ :

Khushi Purwar

Our valuable Contributors 👨‍💻 :

Thanks to all the people who contribute 💜

Feedback :

If you have any feedback or suggestions please reach out to Project - Maintainer.

• Khushi Purwar

Or you can create an issue where you can mention some new features or extensions that will enhance this project✨.

Show some ❤️ by starring this fabulous repository!

webdev-projectkart's Issues

improvement in main webpage

Project name
Main index.html of webpage

Project link
( https://github.com/khushi-purwar/WebDev-ProjectKart/blob/master/index.html )

Improvements suggested
rename "Drawing App" => "17.Drawing_app"
rename "stopwatch app" => "18.Stopwatch_app"

add the link of these two above project to the main web page i.e root index.html file.

do some change in root style.css file so that webpage will responsive in nature.

Tetris Game

Project title
Tetris Game

Project Description
Make a Tetris Game in React

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
• ReactJS

Spotify Clone

Project title
Spotify Clone

Project Description
clone of spotify

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
• VueJS

Changing UI of index.html page

Can I enhance the landing page (index.html) with row card stacking and other CSS styles?

Student Grade Calculator

Project title
Student Grade Calculator

Project Description
Create a simple student grad calculator which takes subject marks of a student and it should print the grade with the remark, whether a student is passed or not.

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript

Contact Us Form

Project title
Contact us Form

Project Description
Create a responsive contact us form using HTML & CSS.

Stack:

• Html
• CSS

Add a Tic Tac Toe Game

Tic Tac Toe Game

Project Description

• A simple tic tac toe game which looks pretty simple but provides a good insight in JS.
• Game can be restarted at any point.
• Live Version: https://adit0507.github.io/Tic-Tac-Toe/

Stack:

• Html
• CSS
• JavaScript

File Upload using JS

Project title
File Upload

Project Description
Add two options: Either by drag or drop or by browse
Upload the file by drag and drop feature or by using browse button.

Stack:

• Html
• CSS
• JavaScript

Similar to this,

Add Stopwatch App using Javascript

Project title
Stopwatch App

Project Description
I made Stopwatch app using Html, Css and JavaScript.

Stack:

• Html
• CSS
• JavaScript

I want to add a react project which contains top 5 Coding platforms.

Coding Platforms
(Top 5 Coding Platforms)

Project Description
(It is frontend project which made in ReactJS. It shows to users top 5 coding platforms. I will extend this project and add more functionality like will add all recourses for CP and learning development for beginners. )

Stack:
[ ] Html
[ ] CSS
[ ] ReactJS

Improving Password Generator project

Project name
Password Generator

Project link
Password Generator

Problem
The field password length is a required field but it is not indicated to the user.

Improvements suggested

• 1. Add Required field * against password length field
• 2. Add a pop-up of 'required field' in case a user submits before entering the length
• 3. Add a drop-down with integers in the password length to make it easier for user to select the length

Netflix Clone

Project title
Netflix Clone

Project Description
its a clone of Netflix

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
• Svelte Js

Add a Candy Crush Clone

Candy Crush Clone
(Write project title over here)

Project Description

• Works exactly like the original game.
• Has a score counter to keep count of the candies crushed.
• Live version: https://adit0507.github.io/Candy-Crush/

Stack:

• Html
• CSS
• JavaScript

[BUG IN ] Readme.md file

Hii there , Greeting's of the day
Readme is one of the most important part of the repository which consist of the guidence and flow of conduct . .and if it conatins eroor's then it gave a bad impact ...on organisation

As ur readme conatain's the grammaratical error .. Please asisgn this issue to me so that i can make this correct and grammatical good.
Consider this issue under the ....

GSSOC'22

Thank's 🤞

Image Gallery

Project title
Image Gallery

Project Description
In this project, integrate Tailwind CSS with ReactJS and use the pixabay API to build an image gallery

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• ReactJS
• Tailwind CSS

Add a Dictionary App

Dictionary App

Project Description

• Free Dictionary API is used.
• The use of the word is also demonstrated in a sentence.
• Live Site: https://adit0507.github.io/Dictionary-App/

Stack:

• Html
• CSS
• JavaScript

Build a small Quiz App

Project title
Quiz Application

Project Description
Create a JavaScript Quiz Game and at last show the result to the users.

Stack:

• Html
• CSS
• JavaScript

Add a new project Drum Kit Online App

Project Title
Drum Kit Online

Project Description

Free online drum game where you can play drum beats, solos along to your favorite music, by clicking on the screen or with your PC keyboard. The way this website would work that we’ve got a number of keys on the webpage that represents different drums in a typical drum set and when you click on any of those buttons then you’ll get the corresponding sound of the drum. And in addition you can also use the keys on the keyboard to have a sound effect.

Stack:

• Html
• CSS
• JavaScript

The project is currently live at - https://srishti2128.github.io/Drum-Kit
GitHub Repo for the Project - https://github.com/Srishti2128/Drum-Kit

Kindly assign me this task @khushi-purwar so I can start working on it and make a pull request as soon as possible. I am a GSSOC'22 participant as a contributor.

Repository Website Enhancement

Project name
WebDev-ProjectKart Github-Pages site

Improvements suggested
The current page have a lot of empty space that can be put in use to make the site more stylish so that it improves both UI and UX.

I'm ready to provide a demo design to what's in my mind if the idea is accepted. but for how I'm going to do it, then I have 2 methods.

1. Simple: Using a CSS file and make use of media queries.
2. Complex: Going to use Bootstrap 5.

Issue created under GSSoC'22 contributions.

Enhancement in Code and New Features

Project name
Random Gradient Color

Project link
link

Improvements suggested

1. Providing 100vh height to body tag
2. Using a function to generate random values of x, y, z & a in JS will make the code DRY.
3. Providing a Copy button to copy the generated gradient to clipboard

Generate random gradient background color.

Project title
(Generate random gradient background color)

Project Description
( This project contain a button , by clicking on that button we can get different background color each time. )

Stack:

• Html
• CSS
• JavaScript

Add a Custom Ice Cream Maker

Custom Ice Cream Maker

Project Description

• Change the color of the scoop and toppings using the buttons.
• Check out the project here

Ice-Cream-Maker.mp4

Stack:

• Html
• CSS
• JavaScript

Can made better UI for the website (I am a gssoc'22 participant )

Project name
(Add project name over here)

Project link
(Provide project link over here)

Improvements suggested
(Write the improvements you are suggesting over here)

Add a Pong Game

Pong Game

Project Description

• A fun and challenging game in which the user is playing against the computer
• Background color keeps changing throughout the game.

Stack:

• Html
• CSS
• JavaScript

Newsletter Signup Page

Project title
Newsletter Signup

Project Description
I want to add a newsletter signup page which has api call with a newsletter.
@khushi-purwar If you find this to be required Please assign me this issue, I am a GSSOC'22 contributor.

Stack:

• Html
• CSS
• JavaScript
• Node.js

Adding a project, Todo App

Project title
Todo App

Project Description
A project that shows the list of todos, on completion, check it will mark it as completed and if task change/not valid, remove it. An add button will be provided to add more tasks.

Stack:
[ ] Html
[ ] CSS
[ ] JavaScript

Build a Event Time Counter

Project title
( Event Time Counter )

Project Description
( In This Project , we will Create a simple event time counter webpage. which count the total time left for an upcoming event. let's say , since new year in coming soon so this web page will count how much day , hour , min and sec left in new year. )

Stack:
[✔] Html
[✔] CSS
[✔] JavaScript

Color Scheme Switcher.

Project title
(Color Scheme Switcher)

Project Description
(idea of this project is that. there will be a color input box and after selecting any color from that box , the background color of whole webpage get changed.)

Stack:

• Html
• CSS
• JavaScript

Portfolio Template

PORTFOLIO TEMPLATE

The portfolio template will contain features like home, experience, achievements and links to linkedin, github profiles etc which can be customized further.

I would be glad if you would assign me this issue.

Add a Pokemon Generator

Pokemon Generator

Project Description

• A fun and easy to build Pokemon game which generates random Pokemons and their strengths.
• PokeAPI was used to get the data about different Pokemons.
• Click here to get the live demo
  
  
  
  

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
• [ x] Pokemon API

URL Shortening page

Project title
URL Shortening page

Project Description
To integrate with the shrtcode API to create shortened URLs and display them like in the designs using React framework.

Stack:

• Html
• CSS
• JavaScript

Counter Page

Project title
Counter

Project Description
This is a stopwatch counter project made using basic tech stack,.
@khushi-purwar If you find this fit, please assign me this issue. I am GSSOC'22 contributor.

Stack:

• Html
• CSS
• JavaScript

Build a Number Guessing Webpage.

Project title
( Number Guessing Webpage)

Project Description
( This project is based on the number Guessing game.)

Stack:
[✔] Html
[✔] CSS
[✔] JavaScript

Drawing App using JS

Project title
Drawing App using JS

Project Description
The app would have a canvas for drawing and some additional buttons for increasing, decreasing the size, and changing the colour, clearing the screen etc.

Stack:

• Html
• CSS
• JavaScript

Adding Quiz Game

Project title
(Quiz Game for Developers)

MySelf
I'm a GSSOC 022 participant.

Project Description
(It is a very simple quiz type game where it will be a question and there will be 4 multiple options for the user to select the answer if the answer will be correct then the user can be able to go on to the next question, for now, it has only four questions but the user can add their own questions and answers to the project🙂)

I'm attaching the DEMO please go through the Issue and I hope that you will assign me the issue to work on.

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
  

Add/Replace a Project : Todo List with a better UI, features and interaction

I have made a Todo App which can be used to substitute the existing Todo App Project owing to its more options and interactivity.

This ToDo List allows the user to create any number of todo lists as per their preference. Let's say for eg: Separate todo lists for House, Work, Entertainment.

All that the user has to do is to add the name of the new todolist at the end of home route.
Like : https://secure-eyrie-86104.herokuapp.com/Work or https://secure-eyrie-86104.herokuapp.com/Office
If he already has an existing todo list with that name, that todo list will be opened up, otherwise a new todo list will be created with the provided name.

The home route opens up today's todo list by default : https://secure-eyrie-86104.herokuapp.com

Also, whenever any list becomes empty after removing all items, the instructions are shown on the todo list for new users.
Removing an item is more user interactive since on clicking the checkbox next to the finished item, it is first struck off and then removed.

I have also made a video to illustrate the site's functioning.

The site is currently live at : To Do List
Please feel free to try it out

I would like to take up this task of replacing the current to do list with this new one or add it as a new project (as is suggested by admin).

GitHub repo for the project : https://github.com/rajaditya28/Todo-List

Kindly assign me the issue @khushi-purwar so I can start working on that right away. I am a GSSOC'22 contributor.

Portfolio Website

Project title
Portfolio website

Project Description
I will make my portfolio website using all the three stacks mentioned below. It will have all my contact, details , work history , education, achievements etc...

Stack:

• Html
• CSS
• JavaScript

Adding a new project, headlines

Project title
Headlines | Top 10 news

Project Description
A project, which asks a user to enter a location and fetch the top 10 news headlines. By default, the headline of the current location will be shown. I am going to use news API for it.

Stack:

• Html
• CSS
• JavaScript

Snake Game

Project title
Snake Game

Project Description
A simple snake game using react

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript
• ReactJS

Add a new project Sudoku-Solver-Game

Project title

Sudoku Solver Game

Project Description

This is a digital sudoku solver game with points tally and countdown timer.
It is made using vanilla js , html and css

Stack:

• Html
• CSS
• JavaScript

Add 2048 Game

Project title
2048 Game

Project Description
A game of 2048 in vanilla JavaScript, HTML and CSS

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript

Hello, I'm a GSSo'C 2022 Contributor,
Please assign me this issue, I want to add 2048 Game

Build a Music Player

Project title

Music Player

Project Description

Create a music player in our browser and listen cool songs .This Music player uses a simple, compact size design. You get basic music player functions like the next, previous, and play/pause button.

Stack:
[✔ ] Html
[ ✔] CSS
[ ✔] JavaScript

Adding Movie Recommendation App

Movie Recommendation App

Project Description
This project suggest you movies to watch. This app have many genres also. Just dive in and watch a good movie of your choice.

Stack:

• Html
• CSS
• JavaScript

Landing Page

Project title
Landing Page

Project Description
Create a landing page of any website like food website, e-commerce website. You can only use HTML & CSS to make it simple. For making it dynamic , you can add JavaScript as well.

Stack:

• Html
• CSS
• JavaScript

Add a Breakout Game

Breakout Game

Project Description

• A very fun project which will help beginners in enhancing their skills.
• Arrow keys have to be used to control the paddle
• If the ball misses the paddle, score resets to 0.
• Check out the live version here

Demo:

Breakout.Game.-.Google.Chrome.2022-02-27.20-09-36.mp4

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• HTML
• CSS
• JavaScript

Simon Game

Project title
Simon Game

Project Description
It is game in which players must repeat random sequences of lights by pressing the colored pads in the correct order. Level keeps increasing as long as player is repeating the correct sequence.

Stack:
And in order to tick the check box just but x inside them for example - [x] like this. Please delete options that are not relevant.

• Html
• CSS
• JavaScript

Weather Application is not responsive

Project name
(Weather Application)

Project link
(https://khushi-purwar.github.io/WebDev-ProjectKart/15.Weather_Application/)

Improvements suggested
(use media queries for different devices make it responsive and super clean)

Happy Coding!

Add an E-Commerce Sneaker Site

Sneaker Site

Project Description

• A really cool shoe site with a lot of features, eg: By clicking on "Buy Now" a modal opens in which the user can enter their information.
• Checkout the site here

Demo:
https://user-images.githubusercontent.com/78037846/156029925-d16a69f3-fc60-4a6a-b0de-206b2e6367da.mp4

Stack:

• [] Html
• [] CSS
• [] JavaScript

Drawing Canvas

Drawing Canvas

I will create a responsive Canvas where we can draw free hand . Later, we will add additional features in it.

Stack:
[ ] Html
[ ] CSS
[ ] JavaScript

Meme Generator

Project title
Meme Generator

Project Description
Build a responsive meme generator that will allow to create custom memes by adding funny or sarcastic caption to the images.

Stack:

• Html
• CSS
• JavaScript