Class 9 Prep
Before coming to Class 9, please complete the following tasks:
Semantic HTML
These days it is considered best-practice to structure your HTML content by always trying to choose a tag that "semantically" describes its content. With HTML5 came a suite of new tags (<section>, <header>, etc) that are more semantically meaningful than plain-old <div>s.
| Done | Task | Resource Type | Link | Time Estimate | Instructions |
|---|---|---|---|---|---|
| Do | Tutorial | 1 hour | Semantic HTML | This tutorial the HTML5 tags that help you write more semantic HTML. It is part of a series, but you can follow along with this without doing prior parts. When they reference Atom, know that you can use any code editor (e.g. VS Code). | |
| Browse | Reference | 10 minutes | HTML5 Doctor | HTML5 Doctor is a great reference for understanding the semantic purpose of HTML elements. Familiarize yourself with this resource, and bookmark it for later! |
CSS
Now let's take a little time to learn about a miscellaneous grab-bag of CSS concepts that will be important in the next studio.
| Done | Task | Resource Type | Link | Time Estimate | Instructions |
|---|---|---|---|---|---|
| Do | Exercises | Adjusting the Padding of an Element Adjust the Margin of an Element |
15 minutes | These exercises on FreeCodeCamp will give you practice adjusting the margin and padding CSS attributes. |
|
| Read | Article | W3 Schools / CSS Box Model | 15 minutes | Read this article on the Box Model, the system for determining how the margin, border, and padding attributes work together to determine the overall sizing and spacing of an element. (You will first have to make an account with FreeCodeCamp.) |
|
| Do | Exercises | Inherit Styles from the Body Element Prioritize One Style Over Another Override Styles in Subsequent CSS Override Class Declarations by Styling ID Attributes |
30 minutes | These exercises on FreeCodeCamp will give you some experience with various ways that styles declarations can override and take precedence over one another. Using these techniques will help you maintain concise, readable CSS code. | |
| Read | Articles | W3 Schools / CSS Display W3 Schools / CSS Inline-Block What's the Deal with Display Inline Block |
30 minutes | Read these articles on the differences between the display values of block, inline, and inline-block. |
Functional Javascript
We have talked about this before, but it is worth spending some more time on it.
| Done | Task | Resource Type | Link | Time Estimate | Instructions |
|---|---|---|---|---|---|
| Read | Infographic | map, filter and reduce Explained with Emoji | 2 minutes | This is the TL;DR explanation for the map filter and reduce functions. |
|
| Read | Article Series | Gentle Intro to Functional Javascript | 1.5 hours | This is a 4-part series. Please read all four parts. |
