├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── bugreport.yml │ └── feature.yml ├── workflows │ └── auto-comment.yml └── pull_request_template.md ├── images ├── pr.png ├── fork.png ├── clone.png ├── format1.png ├── image.png └── ResourceHub-Banner.png ├── LICENSE ├── CONTRIBUTING.md ├── README.md ├── CODE_OF_CONDUCT.md ├── UI-UX Design └── README.md └── Web Development └── README.md /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false -------------------------------------------------------------------------------- /images/pr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/pr.png -------------------------------------------------------------------------------- /images/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/fork.png -------------------------------------------------------------------------------- /images/clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/clone.png -------------------------------------------------------------------------------- /images/format1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/format1.png -------------------------------------------------------------------------------- /images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/image.png -------------------------------------------------------------------------------- /images/ResourceHub-Banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/ResourceHub/main/images/ResourceHub-Banner.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Joseph Martin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/auto-comment.yml: -------------------------------------------------------------------------------- 1 | name: Auto Comment 2 | on: 3 | issues: 4 | types: 5 | - opened 6 | pull_request: 7 | types: 8 | - opened 9 | - closed 10 | jobs: 11 | run: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name : Auto comment on Issues opened 15 | uses: wow-actions/auto-comment@v1 16 | with: 17 | GITHUB_TOKEN: ${{ secrets.AUTO_COMMENT }} 18 | issuesOpened: | 19 | Thank you @{{ author }}, for raising this issue!
20 | 21 | Your input is valuable in improving our project. 22 | Please ensure you provide more context about the issue. We'll review it soon
23 | 24 | Thanks for your contribution! 😊 25 | 26 | - name: Auto Comment on Pull Request Opened 27 | uses: wow-actions/auto-comment@v1 28 | with: 29 | GITHUB_TOKEN: ${{ secrets.AUTO_COMMENT }} 30 | pullRequestOpened: | 31 | Hello 👋 @{{ author }}, I hope you're doing well!
32 | 33 | Thank you for raising your pull request and contributing to ResourceHub 🎉. 34 | Please ensure that you've followed our contributing guidelines and the PR template. We'll review it soon 35 | 36 | 37 | - name: Auto comment on PR merged 38 | uses: wow-actions/auto-comment@v1 39 | with: 40 | GITHUB_TOKEN: ${{ secrets.AUTO_COMMENT }} 41 | pullRequestMerged: | 42 | Congratulations @{{ author }}! 🎉 Your pull request has been merged.
43 | 44 | Thanks for your contribution! 😊 45 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | **IMPORTANT:** When creating your Pull Request, please use the following format for the title: `Category - Resource Name & Section` 2 | 3 | 4 | 5 | Please follow these steps to create the PR title correctly: 6 | 7 | > - Replace "Category" with the relevant category, such as **Web Development** or **UI & UX Design**. 8 | > - Replace "Resource Name & Section" with the specific name of the resource and the relevant section where it belongs. For instance, you could use something like **Web development - CSS Portal & Tools** or **Web development - Leetcode & Challenges**. 9 | 10 | 11 | 12 | 13 | ### Fixes Issue 14 | 15 | 16 | 17 | ### Description: 18 | 19 | 20 | 21 | ### Resource URL: 22 | 23 | 24 | 25 | ### Checklist: 26 | Before submitting your pull request, ensure that you have completed the following tasks: 27 | 28 | - [ ] I have carefully reviewed and adhered to the [contributing guidelines](https://github.com/jfmartinz/ResourceHub/blob/main/CONTRIBUTING.md) before creating this pull request. 29 | - [ ] I followed the prescribed PR title template. _(Check this if you're adding a resource)_ 30 | 31 | 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bugreport.yml: -------------------------------------------------------------------------------- 1 | name: "🐞 Bug Report" 2 | description: Encountered a bug? Report it here 3 | title: "🐞 [BUG] - " 4 | labels: ["bug"] 5 | body: 6 | - type: checkboxes 7 | id: terms 8 | attributes: 9 | label: Issue Verification 10 | description: Before you open an issue, please verify that it's indeed a bug and hasn't been reported before. 11 | options: 12 | - label: I have verified that this is a new bug report. 13 | required: true 14 | - type: textarea 15 | id: describe-the-bug 16 | attributes: 17 | label: Describe the bug 18 | description: Please provide a clear and detailed description of the bug you've encountered. 19 | placeholder: Describe the issue you're facing, including any error messages, unexpected behavior, and steps to reproduce. 20 | validations: 21 | required: false 22 | - type: textarea 23 | id: expected-behavior 24 | attributes: 25 | label: Expected behavior 26 | description: What did you expect to happen instead of the bug you've described? 27 | placeholder: Explain the expected outcome or behavior. 28 | validations: 29 | required: false 30 | - type: textarea 31 | id: steps-to-reproduce 32 | attributes: 33 | label: Steps to reproduce 34 | description: Please provide clear, step-by-step instructions on how to reproduce the bug. 35 | placeholder: List the exact steps you followed to encounter the bug. 36 | validations: 37 | required: false 38 | - type: textarea 39 | attributes: 40 | label: Additional Context 41 | description: Additional information about the bug (Optional). 42 | validations: 43 | required: false 44 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: "💡 Feature Request" 2 | description: Got a cool idea? Suggest it here 3 | title: "💡 [FEATURE] - <title>" 4 | labels: ["feature"] 5 | body: 6 | - type: checkboxes 7 | id: terms 8 | attributes: 9 | label: Idea Contribution 10 | description: Before you open an issue, please check if a similar issue already exists or has been closed before. 11 | options: 12 | - label: I have read all the feature request issues. 13 | required: true 14 | - type: textarea 15 | id: whats-your-idea 16 | attributes: 17 | label: Explain feature request 18 | description: Is your feature request related to a problem? Please describe. 19 | placeholder: Provide a clear and concise description of the problem. For example, "I consistently encounter frustration when..." 20 | validations: 21 | required: false 22 | - type: textarea 23 | id: whats-your-solution 24 | attributes: 25 | label: Explain your solution 26 | description: Could you outline the solution you envision? 27 | placeholder: Give a clear and concise description of the desired outcome. 28 | validations: 29 | required: false 30 | - type: textarea 31 | id: alternatives 32 | attributes: 33 | label: Any alternative approaches/features 34 | description: Have you considered any alternative approaches or features? 35 | placeholder: Provide a clear and concise description of any other solutions or functionalities you've contemplated. 36 | validations: 37 | required: false 38 | - type: textarea 39 | attributes: 40 | label: Additional Context 41 | description: Include any extra information or visuals that may be relevant to the feature request. 42 | validations: 43 | required: false -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Welcome! 4 | 5 | We're excited that you're interested in contributing to our open-source project. Whether you're new to open source or an experienced developer, we want your contributions to be smooth and enjoyable. Below, you'll find some guidelines and tips to help you get started. 6 | 7 | Please adhere to and review our [Code Of Conduct](https://github.com/jfmartinz/ResourceHub/blob/main/CODE_OF_CONDUCT.md). 8 | 9 | 10 | ## Important Rules 11 | 12 | To ensure a smooth experience, please follow these important rules: 13 | 14 | 1. **Relevance**: Make sure that the resource you're adding matches the category. Web development resources go in the web development category, UI/UX design resources in the UI/UX design category, and so on. 15 | 16 | 2. **Use the PR Template:** When you create a pull request (PR), please make sure to carefully follow and review the provided PR template. This will help facilitate smooth collaboration. 17 | 18 | 3. **How to Add a Resource**: 19 | 20 | **URL Format**: When adding a resource, follow this format: 21 | 22 | ```markdown 23 | <a href="URL_here">Resource Name</a> 24 | ``` 25 | 26 | **Add to Table**: Insert it into the table like this: 27 | 28 | ```markdown 29 | <tr> 30 | <td><a href="URL_here">Resource Name</a></td> 31 | <td>URL Description</td> 32 | </tr> 33 | ``` 34 | 35 | > Note: Replace "URL_here" with the actual resource URL and provide a brief description. 36 | 37 | For example: 38 | 39 | ![Format](images/format1.png) 40 | 41 | ## Ways to Contribute 42 | 43 | There are many ways to contribute, and you don't need to be a coding wizard to get involved. Here are some beginner-friendly ways to contribute: 44 | 45 | - **Fix Typos or Grammar**: Help us maintain clean and error-free content. Raise an [issue](https://github.com/jfmartinz/ResourceHub/issues/new?assignees=&labels=bug&projects=&template=bugreport.yml&title=%F0%9F%90%9E+%5BBUG%5D+-+%3Ctitle%3E) 46 | 47 | - **Add Valuable Resources**: If you find a resource that you think would benefit others, share it with the community. 48 | 49 | - **Documentation Updates**: Improve project documentation, or let us know if something is unclear. 50 | 51 | - **Share Ideas**: Have a suggestion or an idea for project improvement? Raise an [issue](https://github.com/jfmartinz/ResourceHub/issues/new?assignees=&labels=feature&projects=&template=feature.yml&title=%F0%9F%92%A1+%5BFEATURE%5D+-+%3Ctitle%3E). 52 | 53 | - **Outdated or broken link**: If you encounter broken links or outdated resources, please let us know so we can keep things up to date. Or if you have any resource that you can add as alternative, then raise an [issue](https://github.com/jfmartinz/ResourceHub/issues/new?assignees=&labels=bug&projects=&template=bugreport.yml&title=%F0%9F%90%9E+%5BBUG%5D+-+%3Ctitle%3E). 54 | 55 | We recommend that if you're simply adding a resource to a specific category, there's no need to create an issue and submit a pull request (PR) automatically. 56 | 57 | Thank you for taking the time to read these guidelines. We appreciate your interest and look forward to your contributions to this project. 58 | 59 | Happy contributing! 🚀 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ![ResourceHub Banner](images/ResourceHub-Banner.png) 5 | 6 | <div align="center"> 7 | 8 | [![Open Source Love](https://firstcontributions.github.io/open-source-badges/badges/open-source-v1/open-source.svg)](https://github.com/firstcontributions/open-source-badges) 9 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 10 | [![Contributors Welcome](https://img.shields.io/badge/contributors-welcome-0b7cbd)](https://github.com/nikohoffren/fork-commit-merge/pulls) 11 | [![First Contributors](https://img.shields.io/badge/first-contributors-0b7cbd)](https://github.com/nikohoffren/fork-commit-merge/pulls) 12 | [![PR:s Welcome](https://img.shields.io/badge/PR:s-welcome-0b7cbd)](https://github.com/nikohoffren/fork-commit-merge/pulls) 13 | [![Issues](https://img.shields.io/github/issues/jfmartinz/ResourceHub.svg?style=flat)](https://github.com/jfmartinz/ResourceHub/issues) 14 | [![Stars](https://img.shields.io/github/stars/jfmartinz/ResourceHub.svg?style=flat)](https://github.com/jfmartinz/ResourceHub/stars) 15 | [![Forks](https://img.shields.io/github/forks/jfmartinz/ResourceHub.svg?style=flat)](https://github.com/jfmartinz/ResourceHub/forks) 16 | [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) 17 | [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md) 18 | </div> 19 | 20 | _ResourceHub_ is an open-source project that serves as a collection of valuable resources for web development, carefully curated by the amazing contributors in the community. 21 | <br> 22 | 23 | You can contribute helpful resources you've discovered on the internet and share them with us! 24 | 25 | 26 | 27 | ## Category 28 | Here are the currently available categories in the project.<br> 29 | - [Web Development](https://github.com/jfmartinz/ResourceHub/tree/main/Web%20Development) 30 | - [UI & UX Design](https://github.com/jfmartinz/ResourceHub/tree/main/UI-UX%20Design) 31 | > Have another idea for a new category? Feel free to raise an [issue](https://github.com/jfmartinz/ResourceHub) 32 | 33 | ## Contributing 34 | Read [CONTRIBUTING.md](https://github.com/jfmartinz/ResourceHub/blob/main/CONTRIBUTING.md) before contributing. 35 | 36 | ### 1. Fork the Repository 37 | 38 | Click the "Fork" button at the top right of this repository to create your own copy. 39 | 40 | <img src="images/fork.png" alt="Fork the repository"> <br> 41 | 42 | ### 2. Clone Your Fork 43 | 44 | Now clone the forked repository to your local machine. Go to your GitHub account, open the forked repository, click on the code button and then click the copy to clipboard icon. 45 | 46 | <img src="images/clone.png" alt="Fork the repository" height="300px"> <br> 47 | 48 | Open a terminal and run the following git command: 49 | 50 | ```bash 51 | git clone 'url you just copied' 52 | ``` 53 | 54 | For example: 55 | 56 | ```bash 57 | git clone https://github.com/jfmartinz/ResourceHub.git 58 | ``` 59 | 60 | > Note: Get the HTTPS not the SSH 61 | 62 | ### 3. Create a branch 63 | 64 | Change to the repository directory on your computer (if you are not already there): 65 | 66 | ```bash 67 | cd ResourceHub 68 | ``` 69 | 70 | Make a meaningful name for your new branch, and then create and switch to it using this command: 71 | 72 | ```bash 73 | git checkout -b new-branch-name 74 | ``` 75 | 76 | > Note: Replace your 'new-branch-name' with the actual branch name. 77 | 78 | ### 4. Make Your Changes 79 | 80 | Navigate to the relevant category where you want to add your resource. Once you've identified the appropriate category and have your resource in mind, proceed to make the necessary changes within that specific category. 81 | 82 | #### Stage Your Changes: 83 | 84 | After making your changes, you need to stage the changes for commit using the `git add` command. To stage all changes, use: 85 | 86 | ```bash 87 | git add . 88 | ``` 89 | 90 | #### Commit Your Changes: 91 | 92 | Commit your staged changes with a descriptive commit message that explains the purpose of your changes. Use the `git commit` command: 93 | 94 | ```bash 95 | git commit -m "Your descriptive commit message here" 96 | ``` 97 | 98 | > Note: Replace "Your descriptive commit message here" with a concise and informative message. 99 | 100 | #### Push Your Changes: 101 | 102 | ```bash 103 | git push origin your-branch-name 104 | ``` 105 | 106 | > Note: Replace 'your-branch-name' with the name of your branch. 107 | 108 | ### 5. Submit your changes for review 109 | 110 | If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button. 111 | ![Compare & pull request](images/image.png)<br> 112 | 113 | ![Open a Pull Request](images/pr.png)<br> 114 | 115 | Now submit the pull request. 116 | 117 | --- 118 | 119 | Congratulations 🎉 on successfully submitting your pull request (PR) to our project! We want to express our gratitude for your valuable contribution. Your effort not only benefits our project but also help the entire community! ❤️ 120 | 121 | Please consider sharing this repository with other developers to help increase its visibility and reach. 👍 122 | 123 | 124 | 125 | 126 | ### Our ontributors 🤝 127 | 128 | <a href="https://github.com/jfmartinz/ResourceHub/graphs/contributors"> 129 | <img src="https://contrib.rocks/image?repo=jfmartinz/ResourceHub" /> 130 | </a> 131 | 132 | 133 | 134 | 135 | ## License 🛡️ 136 | 137 | ResourceHub is licensed under the MIT License - see the [LICENSE](https://github.com/jfmartinz/ResourceHub/blob/main/LICENSE) file for details. 138 | <br> 139 | 140 | ###### Show some ❤️ by giving this repository a ⭐️ 141 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [@jfmartinz](https://twitter.com/jfmartinz). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [Mozilla CoC]: https://github.com/mozilla/diversity 131 | [FAQ]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /UI-UX Design/README.md: -------------------------------------------------------------------------------- 1 | # UI & UX Design 🎨 2 | 3 | ## Table of Contents 4 | 5 | - [Overview](#overview)<br> 6 | - [Tutorials or Courses](#tutorials-or-courses)<br> 7 | - [Tools](#tools)<br> 8 | - [Books](#books)<br> 9 | - [Communities](#communities)<br> 10 | - [Youtube Channels](#youtube-channels) 11 | 12 | ### Overview 13 | 14 | This category is a curated collection of valuable UI (User Interface) and UX (User Experience) design resources contributed by amazing contributors. Here, you will find a wide range of materials and information about UI & UX design. 15 | 16 | ### Tutorials or Courses 17 | 18 | <table width="100%"> 19 | <tr> 20 | <th>Resource Name</th> 21 | <th>Description</th> 22 | </tr> 23 | <tr> 24 | <td> <a href="https://www.youtube.com/watch?v=B-ytMSuwbf8">Web Design for Beginners | FREE COURSE</a></td> 25 | <td>this course on web design for beginners will teach you everything you need to know about web design. 5hours duration</td> 26 | </tr> 27 | <tr> 28 | <td> <a href="https://www.coursera.org/professional-certificates/google-ux-design">Google UX Design Professional Certificate</a></td> 29 | <td>This course is a six-month online program that teaches you the skills you need to become a UX designer.</td> 30 | </tr> 31 | <tr> 32 | <td><a href="https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI"> Web Design 101: Free Full Course</a></td> 33 | <td>In Flux we've decided to teach Web Design for free to those who are using quarantine to make a change in their lives, to those who can't afford a web design course right now or to those that simply want to learn a new skill. 34 | </td> 35 | </tr> 36 | </table> 37 | 38 | ### Tools 39 | 40 | <table width="100%"> 41 | <tr> 42 | <th>Resource Name</th> 43 | <th>Description</th> 44 | </tr> 45 | <tr> 46 | <td> <a href="https://www.figma.com/">Figma </a></td> 47 | <td>This is a web design tool where we can modify texts, shapes, colors, and images and add functionalities such as hovering, scrolling, or animation to their interface assets.</td> 48 | </tr> 49 | <tr> 50 | <td> <a href="https://www.sketch.com/">Sketch</a></td> 51 | <td>Sketch is the all-in-one platform for digital design — with collaborative design tools, prototyping and developer handoff. </td> 52 | </tr> 53 | <tr> 54 | <td> <a href="https://www.adobe.com/">Adobe XD</a></td> 55 | <td>Adobe XD is a comprehensive design and prototyping tool that allows you to create interactive prototypes, wireframes, and high-fidelity designs. It also integrates well with other Adobe Creative Cloud apps. </td> 56 | </tr> 57 | <tr> 58 | <td> <a href="https://proto.io/">Proto.io</a></td> 59 | <td>Proto.io is a web-based prototyping tool that allows you to create interactive and animated prototypes without any coding knowledge. </td> 60 | </tr> 61 | </table> 62 | 63 | ### Books 64 | 65 | <!-- 66 | a) If the book is free, include a download link. 67 | b) If the book is not free, provide a URL (web link) where it can be purchased or accessed. --> 68 | <table width="100%"> 69 | <tr> 70 | <th>Resource Name</th> 71 | <th>Description</th> 72 | <th>Status</th> 73 | </tr> 74 | <tr> 75 | <td><a href="https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535">100 Things Every Designer Needs to Know about People</a></td> 76 | <td>We design to elicit responses from people. We want them to buy something, read more, or take action of some kind. Designing without understanding what makes people act the way they do is like exploring a new city without a map: results will be haphazard, confusing, and inefficient. This book combines real science and research with practical examples to deliver a guide every designer needs. With it you’ll be able to design more intuitive and engaging work for print, websites, applications, and products that matches the way people think, work, and play.</td> 77 | <td>Paid</td> 78 | </tr> 79 | <tr> 80 | <td><a href="https://atomicdesign.bradfrost.com/">Atomic Design</a></td> 81 | <td>Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team's design and development workflow.</td> 82 | <td>Free</td> 83 | </tr> 84 | <tr> 85 | <td><a href="https://rosenfeldmedia.com/books/design-that-scales/">Design That Scales</a></td> 86 | <td>After years of building the same interface elements, some designers and developers get wise and try to create reusable, common solutions to help everyone stop reinventing the wheel every time. Most fail. In Design That Scales, design systems expert Dan Mall draws on his extensive experience helping some of the world’s most recognizable brands create design practices that are truly sustainable.</td> 87 | <td>Paid</td> 88 | </tr> 89 | <tr> 90 | <td><a href="https://www.oreilly.com/library/view/design-for-how/9781491985441/">Design for How People Think</a></td> 91 | <td>User experience doesn’t happen on a screen; it happens in the mind, and the experience is multidimensional and multisensory. This practical book will help you uncover critical insights about how your customers think so you can create products or services with an exceptional experience.</td> 92 | <td>Paid</td> 93 | </tr> 94 | <tr> 95 | <td><a href="https://sensible.com/dont-make-me-think/">Don't Make Me Think, Revisited</a></td> 96 | <td>Since Don’t Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug’s guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject. Now, Steve returns with fresh perspective to reexamine the principles that made Don’t Make Me Think a classic–with updated examples and a new chapter on mobile usability. And it’s still short, profusely illustrated…and best of all–fun to read.</td> 97 | <td>Paid</td> 98 | </tr> 99 | <tr> 100 | <td><a href="https://www.nirandfar.com/hooked/">Hooked: How to Build Habit-Forming Products</a></td> 101 | <td>Why do some products capture our attention while others flop? What makes us engage with certain things out of sheer habit? Is there an underlying pattern to how technologies hook us? Nir Eyal answers these questions (and many more) with the Hook Model - a four-step process that, when embedded into products, subtly encourages customer behaviour. Hooked is based on Eyal's years of research, consulting, and practical experience. He wrote the book he wished had been available to him as a start-up founder - not abstract theory, but a how-to guide for building better products. Hooked is written for product managers, designers, marketers, start-up founders, and anyone who seeks to understand how products influence our behaviour. Eyal provides readers with practical insights to create user habits that stick; actionable steps for building products people love; and riveting examples from the iPhone to Twitter, Pinterest and the Bible App.</td> 102 | <td>Paid</td> 103 | </tr> 104 | <tr> 105 | <td><a href="https://lawsofux.com/">Laws of UX</a></td> 106 | <td>This practical guide explains how you can apply key principles in psychology to build products and experiences that are more intuitive and human-centered. It provides a close look at familiar apps and experiences to provide clear examples of how UX designers can build experiences that adapt to how users perceive and process digital interfaces.</td> 107 | <td>Free</td> 108 | </tr> 109 | <tr> 110 | <td><a href="https://designsystemfoundations.com/">Laying the Foundations</a></td> 111 | <td>Laying the Foundations is a comprehensive guide to creating, documenting, and maintaining design systems, and how to design websites and products systematically. It's an ideal book for web designers and product designers (of all levels) and especially design teams.</td> 112 | <td>Paid</td> 113 | </tr> 114 | <tr> 115 | <td><a href="https://leanuxbook.com/">Lean UX</a></td> 116 | <td>In the third edition of this award-winning book, authors Jeff Gothelf and Josh Seiden help you focus on the product experience rather than deliverables. You'll learn tactics for integrating user experience design, product discovery, agile methods, and product management. And you'll discover how to drive your design in short, iterative cycles to assess what works best for businesses and users. Lean UX guides you through this change--for the better.</td> 117 | <td>Paid</td> 118 | </tr> 119 | <tr> 120 | <td><a href="https://www.microcopybook.com/">Microcopy: The Complete Guide</a></td> 121 | <td>Microcopy: The Complete Guide is a handbook for UX writers, designers and friends. It will give you the knowledge and tools needed to write smart, effective and helpful microcopy for all kinds of digital products, with practical guides and dozens of screenshots from actual sites, apps and complex systems.</td> 122 | <td>Paid</td> 123 | </tr> 124 | <tr> 125 | <td><a href="https://www.refactoringui.com/">Refactoring UI</a></td> 126 | <td>Make your ideas look awesome, without relying on a designer. Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.</td> 127 | <td>Paid</td> 128 | </tr> 129 | <tr> 130 | <td><a href="https://www.oreilly.com/library/view/strategic-writing-for/9781492049388/">Strategic Writing for UX</a></td> 131 | <td>When you depend on users to perform specific actions—like buying tickets, playing a game, or riding public transit—well-placed words are most effective. But how do you choose the right words? And how do you know if they work? With this practical book, you’ll learn how to write strategically for UX, using tools to build foundational pieces for UI text and UX voice strategy. UX content strategist Torrey Podmajersky provides strategies for converting, engaging, supporting, and re-attracting users. You’ll use frameworks and patterns for content, methods to measure the content’s effectiveness, and processes to create the collaboration necessary for success. You’ll also structure your voice throughout so that the brand is easily recognizable to its audience.</td> 132 | <td>Paid</td> 133 | </tr> 134 | <tr> 135 | <td><a href="https://ia902800.us.archive.org/3/items/thedesignofeverydaythingsbydonnorman/The%20Design%20of%20Everyday%20Things%20by%20Don%20Norman.pdf">The Design of Everyday Things</a></td> 136 | <td>The Design of Everyday Things shows that good, usable design is possible. The rules are simple: make things visible, exploit natural relationships that couple function and control, and make intelligent use of constraints. The goal: guide the user effortlessly to the right action on the right control at the right time.</td> 137 | <td>Free</td> 138 | </tr> 139 | <tr> 140 | <td><a href="https://rosenfeldmedia.com/books/storymapping/">The User's Journey</a></td> 141 | <td>Like a good story, successful design is a series of engaging moments structured over time. The User’s Journey will show you how, when, and why to use narrative structure, technique, and principles to ideate, craft, and test a cohesive vision for an engaging outcome. See how a “story first” approach can transform your product, feature, landing page, flow, campaign, content, or product strategy.</td> 142 | <td>Paid</td> 143 | </tr> 144 | <tr> 145 | <td><a href="https://www.oreilly.com/library/view/ux-strategy-2nd/9781492052425/">UX Strategy</a></td> 146 | <td>User experience (UX) strategy lies at the intersection of UX design and business strategy, but until now, there hasn't been an easy-to-apply framework for executing it. This hands-on guide introduces lightweight product strategy tools and techniques to help you and your team devise innovative digital solutions that people want. Author Jaime Levy shows UX/UI designers, product managers, entrepreneurs, and aspiring strategists simple to advanced methods that can be applied right away. You'll gain valuable perspective through business cases and historical context. This second edition includes new real-world examples, updated techniques, and a chapter on conducting qualitative online user research.</td> 147 | <td>Paid</td> 148 | </tr> 149 | <tr> 150 | <td><a href="https://rosenfeldmedia.com/books/writing-is-designing/">Writing is Designing</a></td> 151 | <td>Without words, apps would be an unusable jumble of shapes and icons, while voice interfaces and chatbots wouldn’t even exist. Words make software human-centered, and require just as much thought as the branding and code. This book will show you how to give your users clarity, test your words, and collaborate with your team. You’ll see that writing is designing.</td> 152 | <td>Paid</td> 153 | </tr> 154 | <tr> 155 | <td> <a href="#"><!-- download link or web link --></a></td> 156 | <td><!-- book description --></td> 157 | <td><!-- free or paid? --></td> 158 | </tr> 159 | </table> 160 | 161 | ### Communities 162 | 163 | <table width="100%"> 164 | <tr> 165 | <th>Resource Name</th> 166 | <th>Description</th> 167 | </tr> 168 | <tr> 169 | <td> <a href="https://designerhangout.co/">Designer Hangout</a></td> 170 | <td>Designer Hangout is a dedicated, invite-only network of UX designers and researchers who discuss trends, give advice, share stories, uncover insights, surface opportunities, and connect in-person. As a UX practitioner, Designer Hangout is your "secret weapon" to progressing your career and accomplishing your life goals. Together, we’re creating the World's most reliable brain trust for UX designers in a fast-paced age.</td> 171 | </tr> 172 | </table> 173 | 174 | ### YouTube Channels 175 | 176 | <table width="100%"> 177 | <tr> 178 | <th>Resource Name</th> 179 | <th>Description</th> 180 | </tr> 181 | <tr> 182 | <td> <a href="https://www.youtube.com/@envatotuts">Envato Tuts+ </a></td> 183 | <td>Learn creative skills with Envato Tuts+! Part of the Envato family. 184 | <p>Subscribe and learn how to design a website, edit in Photoshop, make an app in Figma, create outstanding presentations, record videos, illustrate with Procreate, build amazing motion graphics, and so much more.</p> 185 | </td> 186 | </tr> 187 | <tr> 188 | <td> <a href="https://www.youtube.com/@FluxAcademy">Flux Academy</a></td> 189 | <td>Learn to be a more successful and profitable web designer:master the latest trends, tools, and technologies, and make it easy to get and retain high-value dream clients. 190 | </td> 191 | </tr> 192 | <tr> 193 | <td> <a href="https://www.youtube.com/@rachelhow">Rachel How</a></td> 194 | <td>UI/UX design & income diversification, simplified✨ master the latest trends, tools, and technologies, and make it easy to get and retain high-value dream clients. </td> 195 | </tr> 196 | <tr> 197 | <td> <a href="https://www.youtube.com/@Figma/featured">Figma</a></td> 198 | <td>Official youtube channel of Figma. It is for people to create, share, and test designs for websites, mobile apps, and other digital products and experiences. 199 | </td> 200 | </tr> 201 | <tr> 202 | <td><a href="https://www.youtube.com/@freecodecamp">FreeCodeCamp</a></td> 203 | <td>"FreeCodeCamp's YouTube channel is a treasure trove for UI and UX enthusiasts! 🎨💡 From design principles to hands-on tutorials, it's a valuable resource for honing your skills and staying updated in the ever-evolving world of user interface and experience design. 🚀✨</td> 204 | </tr> 205 | </table> 206 | -------------------------------------------------------------------------------- /Web Development/README.md: -------------------------------------------------------------------------------- 1 | # Web Development 🌐 2 | 3 | ## Table of Contents 4 | 5 | - [Overview](#overview)<br> 6 | - [Tutorials or Courses](#tutorials-or-courses)<br> 7 | - [Tools](#tools)<br> 8 | - [Challenges](#challenges)<br> 9 | - [Books](#books)<br> 10 | - [Communities](#communities)<br> 11 | - [Youtube Channels](#youtube-channels)<br> 12 | - [Games](#games)<br> 13 | 14 | ### Overview 15 | 16 | This category is a curated collection of valuable web development resources contributed by amazing contributors. Here, you will find a wide range of materials and information about web development. 17 | 18 | ### Tutorials or Courses 19 | 20 | <table width="100%"> 21 | <tr> 22 | <th>Resource Name</th> 23 | <th>Description</th> 24 | </tr> 25 | <tr> 26 | <tr> 27 | <td> <a href="https://www.youtube.com/watch?v=UB1O30fR-EE&pp=ygURaHRtbCBjcmFzaCBjb3Vyc2U%3D">HTML Crash Course for Absolute Beginners</a></td> 28 | <td>Fast-track HTML basics for beginners with Traversy Media's accessible tutorial</td> 29 | </tr> 30 | <td> <a href="https://www.youtube.com/watch?v=EiNiSFIPIQE">Learn CSS Grid - A 13 Minute Deep Dive</a></td> 31 | <td>A short yet a concise and helpful video about learning CSS grid in just 13 minutes</td> 32 | </tr> 33 | <tr> 34 | <td> <a href="https://www.youtube.com/watch?v=phWxA89Dy94">Learn Flexbox CSS in 8 minutes</a></td> 35 | <td>A short video about Flexbox in just 8 minutes</td> 36 | </tr> 37 | <tr> 38 | <td> <a href="https://youtu.be/g7T23Xzys-A">Master JavaScript in One Video!</a></td> 39 | <td>Comprehensive 2-hour JavaScript crash course by JavaScript Mastery.</td> 40 | </tr> 41 | <tr> 42 | <td> <a href="https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP">Namaste ( Hello ) Javascript!</a> </td> 43 | <td>A playlist for learning Javascript from basic to advance by Akshay Saini</td> 44 | </tr> 45 | <tr> 46 | <td> <a href="https://www.youtube.com/watch?v=eCU7FfMl5WU&list=PLRAV69dS1uWQos1M1xP6LWN6C-lZvpkmq">Complete React course for beginner</a> 47 | </td> 48 | <td>A playlist for learning React from basic by Hitesh Choudhari</td> 49 | </tr> 50 | <tr> 51 | <td><a href="https://www.youtube.com/watch?v=a_7Z7C_JCyo&pp=ygUcZnJlZWNvZGVjYW1wIHJlYWN0IGpzIGNvdXJzZQ%3D%3D">Make 15 react projects</td> 52 | <td>A One shot video by freecodecamp focusing on coding react based projects</td> 53 | </tr> 54 | <tr> 55 | <td><a href="https://www.youtube.com/watch?v=Ul3y1LXxzdU&pp=ygUcZnJlZWNvZGVjYW1wIHJlYWN0IGpzIGNvdXJzZQ%3D%3D">Learn About React router v6 in 45mins</td> 56 | <td>A 45min for learning routing in react via react-router@6</td> 57 | </tr> 58 | <tr> 59 | <td><a href="https://www.youtube.com/watch?v=qwfE7fSVaZM&t=5107s&pp=ygUcZnJlZWNvZGVjYW1wIHJlYWN0IGpzIGNvdXJzZQ%3D%3D">Learn and make 4 node.js & express projects </td> 60 | <td>A one shot video focusing on making 4 node.js and express projects , great for beginners ! </td> 61 | </tr> 62 | <tr> 63 | <td><a href="https://www.wa4e.com/">Web Applications for Everybody</a></td> 64 | <td>A free online course that teaches how to build a database-backed website using PHP, MySQL, JQuery, and Handlebars</td> 65 | </tr> 66 | <tr> 67 | <td><a href="https://youtube.com/playlist?list=PLr3d3QYzkw2xabQRUpcZ_IBk9W50M9pe-&si=H0kjBWTLzHOSrTEd">Learn PHP The Right Way </td> 68 | <td> In this course, you will learn PHP from beginners level all the way to advanced. The "right way" is subjective of course. Many important topic like security, caching, performance, configuration, routing, dependency management, dependency injection & testing are not omitted even when the course is for beginners.</td> 69 | </tr> 70 | <tr> 71 | <td><a href="https://laracasts.com/path">Full Stack Developer on Laravel and Vue Js </td> 72 | <td> This is the path of becoming full stack developer on Laravel and Vuejs</td> 73 | </tr> 74 | <tr> 75 | <td><a href="https://youtube.com/playlist?list=PL4-IK0AVhVjP27yZLwW-gkPggRps0CCnP&si=NRNmXP9MXHrzjUS4">HTML and CSS Core Concepts by Kevin Powell</td> 76 | <td> This playlist teaches us to learn the core concepts of HTML and CSS that are fundamental for every web developer.</td> 77 | </tr> 78 | <tr> 79 | <td> <a href="https://www.sololearn.com/">Sololearn</a></td> 80 | <td>MCQ and complete code question to improve coding skills!</td> 81 | </tr> 82 | <tr> 83 | <td> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a></td> 84 | <td>This guide by CSS-Tricks provides a comprehensive and easy-to-understand explanation of Flexbox, a powerful layout tool in CSS.</td> 85 | </tr> 86 | </table> 87 | 88 | ### Tools 89 | 90 | <table width="100%"> 91 | <tr> 92 | <th>Resource Name</th> 93 | <th>Description</th> 94 | </tr> 95 | <tr> 96 | <td> <a href="https://animista.net/play/basic/slide-bck">Animista</a></td> 97 | <td>Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations.</td> 98 | </tr> 99 | <tr> 100 | <td> <a href="https://www.cssportal.com/css-flexbox-generator/">CSS Portal</a></td> 101 | <td>CSS Portal is home to many examples of CSS / HTML and how it can be used in website design.</td> 102 | </tr> 103 | <tr> 104 | <td> <a href="https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi">Pesticide for Chrome</a></td> 105 | <td>This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.</td> 106 | </tr> 107 | <tr> 108 | <td> <a href="https://overapi.com/">Over API</a></td> 109 | <td>overapi. com is a site collecting all the cheatsheets,all! Computers Electronics and Technology-> Programming and Developer Software.</td> 110 | </tr> 111 | <tr> 112 | <td><a href="https://codepen.io/">Code Pen</a></td> 113 | <td>CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.</td> 114 | </tr> 115 | <tr> 116 | <td> <a href="https://9elements.github.io/fancy-border-radius/">Fancy Border Radius Generator</a></td> 117 | <td>A visual generator to build organic looking shapes with the help of CSS3 border-radius property.</td> 118 | </tr> 119 | <tr> 120 | <td> <a href="https://markodenic.com/tools/glassmorphism-css-generator/">Glassmorphism CSS Generator</a></td> 121 | <td>Glassmorphism CSS Generator</td> 122 | </tr> 123 | <tr> 124 | <td> <a href="https://neumorphism.io/#e0e0e0">Neumorphism.io</a></td> 125 | <td>CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its possibilities.</td> 126 | </tr> 127 | <tr> 128 | <td> <a href="https://palettemaker.com/">Palettemaker</a></td> 129 | <td>Create unique color schemes with AI and see them come to life on real design examples.</td> 130 | </tr> 131 | <tr> 132 | <td> <a href="https://www.svgviewer.dev/">SVG Viewer</a></td> 133 | <td>SVG Viewer allows you to view and inspect SVG files in a user-friendly interface, making SVG debugging and optimization easier.</td> 134 | </tr> 135 | <tr> 136 | <td> <a href="https://cssgradient.io/">CSS Gradient</a></td> 137 | <td>CSS Gradient is a tool that helps you create beautiful CSS gradients for your web projects with a simple and intuitive interface.</td> 138 | </tr> 139 | <!-- New resources --> 140 | <tr> 141 | <td> <a href="https://www.heropatterns.com/">Hero Patterns</a></td> 142 | <td>Hero Patterns is a collection of repeatable SVG background patterns for you to use in your web projects.</td> 143 | </tr> 144 | <tr> 145 | <td> <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a></td> 146 | <td>SVG Backgrounds offers a vast library of customizable SVG backgrounds for your web designs, providing a modern and visually appealing touch.</td> 147 | </tr> 148 | </table> 149 | 150 | 151 | ### Books 152 | 153 | <!-- 154 | a) If the book is free, include a download link. 155 | b) If the book is not free, provide a URL (web link) where it can be purchased or accessed. --> 156 | <table width="100%"> 157 | <tr> 158 | <th>Resource Name</th> 159 | <th>Description</th> 160 | <th>Status</th> 161 | </tr> 162 | <tr> 163 | <td> <a href="https://wtf.tw/ref/duckett.pdf">HTML and CSS: Design and Build Websites, by Jon Duckett</a></td> 164 | <td>This book by Jon Duckett is incredibly popular. If you are a beginner in designing and recently started learning HTML and CSS then this book is best for you to learn everything from scratch to an expert level. The quality of content in this book is very high, also the presentation of everything is well organized.</td> 165 | <td>Free</td> 166 | </tr> 167 | <tr> 168 | <td> <a href="https://eloquentjavascript.net/Eloquent_JavaScript_small.pdf">Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming, by Marjin Haverbeke</a></td> 169 | <td>Learning only the basic coding literature is not enough if you do not practice writing real-life applications. The 3rd Edition of Eloquent JavaScript, written by Marijn Haverbeke, is a gold mine for anyone working with JavaScript in a modern Web application framework. 170 | Through this book, you get to learn about asynchronous programming, bug fixing, and, of course, error handling.</td> 171 | <td>free</td> 172 | </tr> 173 | <tr> 174 | <td> <a href="#"> <!-- download link or book url--> </a></td> 175 | <td><!-- book description --></td> 176 | <td><!-- free or paid? --></td> 177 | </tr> 178 | 179 | </table> 180 | 181 | ### Communities 182 | 183 | <table width="100%"> 184 | <tr> 185 | <th>Resource Name</th> 186 | <th>Description</th> 187 | </tr> 188 | <tr> 189 | <td> <a href="https://discord.gg/kevin-powell-community-436251713830125568">Kevin Powel - Community</a></td> 190 | <td>A friendly place for developers to meet 191 | other devs, ask questions, get help, and 192 | just have a good time</td> 193 | </tr> 194 | <tr> 195 | <td> <a href="https://discord.gg/GxZK2Fnb">ASAP Frontend</a></td> 196 | <td>Learn to Code and Become a Professional Software Engineer ASAP</td> 197 | </tr> 198 | <tr> 199 | <td> <a href="https://discord.gg/w3schools">W3school</a></td> 200 | <td>On a quest to make learning available 201 | to everyone - everywhere!</td> 202 | </tr> 203 | <tr> 204 | <td> <a href="https://www.reddit.com/r/Frontend/">r/Frontend/</a></td> 205 | <td>/r/frontend is a subreddit for front end web developers who want to move the web forward or want to learn how. If you're looking to find or share the latest and greatest tips, links, thoughts, and discussions on the world of front web development, this is the place to do it.</td> 206 | </tr> 207 | <tr> 208 | <td> <a href="https://www.reddit.com/r/webdev/">r/webdev/</a></td> 209 | <td>A community dedicated to all things web development: both front-end and back-end. For more design-related questions, try /r/web_design.</td> 210 | </tr> 211 | <tr> 212 | <td> <a href="https://hashnode.com/">Hashnode</a></td> 213 | <td>Hashnode is another global programming community where experienced developers answer questions, give suggestions, share their stories, and provide feedback on ongoing projects. Users post micro-blogs about technical issues or real-life development dilemmas, and community members answer and share them — you can follow specific prolific authors or tags on specific programming languages.</td> 214 | </tr> 215 | <tr> 216 | <td> <a href="https://discord.com/invite/kx7pk6J">#FrontEndDevelopers</a></td> 217 | <td>#frontendDevelopers is now a Discord community for creative developers to exchange information, ask and answer questions, share work, and find gigs.</td> 218 | </tr> 219 | <tr> 220 | <td> <a href="https://discord.com/invite/kPbSdNZEer">The Programmer's Hangout</a></td> 221 | <td>The Programmer's Hangout (TPH) is a discord community geared towards programming. The use of the word "geared" here is important because more accurately it's a discord for programmers of all kinds. If you're a green noob with 5 lines of code under your belt, or if you're a veteran with 15 years of industry experience, TPH has a place for you. More than that, there are over 90,000 people here. You can guarantee you won't be the only person with your experience level on the server.</td> 222 | </tr> 223 | <tr> 224 | <td> <a href="https://www.reddit.com/r/Frontend/">r/Frontend</a></td> 225 | <td>/r/frontend is a subreddit for front end web developers who want to move the web forward or want to learn how. If you're looking to find or share the latest and greatest tips, links, thoughts, and discussions on the world of front web development, this is the place to do it.</td> 226 | </tr> 227 | </table> 228 | 229 | ### YouTube Channels 230 | 231 | <table width="100%"> 232 | <tr> 233 | <th>Resource Name</th> 234 | <th>Description</th> 235 | </tr> 236 | <tr> 237 | <td> <a href="https://www.youtube.com/@WebDevSimplified/featured">Web Dev Simplified</a></td> 238 | <td>Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers.</td> 239 | </tr> 240 | <tr> 241 | <td> <a href="https://www.youtube.com/@slayingthedragon/featured">Slaying The Dragon</a></td> 242 | <td>Slaying the dragon is about facing your fears, pursuing meaning and transforming into the web developer you were always destined to be.</td> 243 | </tr> 244 | <tr> 245 | <td> <a href="https://www.youtube.com/@TraversyMedia/featured">Traversy Media</a></td> 246 | <td>Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP.</td> 247 | </tr> 248 | </tr> 249 | <tr> 250 | <td> <a href="https://www.youtube.com/@Fireship/featured">Fireship</a></td> 251 | <td>Fireship is a popular YouTube channel dedicated to providing high-quality, concise tutorials on web development, covering topics like JavaScript, frameworks, and modern development practices. 252 | </td> 253 | </tr> 254 | <tr> 255 | <td> <a href="https://www.youtube.com/@freecodecamp">FreeCodeCamp</a></td> 256 | <td>FreeCodeCamp, which has a YouTube channel, also offers more comprehensive online courses, and students can choose from 300-hour programs in skills like responsive web design, JavaScript algorithms, and data visualization. You can also find several free online courses in Python, an in-demand coding language. 257 | </td> 258 | </tr> 259 | <tr> 260 | <td> <a href="https://www.youtube.com/@codeblockdev">Codeblock</a></td> 261 | <td>"Code Block: Your go-to YouTube channel for mastering web development, with a focus on JavaScript. Unlock your coding potential today!"</td> 262 | </tr> 263 | <tr> 264 | <td> <a href="https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg">Net Ninja</a></td> 265 | <td> The Net Ninja YouTube channel is a great resource for learning web development. It offers a wide range of tutorials on topics such as HTML, CSS, JavaScript, React, and Node.js. 266 | </td> 267 | </tr> 268 | <tr> 269 | <td> <a href="https://www.youtube.com/@programmingwithmosh">Programming with Mosh</a></td> 270 | <td> Programming with Mosh is a popular online learning platform that offers courses on a variety of programming languages and technologies, including Python, JavaScript, React, SQL, and more. 271 | </td> 272 | </tr> 273 | <tr> 274 | <td><a href="https://youtube.com/@DaveGrayTeachesCode?si=Bl2__Brt_ieGvebg">Dave Gray</a></td> 275 | <td>Dave Gray is an online learning platform that offers videos for web development, from basic HTML, CSS and Javascript to complete MERN stack. Truly a one stop solution for aspiring Web Developers</td> 276 | </tr> 277 | <tr> 278 | <td><a href="https://www.youtube.com/@CodeWithHarry">CodeWithHarry</a></td> 279 | <td>CodeWithHarry is an online learning platform that offers courses in Hindi on a variety of programming languages and technologies, including Web Development, Python, Django, JavaScript, SQL, and more. Notes and related PDFs are also provided for all courses on the channel.</td> 280 | </tr> 281 | </table> 282 | 283 | ### Games 284 | 285 | <table width="100%"> 286 | <tr> 287 | <th>Resource Name</th> 288 | <th>Description</th> 289 | </tr> 290 | <tr> 291 | <td> <a href="http://www.flexboxdefense.com/">Flexbox Defense</a></td> 292 | <td>Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!</td> 293 | </tr> 294 | <tr> 295 | <td> <a href="https://flexboxfroggy.com/">Flexbox Froggy</a></td> 296 | <td>Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!</td> 297 | </tr> 298 | <tr> 299 | <td> <a href="https://cssgridgarden.com/">Grid Garden</a></td> 300 | <td>Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property. </td> 301 | </tr> 302 | <tr> 303 | <td> <a href="https://www.codemonkey.com/">Code Monkey</a></td> 304 | <td>CodeMonkey(opens in a new tab) teaches coding using CoffeeScript — a real open-source programming language that compiles to JavaScript — to teach you to build your own games in HTML5. It’s aimed at coding for kids, but it’s definitely fun for adults, too. </td> 305 | </tr> 306 | <tr> 307 | <td> <a href="https://www.codingame.com/start/">CodinGame</a></td> 308 | <td>CodinGame(opens in a new tab) offers up fun free open-source programming games to help coders learn more than 25 programming languages, including JavaScript, Ruby, and PHP. </td> 309 | </tr> 310 | <tr> 311 | <td> <a href="https://robocode.sourceforge.io/">Robocode</a></td> 312 | <td>If you’ve ever watched the show BattleBots, then Robocode(opens in a new tab) is for you. You’ll learn programming skills by building virtual robot battle tanks in Java or .NET. Battles are then played out onscreen in real time. </td> 313 | </tr> 314 | <tr> 315 | <td><a href="https://flukeout.github.io/">CSS Diner</a></td> 316 | <td>The CSS Diner webapp is really fun and genuinely educational for developers of all skill levels. You’ll go through 26 different levels of increasing difficulty. The first few levels teach core fundamentals like element selectors and class selectors. In the later levels you’re working with advanced concepts like :only-of-type and :not(x).</td> 317 | </tr> 318 | <tr> 319 | <td><a href="https://www.codepip.com/">Code Pip</a></td> 320 | <td>Codepip is the platform for your favorite web development games. Gain an edge in your next interview or project.Create a free account to enjoy the features.</td> 321 | </tr> 322 | </table> 323 | 324 | ### Challenges 325 | 326 | <table width="100%"> 327 | <tr> 328 | <th>Resource Name</th> 329 | <th>Description</th> 330 | </tr> 331 | <tr> 332 | <td> <a href="https://cssbattle.dev/">CSS Battle</a></td> 333 | <td>The funnest multiplayer game with 300K+ web designers & developers. Replicate the target images using CSS - the shorter your code, the higher your score! Happy coding!</td> 334 | </tr> 335 | <tr> 336 | <td> <a href="https://www.frontendmentor.io/">Frontend Mentor</a></td> 337 | <td>Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.</td> 338 | </tr> 339 | <tr> 340 | <td> <a href="https://icodethis.com/">iCodeThis</a></td> 341 | <td>Daily projects you can build to improve your coding skills!</td> 342 | </tr> 343 | <tr> 344 | <td> <a href="https://www.codewars.com/">Code Wars</a></td> 345 | <td>Code Wars(opens in a new tab) helps you improve your skills by training in challenges with others. They offer a huge variety of programming languages, including JavaScript, Swift, PHP, Python, Ruby, and Haskell. </td> 346 | </tr> 347 | </table> 348 | --------------------------------------------------------------------------------