Our first library – Bootstrap

FreeCodeCamp section: Responsive Design with Bootstrap
Time estimate: 5h
Actual time: 1h 35m
Waypoints covered: All 31 in Responsive Design with Bootstrap

It seems a little interesting to be jumping right from HTML and CSS to a framework, but that’s what Free Code Camp does.  As soon as your feet are a little damp with tags, classes, and ids, it’s off to Bootstrap and responsive design.

One of the biggest challenges of learning to format HTML using CSS (in my experience) is the incredible volume of styles available.  The few times I’ve delved into this in the past, my enduring concern was, “how will I be able to remember all of these styles?”  And adding in the media queries required for today’s modern responsive web design.

Rather than deal directly with this issue, Free Code Camp side-steps it a bit by focusing on a popular HTML/CSS/JavaScript that provides a simplified method for applying responsive concepts.

Bootstrap works by applying styles and functionality to HTML tags that are assigned certain classes, and Free Code Camp simply begins by telling us to wrap all of our HTML in a <div> tag that is assigned the class “container-fluid”.

Unfortunately, there isn’t a whole lot of explanation of what is going on here.  Sure, there’s a paragraph or two that describe the high-level goal of responsive design, but there isn’t really a lot of deep learning going on here.  This is my biggest concern with these online curriculums, and it has driven me away in the past, focusing instead on deeper resources like books.  Sure, we’ll learn stuff by typing and watching, but it feels like it could be better.

Over the course of this section we are introduced to a fairly large number of classes that provide a wide variety of functionality:

  • container-fluid
  • img-responsive
  • text-center
  • btn
  • btn-block
  • btn-primary
  • btn-info
  • btn-danger
  • col-md-#, col-xs-#
  • row
  • text-primary
  • well

It almost starts to feel like the CSS style overload I mentioned earlier, but in reality, the Waypoints are able to cover a huge amount of ground while ignoring the nitty-gritty details underneath.  It does allow folks who are new to the game a chance to build stuff more quickly, and that can be critical in these early stages (we’re only supposed to be 10 hours into this 2080-hour curriculum at the end of this section) when it is so easy to just give up.

Similarly, the introduction of the Font Awesome icon library allows students to add some polish to their pages without having to figure out the details.  This is actually a critical skill – finding libraries that solve a problem and integrating it into your site – and introducing this early is also a nice touch.  Fortunately, the difficult side effects of this sort of thing – having to debug the underlying code of a library that isn’t behaving – is saved for another day.

So far, I’ve been able to complete the first 10 hours of FreeCodeCamp in less than 4 hours.  I don’t know how sustainable that ratio is, and it’s much more important that I’m learning as I do this, but it sure would be nice to be able to learn all this stuff in less than a year.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s