Step one: Put the document into plain-vanilla HTML. Using the least amount of effort possible, we need to get things web-ready. Let's start with a boilerplate.
See the Pen
IMS222 Boilerplate by Garrison LeMasters (@Garrison)
Boilerplate is another term for a template or framework. HTML and CSS benefit greatly from boilerplate documents because they need so much careful handling to make them work consistently. I've made a boilerplate for us. Here's what it does:
- It loads in the CSS file called "normalize.css" (which is CSS, but which just forces all browsers to start from a level playing field -- again, we shouldn't need to do that, but here we are). It does set our typeface to Helvetica or Arial by default (non-serifed) -- but other than that, we won't see any differences. Think of it as a giant tarp that you drape over your furniture before you start painting the living room. You probably won't need it, but it doesn't hurt anything, either.
- Our boilerplate sets our document title;
- It gives us all the standard HTML Selectors -- the tags that are the actual "markup" in HTML: html, head, and body, as well as placing a single h1 and a p.
It's a great starting point. Now let's put the document into the boilerplate and assign some selectors.
See the Pen
ADL Plain Vanilla by Garrison LeMasters (@Garrison)
Here is a link to the file which will be opened by your browser as a real-life HTML document.