Launch School’s Course 202 — A Traveler’s Guide
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
Here, you get a taste of the purpose of HTML and CSS, how to think about structuring your HTML files and how to use CSS selectors. HTML is a markup language and CSS is a style sheet language. This means that HTML files are used to store most of the content of a webpage and organize this content according to semantics (titles, paragraphs, images, links…). CSS is then used to determine how this content is displayed(rendered) on your pages.
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…
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)
As mentioned above, HTML allows you to organize the content of your pages by the content’s meaning. One way to organize this information is in a table element. This is useful if you have content that belongs in a table. Changing an element display property to a table also changes the layout of content within the table to a table layout.
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.
Forms
In course 175 there was an introduction to forms because they collect data that can be stored on the backend side of things. Now you get to play around with them on the frontend and understand the tradeoffs of using one type of form over another depending on the type of information you want to collect from a user (a password, a phone number, a selection from a list vs a checkbox…).
Layout (Floats — Positioning — Flex — Grid) and Achieving Responsive Design
Earlier I mentioned layout; how elements will position themselves relative to one another on a page. Once you see an element on your page, you may decide you want to move it way over to the right or left or a little further up or down on the page. The position and float properties accept values that allow you to do this. LS will have you work through some projects that demonstrate how positioning and floats allow you to move any element precisely to a specific part of your page, helping you feel more confident in achieving pixel perfection.
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:
- they can work well together
- they are widely used in “the real world”
- they lend themselves well to responsive design (see below)
- 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
When you start building a webpage, the finished product won’t already exist (I presume, at least if you’re getting paid), which means you won’t have the luxury of seeing the finished project you’re working on. Instead you will have written instructions and images to use as a guide. In this lesson, the goal is to become comfortable implementing a solution that copies the appearance of a provided image file. There are tutorials of how to use Photoshop but don’t worry if you don’t have access to this software. You’ll be fine as far as this course is concerned even if you’re only armed with a simple image preview application.
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
You made it! My opinion is that any project that LS describes as optional is worthwhile and that you should only skip it if you are already 100% confident that you’ve mastered the material. You’re given 48 hours to complete the assessment. LS provides written instructions and image files to guide your construction of a webpage. I won’t give any more information about the assessment but will finish by saying it’s helpful to get an idea of what you can accomplish under pressure with a time constraint because this might be part of your interview process soon enough, good luck!
*many Thanks to Max Hawkins for providing valuable recommendations
