CSS tutorial, but it has to rhyme

[aqua-bery]

Every time you do something like this i am left hyperplexed

[caseycodes]

whatever appwrite paid you, it wasn't enough.

[nikolabosevski]

One of the rare times i watched though the ad. At first i didnt even realise it was an ad, thats how good it was done

[ukriu]

Here are the lyrics:

[Intro]
Whenever I see an effect and feel that I know it's creator is quite the real deal,
I'll first try to see if I too can attain it,
and then make a video to try to explain it.
With one single goal,
to take a complex thing and break it into pieces that aren't so perplexing.
We just need a starting point, it doesn't matter where; an icon, a color, or in this case a square.

[Start]
The first thing it needs are a size and a border.
The R, G and B would come next in the order,
And I suppose we should cover how it looks when we hover.
Here there's a few different things to discover,
you've probably guessed that there's a transition from hidden to a more visible condition.
To that I would offer one single correction,
that we forgot to consider the mouse's direction.
While on the way out it's slow and consistent,
on the way in, the change should be *instant.*

With this singular tile we've laid the foundation;
Paving the way for some more explanation.

[Sponser Segment]
But first I'll extend you a swift invitation,
And believe me, I have some good information.
If you need a quick way to build applications from a database layer to authentication,
I'd recommend `appwrite` with no hesitation.
Their service is quite an impressive creation,
What's that you hail from the `Firebase` Nation?
No worries, their wizards and easy migration.
From here I'll extend you my recommendation,
to give them a try with a quick registration.

[Start again]
We've made it this far that much is clear,
but somehow we still need to make our way here.
Say that we wanted our grid ten by ten,
we could copy our tile again and again.
But I think I want the lazy solution,
a function could do it with one execution.
A line of code each for the tile and container,
and the `for` loop here will complete the remainder.
A few steps inside is all that we'll do,
cloning is one and appending is two.
Though a singular tile was fine before,
our loop is giving us ninety-nine more.
Right about now you might be discovering,
each of our tiles has the same coloring.

To pick out a few we'll use an inspector,
then vary each one with the nth child selector.
While a repeatable pattern is certainly practical,
I think the randomness could be more maximal.
One thing I learned is that patterns are stackable;
No need to be perfect, just make sure they're passable.
Now why don't we look and see what we've missed?
The icons are probably topping the list.
Font Awesome is usually the place that I go (affiliate link in description below).
When I need a pattern, at least one that's repeatable,
I'd typically say a design tool is unbeatable.
But CSS backgrounds are auto repeated,
so thats not the step that we need completed.

We can change the size here, thats all perfectly fine.
The real issue however is in how they align.
Since there isn't a property to spread them apart,
maybe the icon is a good place to start.
See the image itself will keep its dimension.
It's the icon inside that needs our attention.
Now we just simply take our revision and line it back up in the proper position.
What we are left with is a straightforward objective,
a little rotation and an adjusted perspective.

You could opt to use the original as reference,
it's really just a matter of personal preference.
After we add some more columns and rows, we could layer a gradient on top I suppose.
But I don't really have a rhyme for the close,
ehh I'll just give you a boop on the nose.
*_boop_*

[roganl]

Wouldn't you know it, we've found a code poet.

[anon_y_mousse]

It only makes it more perfect that the runtime is 3:14.

[eyalb]

I love your style of videos, and how you avoid making web dev tedious! I haven't seen such an innovation, since fireship brought us an explanation! I truly appreciate your creation, and hope this money gives you a bit of motivation <3

[Aminsx_]

This is the first time i actually liked hearing an ad

[socalminstrel]

Usually long-form rhyming like this tends to be really bad, as the person makes huge stretches to find a rhyme. You made it sound very natural and the flow was great. To do that in addition to explaining a cool effect is incredibly impressive!

[NeviFr]

I can't even begin to think about how much effort it would've taken to make this video and literally every other video too!

- Good Editing
- Good Explanation
- No filler
- Entertaining
- Isn't complex
- Finally something I can learn from
- Rhymed the entire thing in a calming manner (extra)

Loved it ❤

[zyansheep]

Auto skipped the ad, but then went back to watch it because I realized it would probably be rhymed

[sobanejaz]

I think bro was video editing avengers movie on side hustle

Your rhymes were smooth, and the tutorial's tight,
Teaching CSS in a way that's just right.
From squares to borders and transitions galore,
You made complex things something to explore.

The way you break it down, it's easy to see,
You've got the knack for simplicity.
I'll take these tips and put them to use,
With your rhymes, coding's no longer obtuse!

Thanks for the lesson, it's truly a gem,
I'll be back for more—don't know when, but then!

[DennisIvy]

I'm always blown away when I watch a Hyperplexed video 😲

[personwhoplaysgames]

Dr Seuss been real quiet since this code rhyme dropped

[etrainerz]

Just got served a Scribe ad on Instagram that had such a smooth, sultry voice narrating it that I instantly recognized. It was you! Well done dude.

[bradenborman]

Hyperplexed, a true delight,
His videos are pure dynamite.
Every move sets hearts afire,
His name’s the one, we all admire.

[adityasriram]

Absolutely amazing! More of this please 😊

[MrAdarsh]

You recommended the sponsor with no hesitation, and now it's my time to pay full attention
I don't know what's going with the UI trend, but I am sure I must share this to my friend❤
Seems like you are now a writer and that's how you earned a new subscriber!

[kazuho]

i rarely watch through an ad, but this time i did, and it wasn’t that bad