Scribd
Upload
424 views1 page

Master CSS Grid with Daily Practice

1) The document provides a guide to mastering CSS Grid layout by breaking it down into smaller digestible parts and building many small practice projects instead of large complex ones. 2) It recommends dedicating 20 hours of practice over 27 days through daily 45 minute sessions to cement your knowledge of CSS Grid fundamentals. 3) Examples of small practice layouts are provided to get started, with guidance to use CSS Grid and Flexbox together when applicable. The goal is to gain experience and confidence through consistent small wins rather than attempting an overly ambitious initial project.

Uploaded by

Andrei Camen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
424 views1 page

Master CSS Grid with Daily Practice

1) The document provides a guide to mastering CSS Grid layout by breaking it down into smaller digestible parts and building many small practice projects instead of large complex ones. 2) It recommends dedicating 20 hours of practice over 27 days through daily 45 minute sessions to cement your knowledge of CSS Grid fundamentals. 3) Examples of small practice layouts are provided to get started, with guidance to use CSS Grid and Flexbox together when applicable. The goal is to gain experience and confidence through consistent small wins rather than attempting an overly ambitious initial project.

Uploaded by

Andrei Camen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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/2mRDPhJ http://bit.ly/2nhwta3

read ‘em

http://bit.ly/2rlOTsh

’’
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

You might also like