5 Lessons

Outline

  1. Different types of images: graphic and continuous tone
  2. Logos, photographs, flat color. Transparency, palette, file size
  3. Smushit.com Big Web Show Nicole Sullivan. (4:13 in mp4 until 6:20 )
  4. Integrating into HTML, CSS3 Transition and Transform
  5. Background images. Relative positioning within overflow hidden box.
  6. HTML5 video and embedding Vimeo (also on YouTube)

Examples

  1. This is the in-class example.
  2. Photo gallery slideshow with JQuery
  3. Simplified version of barousel slideshow
  4. Full width align for Yeawon
  5. Navigation on the image for Yeawon

Links

4 Lessons / Week 2    f       

Considerations when making an actual site.

  1. Additional HTML tags. Start with HTML5 reset.
    • Folder hierarchy
    • Use external stylesheets
    • Search engine optimization. What you can control and what you can’t.
      • Descriptive title that changes on each page
      • Good semantic HTML markup. Text type (not images)
      • Images with alt text for Google Images
      • Meta data for description and keywords
      • Use a footer navigation at the bottom
      • Promote your site online, try to get permanent mentions
    • See who’s coming to your site with Google Analytics
  2. What sort of Facebook, Twitter, Social Media component makes sense?
  3. Check your work in other sites with Browsershots or VMWare PC emulation

Links

4 Day 5 / Lessons    f       

Outline

  1. The natural flow of a page
  2. Floats and Clear
  3. Absolute, Relative and Fixed Positioning
  4. Display reminder (block, inline, inline-block, none)
  5. Grids

Example files

  1. Floats in-class demo
  2. Positioning in-class demo

Links

4 Day 3 / Lessons    f       

Outline

  1. Forms have come a long way with HTML5 and CSS3
  2. Some nice examples of contemporary forms
  3. Let’s code up a sample

Examples

  1. A bunch of form elements

Links

4 Day 3 / Lessons    f       

Outline

  1. Lists often used for navigation
  2. Examples of lists in action
  3. Pseudo classes
  4. Border instead of text-decoration
  5. Web Inspector

Example

  1. Example from class
  2. A list with several properties in it
  3. Submenu example

Links

4 Day 2 / Lessons    f       

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Widths
  4. Some of the box model applies only to display block
  5. Display inline and block
  6. Generic tags: div (block), span (inline)
  7. Float for wrapping

Example

  1. Class example
  2. Class example2
  3. One example of the box moxel
  4. Horizontal centering
  5. Vertical centering

Links

4 Day 2 / Lessons    f       

Outline

  1. Three ways to call CSS
  2. Syntax: declaration blocks, comma separated selectors
  3. Text properties
  4. Units
  5. A Pseudo Classes (:hover)
  6. Colors

Links

4 Day 1 / Lessons    f       

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Elements, attributes, nesting
  5. Block elements: headers, paragraphs, lists
  6. Inline elements: anchor, strong, em, cite, abbr
  7. Images

In-class Demo

Example marked up in class

Links

4 Day 1 / Lessons    f