Hello World

Hello and welcome to the only place where you can learn CSS without reading boring tutorials and watching never-ending videos. According to researchers, practice testing is one of the most effective study techniques and that is what you will do here!

How does it work?

Each time you will get a challenge (a static or animated image) and you need to write the CSS necessary to obtain the same visual outcome. The closer you are, the better you are! The challenges are classified into 5 categories:

• Easy (Still new to CSS? Don’t worry, you can do it)
• Medium (It starts getting a bit tricky here)
• Hard (You could spend a whole day finding the trick)
• Expert (Some advanced CSS will be needed)
• Insane (Don’t even try…)

Within the right sidebar of each challenge you will find the rules and other information. As you will notice, only CSS is allowed here!

Submit your Solution

After each try you will get prompted to submit your solution. Once submitted, your solution will be “on hold” until it gets reviewed. Once accepted, it can get one of the following label:

• First Solution: Be the first to solve the challenge.
• Pixel Perfect: Your solution needs to match the result pixel by pixel.
• Best Solution: Give a Pixel Perfect solution with the least amount of code. Only one solution per challenge can earn this label!

It’s worth noting that if your solution doesn’t solve the challenge or if it is a simple copy/paste of another one, it will get rejected.

Let’s try!

Below you will find the textarea where you will write your code. After that, you simply have to click the button to see your result and compare. The left square is your output and the right one is the intended result.

Add the following code and try : .box:before { content:"Hello World"; }