base on Learn to code by building projects. <p align="center"> <a href="master-web-development.netlify.app"> <img alt="30 Days 30 Projects" height="80" src="./assets/image/add-readme.png"> </a> </p> <h1 align="center">Master Web Development</h1> <div align="center"> Learn by building simple projects, using HTML, CSS, JS. </div> <br /> <div align="center"> <!-- Standard --> <a href="https://standardjs.com"> <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard" /> </a> [](https://github.com/ellerbrock/open-source-badges/) [](http://makeapullrequest.com) <img src="https://img.shields.io/github/languages/code-size/iamrahulmahato/master-web-development?style=flat-square" alt="Code size" /> <img src="https://img.shields.io/github/license/iamrahulmahato/master-web-development?style=flat-square" alt="License" /> <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/iamrahulmahato/master-web-development?style=flat-square"> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/iamrahulmahato/master-web-development?style=social"> </div> ## 📚 Table of Contents - [⚡️ Introduction](#introduction) - [💯 Open Source Programs](#open-source-programs) - [🎯 All Projects](#all-projects) - [🚀 Getting Started](#getting-started) - [🛠️ Git Instructions](#git-instructions) - [❤️ Contributors](#contributors) - [📜 Code of Conduct](#code-of-conduct) ## ⚡️ Introduction This repository contains frontend projects that will help you to become an ace Frontend Developer. The goal is to be well versed with HTML, CSS, JavaScript and Browser APIs such as localStorage, IndexDB, etc. ## 💯 Open Source Programs this repo has been part of <div align="center"> <img width="576" alt="Hfest-Logo-2-Color-Void@2x" src="https://user-images.githubusercontent.com/49890655/193454110-793ede4b-6685-4b66-937a-97e03e390496.png"> </div> ## 🎯 All Projects The list of projects are given below - <br> [ 01- 15 Puzzle](https://yourwebsite.com/projects/15_puzzle/) [ 02- 2048 ](https://masterwebdevelopment.netlify.app/projects/2048%20Game/index.html) <br> [ 03- 3D Music Visualizer](https://masterwebdevelopment.netlify.app/projects/3D%20Music%20Visualizer/index.html ) [ 04- 8 Puzzle](https://yourwebsite.com/projects/8_puzzle/) [ 05- Alphabet Keyboard](https://masterwebdevelopment.netlify.app/projects/Alphabet%20Keyboard/index.html) [ 06- Among Us](https://masterwebdevelopment.netlify.app/projects/apod/) [ 07- Astronomy Picture of the Day](https://masterwebdevelopment.netlify.app/projects/apod/) <br> [ 08- Bill Splitter](https://masterwebdevelopment.netlify.app/projects/Bill%20Splitter/index.html) <br> [ 09- BMI Calculator](https://masterwebdevelopment.netlify.app/projects/bmi%20calculator/index.html) <br> [ 10- BookVerse-A Book Website](https://yourwebsite.com/projects/bookverse/) [ 11- Box Connect Game](https://masterwebdevelopment.netlify.app/projects/box%20connect%20game/box.html) <br> [ 12- Brick Breaker](https://masterwebdevelopment.netlify.app/projects/Brick%20Breaker/index.html) <br> [ 13- Bubble Hit Game](https://masterwebdevelopment.netlify.app/projects/Bubble%20Hit%20%20Game/) [ 14- Calculator](https://yourwebsite.com/projects/calculator/) [ 15- Candy Game](https://masterwebdevelopment.netlify.app/projects/Candy%20Game/index.html) [ 16- Chatbot](https://masterwebdevelopment.netlify.app/projects/Christmas%20Bauble/index.html) <br> [ 17- Christmas Bauble](https://masterwebdevelopment.netlify.app/projects/Christmas%20Bauble/index.html) [ 18- Coin Toss Game](https://yourwebsite.com/projects/coin_toss/) [ 19- Color Guessing Game](https://masterwebdevelopment.netlify.app/projects/Color%20Guessing%20Game/index.html) <br> [ 20- Connect-4-Dot]( https://masterwebdevelopment.netlify.app/projects/connect4/) <br> [ 21- Connect4(Two player)](https://masterwebdevelopment.netlify.app/projects/connect4/) <br> [ 22- Counter](https://yourwebsite.com/projects/counter/) <br> [ 23- Currency Converter](https://masterwebdevelopment.netlify.app/projects/Currency%20Convertor/index.html) [ 24- Cut The Rope](https://masterwebdevelopment.netlify.app/projects/Cut%20The%20Rope/index.html) [ 25- Dice Game](./projects/Dice%20Game/index.html) [ 26- Dictionary](https://masterwebdevelopment.netlify.app/projects/dictionary/) [ 27- Doodle Jump](https://masterwebdevelopment.netlify.app/projects/Cut%20The%20Rope/index.html) [ 28- Drawing App](https://masterwebdevelopment.netlify.app/projects/Simple%20Drawing%20app/index.html) [ 29- Drum Kit](https://masterwebdevelopment.netlify.app/projects/drum-kit/) [ 30- Email Validator](https://masterwebdevelopment.netlify.app/projects/Email%20Validator/index.html) [ 31- Eye that follow](https://masterwebdevelopment.netlify.app/projects/eye%20that%20follow/index.html) [ 32- Flappy Bird](https://masterwebdevelopment.netlify.app/projects/Flappy%20Bird/index.html) [ 33- Flashcard Quiz App](https://masterwebdevelopment.netlify.app/projects/FlashCard%20Quiz%20App/index.html) [ 34- Generate Gradient](https://masterwebdevelopment.netlify.app/projects/generategradientcolor/) [ 35- GeoQuest](https://masterwebdevelopment.netlify.app/projects/geography%20quiz/index.html) [ 36- Gorilla Game](https://masterwebdevelopment.netlify.app/projects/Gorilla%20Game/index.html) [ 37- Guess my Number](https://masterwebdevelopment.netlify.app/projects/Number%20guessing/index.html) [ 38- Guess the Shape](https://yourwebsite.com/projects/guess_the_shape/) [ 39- Hangman Game](https://masterwebdevelopment.netlify.app/projects/image%20Generator/index.html) [ 40- Image Generator](https://masterwebdevelopment.netlify.app/projects/image%20Generator/index.html) [ 41- Joke Generator](https://masterwebdevelopment.netlify.app/projects/Joke%20Generator/index.html) <br> [ 42- Last War](https://masterwebdevelopment.netlify.app/projects/Last%20War%20Game/index.html) [ 43- Leetcode Question Generator](https://masterwebdevelopment.netlify.app/projects/leet_code/) [ 44- LightHouse](https://yourwebsite.com/projects/lighthouse/) [ 45- Linktree Clone](https://masterwebdevelopment.netlify.app/projects/Linktree%20clone/index.html) [ 46- Love Calculator](https://masterwebdevelopment.netlify.app/projects/Love%20Calculator/index.html) [ 47- Magic 8 Ball](https://masterwebdevelopment.netlify.app/projects/Magic%20Square/index.html) [ 48- Magic Square](https://masterwebdevelopment.netlify.app/projects/Magic%20Square/index.html) [ 49- Maze Game](https://masterwebdevelopment.netlify.app/projects/maze/) [ 50- Maze Game with AI](https://masterwebdevelopment.netlify.app/projects/mazegame/) [ 51- Memory Match Game](https://masterwebdevelopment.netlify.app/projects/Memory%20Match%20Game/index.html) [ 52- Memory Tiles](https://masterwebdevelopment.netlify.app/projects/Memory%20Tiles/index.html) [ 53- Minesweeper](https://masterwebdevelopment.netlify.app/projects/minesweeper/) [ 54- New Year Countdown](https://masterwebdevelopment.netlify.app/projects/New%20Year%20Countdown/index.html) [ 55- Notes Taking](https://masterwebdevelopment.netlify.app/projects/Notes%20Taking%20Website/index.html) [ 56- Othello Game](https://masterwebdevelopment.netlify.app/projects/othello/) [ 57- Password Generator](https://masterwebdevelopment.netlify.app/projects/Password%20Generator/index.html) [ 58- Password Strength](https://masterwebdevelopment.netlify.app/projects/Password%20Strength/index.html) [ 59- Password manager](https://masterwebdevelopment.netlify.app/projects/Password%20manager/index.html) [ 60- Pokedex](https://masterwebdevelopment.netlify.app/projects/pokedex/) [ 61- Piano](https://masterwebdevelopment.netlify.app/projects/pionogame/) [ 62- Random Recipe Generator](https://yourwebsite.com/projects/randomrecipegenerator/) [ 63- Random User Generator](https://masterwebdevelopment.netlify.app/projects/Random%20Image%20Gen/index.html) [ 64- Rating System](https://masterwebdevelopment.netlify.app/projects/Rating%20System/index.html) [ 65- Recipe Nutrition](https://masterwebdevelopment.netlify.app/projects/Nutrition%20Chart/Nutrion.html) [ 66- Recipe Book](https://masterwebdevelopment.netlify.app/projects/Recipe%20Book/index.html) [ 67- Rock Paper Scissors](https://masterwebdevelopment.netlify.app/projects/Rock%20Paper%20Scissors/index.html) [ 68- Rolling Triumph](https://masterwebdevelopment.netlify.app/projects/Rolling%20Triumph/index.html) [ 69- Shooter Game](https://masterwebdevelopment.netlify.app/projects/simon/) [ 70- Simple Drawing App ]( https://masterwebdevelopment.netlify.app/projects/Simple%20Drawing%20app/index.html) <br> [ 71- Slide Puzzle](https://masterwebdevelopment.netlify.app/projects/Slide%20Puzzle/index.html) [ 72- Snake Game](https://masterwebdevelopment.netlify.app/projects/Snake%20Game/index.html) [ 73- Space Collision Game](https://masterwebdevelopment.netlify.app/projects/Space%20Collision%20Game/index.html) [ 74- Space Huggers](https://masterwebdevelopment.netlify.app/projects/spacehuggers/) [ 75- Sudoku](https://masterwebdevelopment.netlify.app/projects/Sudoku%20Solver/index.html) [ 76- Sudoku Game](https://masterwebdevelopment.netlify.app/projects/sudoku/) [ 77- Super Mario](https://masterwebdevelopment.netlify.app/projects/Super%20Mario/index.html) [ 78- Text to Speech](https://masterwebdevelopment.netlify.app/projects/Text%20to%20Speech/index.html) [ 79- Tic Tac Toe](https://masterwebdevelopment.netlify.app/projects/tic-tac-toe/) [ 80- Train Track Game](https://masterwebdevelopment.netlify.app/projects/Train%20Track%20Game/index.html) [ 81- TRIVIA](https://masterwebdevelopment.netlify.app/projects/TRIVIA/index.html) [ 82- URL Shortner](https://masterwebdevelopment.netlify.app/projects/url%20shortener/index.html) <br> [ 83- Virtual Keyboard](https://masterwebdevelopment.netlify.app/projects/Virtual%20Keyboard/index.html) [ 84- Virtual Pet Game](https://masterwebdevelopment.netlify.app/projects/Virtual%20Keyboard/index.html) [ 85- Weather](https://masterwebdevelopment.netlify.app/projects/weather/) [ 86- Whack a Mole](https://masterwebdevelopment.netlify.app/projects/Whack%20a%20mole/index.html) [ 87- Word Scramble](https://masterwebdevelopment.netlify.app/projects/Word%20Scramble%20Game/index.html) [ 88- Wordle Game](https://masterwebdevelopment.netlify.app/projects/wordle/) [ 89- Zombie Attack Game](https://masterwebdevelopment.netlify.app/projects/Stick%20Hero/index.html) [ 90- Zero Line Game](https://masterwebdevelopment.netlify.app/projects/Zero%20Line%20Game/index.html) <div align = "center"> <br> <table align="center"> <thead align="center"> <tr border: 1px;> <td><b>🌟 Stars</b></td> <td><b>🍴 Forks</b></td> <td><b>🐛 Issues</b></td> <td><b>🔔 Open PRs</b></td> <td><b>🔕 Close PRs</b></td> <td><b>🛠️ Languages</b></td> <td><b>🌐 Contributors </b></td> </tr> </thead> <tbody> <tr> <td><img alt="Stars" src="https://img.shields.io/github/stars/iamrahulmahato/master-web-development?style=flat&logo=github"/></td> <td><img alt="Forks" src="https://img.shields.io/github/forks/iamrahulmahato/master-web-development?style=flat&logo=github"/></td> <td><img alt="Issues" src="https://img.shields.io/github/issues/iamrahulmahato/master-web-development?style=flat&logo=github"/></td> <td><img alt="Open Pull Requests" src="https://img.shields.io/github/issues-pr/iamrahulmahato/master-web-development?style=flat&logo=github"/></td> <td><img alt="Close Pull Requests" src="https://img.shields.io/github/issues-pr-closed/iamrahulmahato/master-web-development?style=flat&color=critical&logo=github"/></td> <td><img alt="GitHub language count" src="https://img.shields.io/github/languages/count/iamrahulmahato/master-web-development?style=flat&color=critical&logo=github"/></td> <td><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/iamrahulmahato/master-web-development?color=2b9348"/></td> </tr> </tbody> </table> </div> <br> <center><h1 align="center">Getting Started </h1></center> Refer to the following articles on the basics of Git and Github in case you are stuck: - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request) - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) ### This project is now OFFICIALLY accepted for <div align="center"> <img src="https://raw.githubusercontent.com/SwanandD121/FeatherPerfect_fe/refs/heads/main/Untitled%20design.png" alt="GSSoC 2024 Extd" width="80%"> <img src="https://cdn.discordapp.com/attachments/657543125190967316/1294560786114674748/Screenshot_2024-10-12_122347.png?ex=670b752f&is=670a23af&hm=26ddd7f41740b8b19ee4985e7568b3892091384b3b85e7165770a4b10f4d1050&" alt="Hacktoberfest 2024" width="80%"> </div> <br> <div align="center"> </div> - Take a look at the Existing [Issues](https://github.com/iamrahulmahato/master-web-development/issues) or create your own Issues! - Wait for the Issue to be assigned to you after which you can start working on it. - Fork [this](https://github.com/iamrahulmahato/master-web-development) repository. Click on the <a href="https://github.com/iamrahulmahato/master-web-development"><img src="./assets/image/git-fork_1.png" height="20" width="20"></a> symbol at the top right corner. - Clone the forked repository. ```bash git clone https://github.com/<your-github-username>/master-web-development ``` - Navigate to the project directory. ```bash cd master-web-development ``` <p> * Create new branch for your feature. * Make all changes of source code in new branch. <img src="./assets/image/branch.png"> </p> * Stage your changes and commit ```bash #Add changes to Index git add . #Commit to the local repo git commit -m "<your_commit_message>" ``` - Push your local commits to the remote repo. ```bash git push ``` - Create a [PR](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) which will be promptly reviewed and suggestions would be added to improve it. - Add Screenshots to help us know what this Script is all about. - Congratulations! 🎉 Sit and relax, you've made your contribution to [master-web-development](https://github.com/iamrahulmahato/master-web-development) project. * Tip : Complete this process in GitHub ](in your browser) [](https://mermaid.live/edit#pako:eNpFUMtywjAM_BWNzvADOfRQWk5th0mPCQfhKI_iB1XsYRjg35EdpvVBlrQrraQrmtAxVtjbcDYjSYSPuvWgbxvk2GQDcWQ4SfhhE_ewXr_AQcibsdkIU2Qg-OIzvJbcfqldCIX73k2xyQb6yfITL3FGTXBO8U35ipAO4Qeen8QFz9TbdvJk7eUGpsju6n_9XbIWav5NPEctxBU6FkdTp4tdc6MWtbXjFit1O5Jji62_K49SDN8Xb7CKkniFEtIwYtWTnTVKp04F3iYahNxflnX4IJ_L3cr57g_ewG4o) # Contributors 🙋🏽 <p align="center"> <a href="https://github.com/iamrahulmahato/master-web-development/graphs/contributors"> <img src="https://api.vaunt.dev/v1/github/entities/iamrahulmahato/repositories/master-web-development/contributors?format=svg&limit=54" width="700" height="250" /> </a> </p> <br> ## Thank you for contributing 💗 We truly appreciate your time and effort to help improve our project. Happy coding! 🚀 ### Troubleshooting If you encounter any issues while setting up or using the project, please refer to the following troubleshooting steps: 1. **Dependency Conflicts**: - Ensure that all required dependencies are installed with compatible versions. Run `npm install` or `yarn install` to reinstall dependencies. - Check for peer dependency warnings, and if needed, update your dependencies using `npm update` or `yarn upgrade`. 2. **Setup Issues**: - Double-check that you have followed the setup instructions correctly. Missing environment variables or misconfigurations are common issues. - Ensure that you are using the correct Node.js version (check `.nvmrc` or `package.json` for version details). If you're not, you can switch versions using `nvm use`. 3. **Platform-Specific Errors**: - On Windows, make sure you have proper permissions to execute scripts. You might need to run the terminal or IDE as an administrator. - On Linux/macOS, ensure that all necessary permissions are set for running scripts with `chmod +x`. - If you're facing file path issues, ensure your terminal or IDE is running in the correct directory by checking with `pwd` (Linux/macOS) or `cd` (Windows). 4. **Common Errors**: - **"Module not found"**: Run `npm install` or `yarn install` to make sure all required modules are installed. - **"Permission denied"**: On Linux/macOS, you might need to use `sudo` for certain commands. - **"EADDRINUSE"**: If you see this error, a port is already in use. Use `lsof -i :PORT_NUMBER` to check and kill the process. 5. **Debugging & Logging**: - For more detailed error logs, run the application with the `DEBUG` environment variable set to `*` (e.g., `DEBUG=* npm start`). - If using Node.js, add `--inspect` to enable the built-in debugger (e.g., `node --inspect index.js`). ### Contact for Support If the above steps do not resolve your issue, feel free to open a GitHub issue: - GitHub Issues: [Submit an issue here](https://github.com/iamrahulmahato/master-web-development/issues) We’re happy to assist with any project-related queries! ## ❤️ Code of Conduct Please note that Open Source Design has a [Contributor Code of Conduct](./CODE_OF_CONDUCT.md). By participating in this project online or at events you agree to abide by its terms. <!-- -------------------------------------------------------------------------------------------------------------------------------------------------------> <br> <br> <div align="center"> ### Give a star ⭐️ if this project helped you! </div> ## Connect with Us 🤝 Thank you for exploring this project! We’d love to connect and hear from you. Reach out through any of the platforms below: [](mailto:[email protected]) [](https://github.com/iamrahulmahato) <div align="center"> <a href="#top"> <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top"> </a> </div>", Assign "at most 3 tags" to the expected json: {"id":"11921","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"