More semantic elements, better support for audio, visual, iframe improvements,
canvas, SVG, Drag and Drop API
Rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
Semantic - precisely describe content
Exhaustive HTML5 reference:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
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
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.
let's create a new file with the extension .css so we can keep all of our styles there
<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>
<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;
}
//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
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
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
https://css-tricks.com/css-image-replacement/
Responsive Background Image
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
(navigation) list
<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;
}
Basic Form
<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>
Browse through usTwo's Pixel Perfect Precision Handbook:
http://cdn.ustwo.com/PPP/PP3.pdf
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
This is the percentage of time you will spend maintaining code
https://smacss.com/