Hello World. Let's learn about some more websites useful to web developers.

CSS Games

CSS is Cascading Style Sheets. It is the language used to describe the design of a webpage. These few websites help developers pick up tricks on CSS, CSS Flexbox and CSS Grids.

CSS Diner

CSS Diner is a beautiful website designed to help developers pick up on the different types of selectors in CSS. Each level describes a selector and provides an exercise to select an item using the correct CSS selector. By following this a developer can grasp the concept of using both selectors and combinators in CSS.

Grid Garden

CSS Grid Garden is a game built to understand CSS Grids. CSS Grids is, as the name suggests, a grid layout for placing content on a web page. The website allows you to play around with a few of the properties of CSS grids and understand the row and column structure.

Flexbox Froggy

Flexbox Froggy is a game built by the same people who built the Grid Garden. It's a great game to learn the basics for CSS Flexbox. It helps understand the different ways the one directional layout can be used to place content on a web page by using the game of a frog trying to reach its lilypad.

Flexbox Defense

Flexbox Defence is a game wherein towers need to destroy oncoming targets but these towers aren't well placed. The game lets a person learn how to use CSS Flexbox to place these towers in their correct positions to win the round.

CSSBattle

CSSBattle lets you create images using just HTML and CSS without the use of assets or JavaScript of any kind. The person has to create the image in the least amount of code. The editor renders code written and the user has to try and match their image with the given image.

Resources

Clip Path Maker

Clippy: Clip Path Maker is a simple website where devs can easily create shapes and obtain the corresponding clip path to apply using CSS. The web app allows users to pick from built in polygons and adjust the design as per their requirement or build a custom polygon that they like.

Unfolding the Box Model: Exploring CSS 3D Transforms

The website has a good solid demonstration and explanation of CSS 3D transforms and has animations which explain different properties and their possible effect on the web design. It animates the design on the page based on the property highlighted and interacting with the website is as simple as using the arrow keys of your keyboard.

W3Schools

W3Schools has a large set of tutorials regarding web development with examples covering a majority of the different properties and possibilities. It has an inbuilt editor that helps run their sample codes and check for the output right as the changes are made and to view dynamically how the content is affected based on the code written.

Chrome Dev Tools

Chrome dev tools, documents each aspect of their development tools which are available in the browser. These documentations provide an extensive resource on how to use these dev tools to solve errors, debug code and ensure that the website being developed works well. Chrome Dev Tools includes tools like

1. Inspecting Elements
2. JavaScript Console
3. Network Requests
4. Lighthouse and more, all available in the documentation

YouTube

These are some channels on YouTube that discuss web related technologies that are worth taking a look at

1. The Net Ninja - Covers a large variety of topics ranging from basics to frameworks. Definitely, helpful when learning new concepts.

2. Fireship - Coding tutorials that focus on firebase and javascript and help users understand how to build applications using the two.

3. Programming with Erik - Web development tutorials related to emberjs and vuejs. The vuejs tutorials help understand the actual working concepts of the framework and help a beginner grasp an understanding of it.

4. DesignCourse - Designer and developer videos related to UI/UX design and possible experiments with different available frameworks and tutorials on designing components.

5. Kevin Powell - Video tutorials that help learn the tips and tricks of web development and help grasp concepts in learning basic elements and how to use them.

6. Traversy Media - A big platform for tutorials and courses related to web technologies of different frameworks including HTML, CSS, JavaScript, Angular and more.

Conclusion

There are so many resources to learn web development today and anyone can access them and use them to learn! Always pick what you are comfortable with, be it blogs, tutorials or videos. Just remember that learning comes with hands on practice. Use the resources listed and get coding!