• Ê
  • Â

5 Day 2

í Assignment 3: Redesign a navigational menu

Using the examples below as inspiration, redesign the navigation for an existing website. 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 “Navigational Menu” along with a screen capture and URL of the website you are replacing.

Example of centering

Inline-block centering

Links

b Add comment    

Leave a Reply

Outline

  1. a Pseudo Classes (:hover)
  2. Classes
  3. Display property: block, inline-block, inline, none
  4. Border instead of text-decoration
  5. Border-radius (browser prefixes)
  6. Text shadow
  7. Box-shadow

Example

css2

Links

4 Day 2 / Lessons   b Add comment

Leave a Reply

í Assignment 2: Add CSS to assignment 1

Create two different versions of your HTML from assingnment 1. Make an internal stylesheet and duplicate your HTML document two 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. Create two very different solutions given the presentation CSS we have reviewed so far.

Please FTP your finished html files to a folder called “assignment2″ within your students directory and link to them from a post that you create on the class site. Be sure to assign the category “CSS basics” to your post so it will show up alongside your classmates.

b Add comment    

Leave a Reply

Outline

  1. Calling in CSS (internal)
  2. Syntax: declaration blocks, comma separated selectors
  3. Text properties (size, line-height,
  4. Colors
  5. Units
  6. Margin, Padding, Border

Example from class

Here it is
Box Model

Links

4 Day 2 / Lessons   b Add comment

Leave a Reply

Y Review HTML basics

  1. CSS was part of the HTML4 specification (1999) and authored by the w3c
  2. Structure, structure, structure
  3. Model example from yesterday
  4. New York Times without stylesheets
  5. Look at “Welcome to Locally Made” coding
  6. Look at a few other websites via the HTML
b Add comment    

Leave a Reply