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.

---

Take a look at the new index.html file that was transferred from the Spectral template. You should recognize some of the html tags, but we've also added in some new ones (remember this is all about connecting the dots). Let's looks at these tags and see how they fit into what we already know.

NEW TAGS	DESCRIPTION
<meta name="METADATA" content="INFORMATION" />	Describes metadata on page (descriptions, author information, keywords, etc.), can only be in the
<link rel="stylesheet" href="url">	Links to style sheet
<script src="url"> SCRIPT </script>	Include client-side script with Javascript
<noscript> SCRIPT </noscript>	Alternate content for users with disabled scripts

We've also introduced the idea of Containers. Containers allow us to separate out sections within our html file with html elements.

CONTAINER TAGS	DESCRIPTION
<header> ... </header>	Introductory content
<nav> ... </nav>	Navigational links
<section> ... </section>	Any specific section (chapters, portions)
<footer> ... </footer>	Footer content

---

"But why does it look so busy?"

Yes, I'm not going to lie to you. This can look pretty overwhelming when you first open it and you're like, "What in the world is going on?!!". 😨 But remember, building blocks and connecting dots. I'm going to show you a fun, little trick that has really helped me discover new things and analyze what's going on in my page.

The Inspect Tool

Inspect and View Page Source are probably my most favorite web development tools. If you right click on any website, you'll have options similar to these (don't mind the extensions):