HTML5 + CSS3
Review
Basic HTML page
HTML5
More semantic elements, better support for audio, visual, iframe improvements,
canvas, SVG, Drag and Drop API
CSS3
Rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
What's new?
HTML5
Semantic - precisely describe content
Exhaustive HTML5 reference:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
(Aside)
If you're building a Rails app, you'll need Embedded Ruby (ERB), a templating system for Ruby.
http://guides.rubyonrails.org/layouts_and_rendering.html
http://apidock.com/ruby/ERB
Cascading Style Sheets (CSS)
Why use CSS?
To describe the look and formatting of a document written in a markup language, eg. hypertext markup language (html)
It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
style.css
let's create a new file with the extension .css so we can keep all of our styles there
Ids
- Ids are unique
- Each element can have only one ID
- Each page can have only one element with that ID
Classes
- Classes are not unique
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
Ids
<ul id="colorful-list">
<li id="red-herring">Red Herring</li>
<li id="orange-sherbert">Orange Sherbert</li>
<li id="yellow-zest">Yellow Zest</li>
<li id="green-apple">Green Apple</li>
<li id="blueberry">Blueberry</li>
<li id="indiegogo">Indiegogo</li>
<li id="violet">Violet</li>
</ul>
Classes
<ul class="navigation">
<li class="navigation-link">Link 1</li>
<li class="navigation-link">Link 2</li>
<li class="navigation-link">Link 3</li>
<li class="navigation-link">Link 4</li>
<li class="navigation-link">Link 5</li>
</ul>
#red-herring {
color: red;
}
#violet {
color: violet;
}
.navigation {
list-style: none;
}
.navigation-link {
font-size: large;
}
What we'll review
- inline vs block level elements
- margins/padding
- image replacement
- responsive background image
- lists
- forms
- anything else you ask about
block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
inline elements
- <span>
- <a>
- <img>
//HTML
<footer>
<div id="business_links">
<ul>
<li>FAQs</li>
<li>Copyright</li>
<ul>
</div>
</footer>
//CSS
#business_links {
width: 300px;
margin: 0 auto;
}
Centering a div
"White space"
Margins provide spacing around the DOM element and are not calculated as part of the width. Borders and padding
margin: top right bottom left;
padding: top right bottom left;
eg: a { padding: 30px; } will expand the clickable area by 30px in every direction
Let's take a closer look at this in our browsers.
Let's style this together:
Image Replacement for SVG Icon
<nav class="main-nav">
<a href="#" title="Home" class="home-button">
<i>Company Logo</i>
<h1>Company Name</h1>
<h2>We Build Things</h2>
</a>
</nav>
HTML
.home-button {
i {
content: "";
background-color: transparent;
background-repeat: no-repeat;
background-size: 50px 50px;
background: url("images/logo/allovue_logo.svg");
display: block;
float: left;
height: 150%;
margin-right: 50px;
text-indent: -9999px;
width: 100px;
}
h1 {}
h2 {}
}
CSS
Additional Image Replacement Strategies:
https://css-tricks.com/css-image-replacement/
Let's style this together:
Responsive Background Image
Let's find ourselves a splash image!
https://unsplash.com/
style.css
body {
background-attachment: fixed;
background-image: url(milkway_splash.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
Bonus!
fn + F5 to sort CSS properties alphabetically
Let's take a closer look:
(navigation) list
Let's start simple
- Remove those ugly bullets
- Make the nav horizontal
- Add a hover effect
<nav>
<ul class="navigation">
<li>
<a href="/AboutMe/index.html">About Me</a>
</li>
<li>
<a href="/Resources/index.html">Resources</a>
</li>
</ul>
</nav>
ul.navigation {
background-color: white;
display: block;
list-style: none;
margin-top: 0;
width: 100%;
height: 35px;
}
ul.navigation li {
display: inline-block;
float: left;
}
ul.navigation a {
color: black;
display: block;
padding: 10px;
text-decoration: none;
}
ul.navigation a:hover {
background-color: black;
color: white;
}
Let's take a closer look:
Basic Form
Forms
- label
- input
- output
- button
<form oninput="result.value=500-parseInt(comment.length)">
<label for="comment">
Comment
<input id="comment" type="text" name="comment" autofocus="true" maxlength="500">
</label>
<span class="character-counter"><output name="result"></output>Characters Remaining</span>
<button type="submit" disabled="true">Comment</button>
</form>
Questions?
What didn't I cover that you're still curious about?
Activity
Browse through usTwo's Pixel Perfect Precision Handbook:
http://cdn.ustwo.com/PPP/PP3.pdf
Layer Comps
A handy way to save the appearance and visibility of the layers in Photoshop
https://helpx.adobe.com/photoshop/using/layer-comps.html#create_a_layer_comp
https://helpx.adobe.com/illustrator/using/symbols.html
90%
This is the percentage of time you will spend maintaining code
https://smacss.com/
- Patterns
- Modules
- Optimization
Homework
- Read SMACSS
- Developer-ready comps
- Homepage
- Wildcard web page
- KE - Contact Page
- MQ - Calendar/Upcoming shows page
- JZ - Gallery Page
- JW - Next Bus Page
- Rizzo - Purchasing ticket page
CSS
By brigittewarner
CSS
- 1,040