1. CSS/html

2. Terminology, Syntax, &
Introduction
•
•
•
•
Element <a>
tags<a>….<a>
Attributes
<a href="http://www.shayhowe.com/">Shay Howe</a>

3. Selectors
• Type Selectors
HTML
• <p>...</p>
CSS
• p { ... }
• Class selectors
HTML
• <div class="awesome">...</div>
CSS
• .awesome { ... }
• ID Selectors
HTML
• <div id="shayhowe">...</div>
CSS
• #shayhowe { ... }

4. Elements & Semantics
•
•
•
•
•
•
•
•
Headings
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
Headings Demo
This is a Level 1 Heading
This is a Level 2 Heading
This is a Level 3 Heading

5. • Paragraphs
• <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco.</p>
• Paragraphs Demo
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.

6. • Hyperlinks
• <a href="http://shayhowe.com">Shay</a>
• Hyperlinks Demo
• Shay
Email Link
<a
href="mailto:shay@awesome.com?subject=Still%20Awesome&b
ody=This%20is%20awesome">Email Me</a>
• Email Link Demo
• Email Me

7. HTML5 Structural Elements

8. •header
<header>...</header>
• navigation
<nav>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</nav>

9. •
•
•
•
•
•
•
•
Article
<article>...</article>
Section
<section>...</section>
Aside
<aside>...</aside>
Footer
<footer>...</footer>

10. Box Model & Positioning

11. •
•
•
•
•
•
•
•
CSS Height Property
div {
height: 100px;
}
CSS Width Property
div {
width: 400px;
}