(Once you've had an intro to Git and Github, these steps will no longer be necessary.)
Click the "Download ZIP" button toward the top-right of this page. This will download a .zip file to your Desktop (or your "Documents" folder, or your "Downloads" folder, depending on how your computer's set up).
It may automatically "expand" and turn into a folder with the same name. If it doesn't, double-click on the .zip file, or right-click on it and select "Expand".
Move the expanded folder into your wdi folder to keep everything organized.
Provided are a bunch of .md files, and a bunch of .css files.
The .css files contain a bunch of CSS snippets. The .md files contain English descriptions of what all those CSS snippets do -- but in a different order.
Your job is to copy each CSS snippet and paste it next to its description in one of the .md files.
For example:
A CSS snippet:
background-color:red;
An .md file:
Gives el a red background
` ` `
.el{
}
` ` `
...and the solution in the .md file:
Gives el a red background
` ` `
.el{
background-color:red;
}
` ` `
First, look at the words used in the CSS snippets. What do the words mean in English? For instance, if you see background-color:red, it's pretty obvious what that does.
If you're not sure about a particular snippet, put it in the provided index.html and see how its appearance is affected.
- Open the provided
index.htmlfile in your web browser. (Drag and drop the file onto the icon of a web browser on your computer.) - Copy and paste the snippet into the section marked
PUT YOUR CSS HERE. - "Save" the
index.htmlfile. - "Refresh" the page in your browser to see what changes have been applied.
If you're still unsure, try Googling the name of the CSS property in question (e.g. "CSS background-color").
"El" is short for "element". Often, "el" is used in Javascript to refer to a certain element. In this case, when you're told to "do something with el," it means "do something with all elements with the class of 'el'".
If you've copied and pasted some strange CSS and refreshed the page, but it doesn't look any different, the CSS may only affect its appearance when the screen or particular elements are bigger or smaller than a certain size.