Motivation

There aren’t any online courses that provides a straightforward path for learning bootstrap grid. This is my attempt at putting the web’s resources in a roadmap like order, which I would feel confident using and recommending to others.

Roadmap

Beginner

  1. [5 mins] In plain CSS terms, display property is where it all starts, dispaly:flex and display:grid are two mutually exclusive approaches to layouts.
    • Take a minute to think about that and google around if you need to adsorb this simple statement.
  2. [15 mins] The CSS Box Model, Display, and Box-Sizing
    • Re-familiarize yourself or go over it for the first time.
  3. [2 hours] Introduction to the CSS Flexbox Challenges
    • If you take a small amount of time to know what flex is now, then you won’t suffer later when there can be massive grief by mixing the properties from the two due to ignorance.
    • You’ll also be able to spot other people’s mistakes more easily.
  4. [10 mins] Since, fr is the fundamental unit of a grid system. You should know how it works: read this.
    • We haven’t jumped into bootstrap yet. This is plain CSS we are looking at.
  5. [2 hours] Free Code Camp’s Introduction to the CSS Grid Challenges
    • We haven’t jumped into bootstrap yet. This is plain CSS we are looking at.
  6. [2 hours] Free Code Camp’s Intro to Bootstrap
    • Get acclimated with some bootstrap terminology, anyone can follow this.
    • It won’t prepare you for fluency in bootstrap or its grid system but it will make prevent everything from looking like greek (a foreign language) to you.
    • Its really the best ice breaker. Just hold your nose and dive in. Its very little time investment and if you follow my roadmap, it pays off. The dots do connect, they did for me!
  7. [1 hour] Understanding Bootstrap Grids and Columns
    • Finally ready for Bootstrap Grid!
    • I cannot stress how quickly this FREE course helped me get over some of the simplest yet confusing questions that nobody was available to answer for me!
    • Follow along with the course, like I did via bootply.com
      • If you’re running out of background colors to experiment with, look here.

Intermediate

  • To be determined…

Advanced

  • To be determined…

Written with StackEdit.