Web Design, SIGDS 2011

{June 29, 2011

W 

Y June 29, 2011: Nice summary of HTML5 and design

W 

% fernando completed

W 

% Jessie completed

W 

% Robert completed

W 

% Sehee completed

W 

% Marco completed

W 

% Divya completed

W 

% Elspeth completed

W 

% Nic completed

Lesson 6: Forms

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.

Links

f
4 Lessons    { June 29, 2011    J   b 0   
W 

% Camila completed

W 

% Jenny completed

W 

% Aary completed

W 

% fernando completed

W 

% Nic completed

W 

% Sehee completed

W 

% Stephen : ) completed

W 

% Amy completed

W 

% Divya completed

W 

% Jessie completed

W 

% Peter completed

W 

% zack completed

W 

% Sue completed

W 

% Marco completed

W 

% Elspeth completed

W 

% Robert completed

Lesson 5: Styling lists

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.

Links

f
4 Lessons    { June 29, 2011    J   b 0   
W 

% Nic completed

W 

% Nic completed