Last year, I created the repository awesome-resources which aimed to combine helpful resources about many topics in one place. All these resources are added by fellow contributors who have personally found these resources helpful for them.

Some of these resources can be necessary basic knowledge including the documentation of a framework or courses for a programming language.

On the other hand, some resources are not ones that everyone is familiar with. I personally didn't know about a lot of them and found them cool when reviewing pull requests.

Although this repository has resources related to almost every topic related to technology in particular, in this article I'll focus on resources related to web development that I personally found to be helpful, cool, or unique.


Style Stage from Modern CSS Solutions

At first, I was confused about what this website was for, but when I went through it I loved the idea. Basically, this website shows you the exact same page in different stylesheets created by contributors. You can go view the list of styles and pick one of them. You'll see unique different ways of designing the same page, and you can view the stylesheet to learn how it was done.

Grid and Flex Cheat Sheets by Chris Malven

We've seen many cheat sheets before, so there's nothing unique about a cheat sheet. However, this one I really liked because it had a simple visual explanation, and it's simple and to the point. I think most cheat sheets end up being too condensed as they try to put too much information in one place. This one is very easy to read and find what you need.

Glassmorphism CSS Generator

This CSS Generator helps you create elements with a glass effect. You can select the type of background you want to use for the element, for example, an image. Then, you can specify details related to the color, opacity, and more.

Once you like the design, you can copy the CSS and HTML and use them on your website.



CoderlangJS is another JavaScript course to learn JavaScript as a beginner. However, it does so in the form of a game with a storyline. It helps make the learning fun, especially for beginners.

It also doesn't just focus on the basics, it also focuses on more advanced topics like developing the backend with Node.js, deploying it with Docker, and more.

JavaScript 30

JavaScript 30 helps you learn Vanilla JavaScript by building components and projects without any libraries, frameworks, or any tool that might help you build it. Basically, you have to build everything from scratch. If you're looking to practice JavaScript and become advanced in it, this is a great way to start.

Favorite JavaScript Utilities in Single Line of Code - 1LOC

This resource gives you utility functions in both JavaScript and TypeScript in one line. It includes utilities for Arrays, Date Time, DOM, and more. You are very likely to use these utilities in your project, so it's a nice resource to have bookmarked for when you need them.


JS.ORG provides repositories that are clearly related to JavaScript with a subdomain. For example, As there has been a lot of demand for subdomains, now JS.ORG is making sure to limit the subdomains they provide to those of clear relation to JavaScript.

So, if your repository is related to JavaScript, you can follow the steps on their website to get a free subdomain for your project.

React.js Cheat Sheet by

This cheat sheet is specifically for React created by It's a simple and to-the-point cheat sheet that is easily readable. It has information on components, lifecycle, hooks, and more.


Web Accessibility Evaluation Tools List

This resource by W3C gives you tools that allow you to check your pages and make sure they properly provide accessibility for all people regardless of their disabilities. You can find tools like and Color Contrast Accessibility Validator.

404 Illustrations

This project provides you with free 404 illustrations you can use on your websites to make the 404 page more creative. The illustrations are available in PNG and SVG. You can also see an example of how to use these illustrations for inspiration.


This section includes resources that I found helpful but are not necessarily related to Web Development in particular.

List of Badges, in Markdown

This website and GitHub repository give you badges you can use in Markdown files. This is especially helpful for repository maintainers. You can find badges related to the status of the project, the version it supports, data related to the maintainer or contributors, and more.

GIT PURR! Git Commands Explained with Cats!

I might be biased since I'm a cat lover, but when I saw this one I loved it. Not only is it an easy way for beginners to grasp Git commands with these drawings and doodles, but they're also super cute.

Machine Learning Roadmap 2020

The reason I like this roadmap is that it's interactive with notes on how to get started with each roadmap item. I think we're always used to roadmaps related to how to start learning something with images. I personally find interactive resources are a better way to understand and learn something.


Through creating the awsome-resources repository, I was able to learn about many resources that I personally didn't know existed. I think this is also one of the benefits of giving back to the community and contributing to open source projects.

This list is just a small list of the resources found in the repository. I encourage you to check it out and see other resources added by contributors that might be useful to you or others you might know.