WELCOME TO HOW TO

and what to build along the way


To master the CSS Grid
and build stuff along the way

100%
wh
at
yo
u
15%
ne The Grid container
ed
to
kn
ow

40%
Placing items
on the grid

15%
Extra grid intricacies

30%
Aligning the grid
and its items

The complete breakdown of what

the CSS Grid entails
By beaking things down like
this, you get to see how
achievable mastery is.



The secret is in small daily wins... small!!!

20hrs
20 hours of deliberate
practice is all you
"really” need


MAKE SURE YOU KNOW THE
FUNDAMENTALS OF THE
CSS GRID LAYOUT.
I WILL SHARE HELPFUL LINKS BELOW

  
A SMALL, DEDICATED TIME
TO PRACTICE DAILY CAN
GO A LONG WAY.
45MINS DAILY FOR 27DAYS
IS APROX. 20HRS


OKAY YOU GOTTA BUILD STUFF.
A GOOD NUMBER OF STUFF TO
CEMENT YOUR KNOWLEDGE

 

Again, the answer is in the small things.

Don’t build an MVP, or any Big Project for that matter

 YEAH, SMALL THINGS.

 
THAT’S WHAT YOU
GOTTA BUILD

Build A Lot Of Throw-away Layouts First.

Okay...
1. You’ll eventually build that grand
layout. Okay?

2. It is more efficient to build small

layouts first. Especially with radically
new ideas like the CSS Grid


 
 ­
(€‚

)ƒ „ …†ƒ „

Don’t build the entire Youtube layout.

Only build the layout above.

The video placholder on the left,

and the list of videos on the right.

 ­
(€‚

)­ ‚†ƒ „

Similar to the first project,

build the little Medium homepage above

‡ ­
ƒ„ˆ­ ‚†ƒ „

The layout above is well suited

to the CSS Grid layout. Have fun!

‰ ­
(€‚

) „Š‹Œ
ƒŽ†ƒ „

How would you go about building this

one? One column, or multiple columns?

See if you can use Flexbox & CSS Grid

on this one.

‘ ­
(€‚

) ŠŽ€†ƒ „

Simple, huh? Try your hands

on this one!

 
Let’s get you a plan :)
Your plan doesn’t have to be for 27 days.
If you have more free time,
you can do 2 days’ work in a day.

1 day equals 45minutes of practice

X X X X X X

X X

  

BE ACCOUNTABLE TO YOURSELF.

Make a calendar, and tick off each day you

devote time to practice.

When you tick off all days,you’d have

achieved your goal.


 
... that won’t bore you

http://bit.ly/master-grid-1 http://bit.ly/master-grid-2

read ‘em

’’
What’s next?
1. Now that you have a plan, actually commit to it, and see it through!

2. Please hit me up on Twitter and let me know

how you’re using this guide. That would make my day :) - @ohansemmanuel

3. Aye! Go kick some CSS Grid butt!

much love,
Ohans Emmanuel