Launch School’s Course 202 — A Traveler’s Guide

Mike del Rio
Aug 3, 2019 · 8 min read
Image for post
Image for post
Photo by Tabea Damm on Unsplash

During the past year and change I’ve been following Launch School’s path to mastery. There have been ups and downs but overall I’ve felt increasing confidence in the fact that a) I’ve been learning fundamentals that are relevant to the field as a whole and b) I’ve been able to retain the material without relying on memorization.

Recently, I finished course 202. I admit that this course was a struggle for me.

At first learning HTML and CSS felt like a welcome break from months of Ruby but by the end I was craving a return to more logic-based problem solving. The following survival guide may be helpful to those new to HTML and CSS to help keep perspective throughout course 202.

Although no concept in isolation is overly complex the volume of new material you’ll be exposed to during this course may feel intimidating. I’m here to help.

Lesson 1, a gentle introduction

I would suggest taking some time with the CSS Diner game that LS recommends. This allows you to get comfortable with CSS selectors. Selectors are the starting point of your CSS file, they allow you to select what part(s) of the HTML file you want to style (the whole page, the whole page’s background, only the titles etc…). Becoming fluent with CSS selectors at this stage will prepare you for some challenging exercises ahead.

I See Boxes…

Image for post
Image for post
Photo by Dhruv Deshmukh on Unsplash

You know you’re in 202 when random squares start to appear in your dreams. LS aptly names one section “Everything is a Box”. Whether you see their borders or not all the various content of a webpage is found within a box. You can adjust the size of these boxes, place them anywhere on your pages and make their content appear and disappear to your liking. These boxes will place themselves on the rendered page according to a layout system. I’ll refer back to these systems a number of times as LS gradually introduces the traditional layout systems before highlighting a couple of more modern ones.

Once you have selected the section of your page that you want to style with a selector, CSS properties are assigned values within the selector to change how a part (or the entirety) of your page renders.

Now, back to boxes and layout. If you don’t specify a display property value for any element (chunks of content in an HTML file) the element will usually default to behaving as a block or an inline element. A block element doesn’t share any horizontal space on a page with other elements. Inline elements are able to share horizontal space on a page but you might not be able to modify their dimensions as much as you can with a block element.

Lists and Tables and Pixel Perfection (let the games begin)

Image for post
Image for post
an HTML file containing only a table in it’s body (the main content part of the file) without an associated CSS file
Image for post
Image for post
no changes were made to the HTML file apart from linking to a CSS file

LS material (and TAs) will be sure to remind you that the HTML file should be organized according to what the content actually represents and not how you want the content to appear on your page (that’s the CSS file’s job). It might be tempting to use a table element to display all kinds of content but it should be reserved for tabular data: data that is organized according to the expected content of a table’s given row or column.

Pixel perfection. LS states that the learning objective for this course is not at a mastery level. Don’t be fooled into thinking this is a lighter course. You’re still expected to be able to build HTML and CSS files fairly competently. One expectation of the assessment is achieving a pixel perfect page. This means that you’re provided with one or multiple image files. It also means that the page you’re instructed to build should be identical to the images so much so that you can superimpose them over your page without seeing much or any differences between the two. For the perfectionists out there, I’m guessing LS attracts the lot of you, this can mean periods of frustration followed by ultimate satisfaction when you can slide an image over your page and see that they’re nearly identical. PerfectPixel is a great tool to fine tune your CSS file after a simple side by side image comparison looks fairly close.

Image for post
Image for post
identical HTML files rendering fairly differently
Image for post
Image for post
better but obvious differences remain
Image for post
Image for post
pretty good…but not perfect!

Forms

Image for post
Image for post
from worst to best: depending on the context, some form types will be more appropriate than others

Layout (Floats — Positioning — Flex — Grid) and Achieving Responsive Design

Fortunately, there are newer layout systems that are more user friendly, especially when it comes to achieving responsive design (see below). The display property accepts many values, two of them, Flex and Grid, change the layout of your elements to CSS Flexible Box Layout and CSS Grid Layout respectively. Simply adding display: flex; or display: grid; to an element can significantly affect the appearance of your page.

LS mainly demonstrates the use of floats and positioning using traditional layout systems and provides links to external tutorials relating flex and grid.

In my opinion it’s a good idea to get a decent grasp of the Flexible Box and Grid layout systems because:

  1. they can work well together
  2. they are widely used in “the real world”
  3. they lend themselves well to responsive design (see below)
  4. you will not master any one layout system by the course’s end (unless you have prior experience).

Since various layout model functions overlap, if you get stuck using one of them, you can always use another one to achieve the placement details you’ll be expected to achieve on the assessment.

Responsive design means that your page need to render differently depending on the size of your browser (viewport). Your page will ultimately change depending on the size of the screen of someone’s device. My tip throughout these projects is to take your time. They may seem like smaller projects and you may feel tempted to rush through them given that there are many larger projects throughout this course. However, if you aren’t comfortable with responsive design with a smaller HTML file you will struggle to learn the same principles when you are soon (hint, hint) dealing with HTML + CSS files with hundreds of lines of code.

Design Files

Hint: for some projects during this course you are able to view the webpage you’re copying. For the projects that provide design files, avoid the temptation to rely on having that finished webpage in front of you and try to complete the project solely with the image files if you plan on taking the assessment.

The (optional) Assessment

*many Thanks to Max Hawkins for providing valuable recommendations

Launch School

Publications of the Launch School Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store