Hello. It's been a few months since I started my journey as a web developer. However, there are some webpages that have made my life easier.

Today I want to share some of the webpages that have helped me through my journey as web developer. I hope you find them useful just like I do.

Flexbox Froggy

This is an interactive web page designed to help you understand how "flexbox" in CSS works.

There are 24 different levels in which you have to help some froggies to get their lilypads. Depending on the code you write, the froggies will rearrange on the screen. If you do it right, every froggy will get to the right place. If not, you'll have to keep trying different values until you get it right.

This website has several languages to play and learn with and you can also change the difficulty if you think you are ready enough.

Grid Garden

Similar to Flexbox Froggy, grid garden allows you to learn the grid property used in CSS.

There are 28 different levels in which you have to grow your carrot garden. Depending on the code you write, the "water" will be displayed in a different place. If you do it right, you will be able to water your carrots.

It also has different languages. However, I could not find an option to change the difficulty, though that option might unlock once you clear all levels.

CSS Reference

They describe themselves as a free visual guide to CSS. And they are.

On the main page you can find different CSS properties and where you can apply them. For example, the property "align-content" can only be used if you are working on a box with "flexboxDisplay

But if you go to the collections section, you'll find a really useful guide for animations, typography, etc.

HTML reference

Similar to CSS reference, this site will help you understand how the different HTML elements work.

On the main page, you can find the different HTML elements, their default display mode and the type of element they are.

If you go to the collections section, you can find easy examples of how to implement each HTML tag.

HTML Color codes

This is a website where you can easily pick a color you like and get the HEX code for that color.

Besides, when coding, you might have noticed that you can use some name for colors instead of an Hex code. For example: blue, yellow, pink, papayawhip, plum, etc.

In this site you can find the name for each color defined in HTML/CSS that you can use instead of writing the Hex code.

It's just amazing and really helpful when you need to use preset colors.