Lesson #3: Add Some Glitter

In lesson #2 we learned all about html, the skeleton of any webpage. In this lesson we'll start to add some glitter to our index.html file by introducing CSS into the mix.

CSS (Cascading Style Sheets) is how html elements are displayed.

This is usually where everyone wants to start - the nice, pretty things that sparkle. The format, the colors, the fonts, the backgrounds, all of the things you'll spend hours customizing to your liking. To rather let you play around with colors and fonts, instead of grid-sizing and making your site mobile friendly we're going to be using a template.

---

There are a lot of sites you can venture to in order to get a free layout template. For this class, we're going to be using HTML5Up's Spectral template. Feel free to use any of the other themes available on HTML5Up, but I would recommend making this change after the class. This way, we can work together now and then when you complete your website, you'll go through the same type of methods in constructing a new one while still having a stable site to fall back on.

1. Download HTML5Up's Spectral template.
2. Commit html5up-spectral unzipped folder to your Github.
   • In your current project folder, rename the index.html file we worked on in Lesson #2 to index-lesson2.html.
   • Unzip the downloaded html5up-spectral.zip file from step #1.
   • Take all the files/folders in the unzipped folder html5up-spectral and add them into your current project folder. If you get an error that certain files exist (for example, I already created an assets folder in my personal project and Spectral had one as well), drag/drop the folders/files from Spectral's folders into the same folder name within your personal project.
   • Commit changes to add the template into your project folder.