4Lessons

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)

Example

  1. This is the in-class example.
  2. Photo gallery slideshow with JQuery
  3. Simplified version of barousel slideshow
f    J   b 0   

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
  2. New York Times starter

Exercise

Design a search form for the upper right inside pages of The New York Times website. You may either take a screencapture of the web page and place it in the background, or code your form on a white page and then photoshop it onto the site. Place your finished png or .html file on your FTP area and categorize a post with the link under exercise 6.

f    J   b 0   

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. A list with several properties in it
  2. List example from Camila
  3. Submenu example adapted from Elsbeth

Exercise

Using the examples below as inspiration, create a horizontal nav bar that can replace a site you like or could work for your own portfolio site. Consider pseudo classes, anchor states and the box properties. Make use of the Web Inspector to see what other sites are doing. Place your results in a new post on this site in category exercise 5.

f    J   b 0   

Outline

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

Examples

  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Example of display
  4. Recap of html/css basics
  5. Updated recap of html/css basics and boxing

Exercise

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to exercise 4. The size of the flag is up to you.

f    J   b 0   

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Border applied to p tag. Inheritance.
  4. div, span
  5. display inline and block
  6. float for wrapping
  7. Widths

Example

  1. The example we coded up in class
  2. Horizontal centering
  3. Vertical centering

Exercise

Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category exercise 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.

f    J   b 0   

Outline

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

Example

This is the HTML plus CSS file that was built in class

Exercise

Create 5 different versions of your HTML from exercise 1. It makes sense to make an internal stylesheet and duplicate your HTML document 5 times. The emphasis on this exercise is to get you used to CSS syntax and to get you accustomed to looking up properties. You may have aesthetic ideas for the content, or you may apply properties and see how the page reacts. Either is fine. Try to create 5 very different solutions given the presentation CSS we have reviewed so far.

Please FTP your finished html files to a folder called “exercise2” and link to it from a post that you create on the class site. Be sure to assign the category “Exercise 2” to your post so it will show up alongside your classmates.

f    J   b 0   

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Text-based tags (headers, paragraphs, strong, em, lists)
  5. Elements, attributes, nesting
  6. anchor (attributes… title)
  7. lists
  8. images

Example

This is the HTML file that was built in class

Exercise

Create a new html document with TextWrangler. Save it as risd.html

Write the HTML for the first part (up until after “history”) of the Wikipedia entry for W RISD. You do not need to hyperlink every link. But do apply at least one example of every type of tag.

Add an image of the logo at the top of your document. For this exercise, do not look at the source code, but rather make your own predictions of what tags should be used. Please FTP your finished html file and link to it from a post that you create on the class site. Be sure to assign the category exercise 1 to your post so it will show up alongside your classmates.

f    J   b 1   

Cat Description