CSSverse — A PlayLearn

…& it felt sick. Too much to keep up with it. Been trying for a long time, I had complete feelings of Let it Go. Kickin’ my heart around in a pool of sadness, I stormed towards the window near me and it played -

I tried so hard … And got so far,

But in the end … It doesn’t even matter

More like salt in the wounds. Easy CSS is a myth. Cause the learning graph for it is never in shape. For a moment, you think you know & the very next moment tells a whole different story.

A smile of Pain XD

Not being able to grasp the concept can be a cause of different reasons. Some give up earlier, some are unable to see the results ( imposter plays a role here ), few such others, or some lack to have their hands on good resources. Just like me. Tbh, I never preferred a tutorial or something related to CSS before coming to this dead phase. Yeah, I mostly copied the styles from W3School ( Had to mention ), not a born genius ( XD ). But now,

More of me thinks that we all need to learn CSS than just relying on a sassy framework. Having the power itself gives a plethora of things to do than using the weapon made out of it alone ( that being said, definitely doesn’t mean that frameworks are bad to use ). & so is the point of this article— learning the challenging parts of CSS, ex., Flexy Flexbox, greedy grids, stormy selectors, or out-of-the-blue layouts, etc. to craft unique things solely.

Tell me something special — You might say.

Okay, the no-special special is —below resources are not-so-typical tutorials but interactive games/guides to help you learn CSS complexes. Yes, GAMES. Without wasting few more minutes, let's hop into this-

1. CSS Diner

We have booked a table for two — CSS and You for a fancy dinner. You will feast on Selectors. As you can read in the description — Selectors are how…

CSS Diner

An interactive game with a concept of dining ( more of plates ) to help you teach how to style particular elements in CSS. It covers from basic element selection to nth of type selectors. Have nice dining.

2. Grid Garden

After yesterday's good dining, you are now subjected to gardening. You are thinking about the layout for a while but…

{ 
  display: grid;
  ???
}

… you simply have no idea “what's next?”. Grid Garden comes to your rescue here. You will be learning all the different properties of the grid to grow carrots on your farm by writing down the CSS. Carrots … CSS, sounds cool, yeah?

Grid Garden

You might want to cook something with that ( Carrot Halwa? ).

3. Unfold

Having not so good time with transforms? Unfold is basically a guide than a play for understanding CSS transforms. Just keep hitting the ‹ and › keys & slide by slide, you will see a visual presentation on transforms. From translate to perspective and other.

Unfolding the Box Model

but moving on next,

Olaf: Did you know, what bootstrap uses for its grid system?

Olaf: Flexbox it is! hehe hehe

4. Flexbox Froggy

It’s the most vital part of learning CSS. A layout module aimed to provide a better way to distribute or align items in a container.

Flexbox Froggy

Help froggy and friends to reach the lilypad with CSS. This game is the best resource for learning flexbox. Go, help both of yourselves( Froggy & You ).

Last but not least, not a game though -

5. CSS Battle

A battleground, where you will be given a target to replicate using your CSS skills. By doing this, you will be able to test your knowledge. Alongside, you can refer to other's solutions and see how they have come to the same problem with different approaches. That will welcome different ways of doing the same thing.

CSSBattle

The journey of CSS is mystifyingly creative. When understood the colors & shadows properly, it can yield a butterfly out of a caterpillar. With the resources mentioned above, you can surely move on to the next stage. Of course, that’s not the end of CSS, but,

That’s for it for this article. Would have loved to mention animations that are the backbones of the website. But that is a whole topic in itself with tons of resources. Writing here about that would be too little for it. Maybe someday else?

Maybe the next article? CSS — AnimaCraft ( trying to resemble it with witchCraft )

If you are still here, ( that you barely will be ) — You can connect with me over here,

TidbitsJS - Overview

( End Etiquette )

The next song that played, was,

When you feel it’s hopeless
When you think that you lost, oh
I will take your hand and
We’ll rise up from the dust, oh