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,033