Week 3

Notes

• TextMate Shortcuts
• Download the Keynote Presentation from class
• Navigation Markup
• HTML Structural Elements
• Validating your HTML
  • W3C Markup Validation Service
  • Validator.nu
• CSS (oh joy!)
  • Attaching a CSS to your document
  • CSS Basics
  • CSS Basic Properties
  • HTML Page for CSS Testing
  • Defining Colors in CSS
  • How to Pick Colors in CSS

Homework

Reading

Required Reading

Supplemental

Here are links to the w3schools.com site that go over some of the CSS properties we learned. These pages include explanations and demonstrations of the CSS properties. You are not required to read them, but if you find yourself needing more explanations, be sure to look at these pages.

• MDN: CSS — Styling the Web
  • How CSS works
  • CSS syntax
  • Selectors introduction
  • Simple selectors
• W3C Schools
  • Attaching a CSS to your document
  • CSS Text
  • CSS List
  • CSS Border
  • CSS Font

Exercises

Make sure to review the notes from class posted above in the notes section.

Class Website

Experiment With CSS

Experiment more with all of the CSS properties listed in the CSS Basic Properties. Use the HTML Page for CSS Testing to practice on. Press Option when you click the link to download the file. You can also view the source of the page and copy all of the HTML and paste it into a new file.

• Add the HTML Page for CSS Testing to your website
• Make a heading for Week 3 on your class website
• Create a link under the Week 3 heading to your new HTML Page for CSS Testing

I understand that there are a lot of properties here. The goal is not to memorize the properties, but to get a good feel for how to use them. For example, don't worry so much about remembering that the CSS declaration text-transform: uppercase; will cause everything to be uppercase. Remember instead that there exists some CSS property that will do that.

Update Your Class Website

1. Update the content of your class website.
   You should be updating it each week. See the Class Website Example for a demonstration of the expected structure.

2. Add a clear navigation system to each page. Your navigation should include links to the following pages:

   • Home (Your class website home)
   • About (about me page from week 1 homework)
   • Recipe Book (link to the index page of the recipe book website)
   • (optional) Blog (a listing of your blog posts)

   Make sure your navigation is in a list (you can choose ul or ol). You may use the following CSS rule to make your list appear on one line: nav li {display: inline-block;}

3. Attach an external style sheet to each of your class website pages. Use some of the CSS properties you've learned to make your class website more visually appealing. The end result is up to you, but make sure it is both usable and readable.

Recipe Book Website

1. Create an external style sheet file for the Recipe Book website. Create a new folder called css inside your recipe-book folder. Save the style sheet inside the css folder.
   
2. Attach the CSS file you just created to all of the HTML pages in the Recipe Book website as an external style sheet.
3. Test to make sure your CSS is working by setting the background color of your pages.
   Since you're using an external style sheet, the background color of every single page in your recipe book should change as well.

Blog Assignment

Read the handout from Don't Make Me Think.

Choose two major websites to look at. Spend some time browsing each site. Think about the following things while looking at the site:

• What is the objective of the site?
• Who is the target audience of the site?
• What type of content is on the site?
• How does the design of the website facilitate the website objective?
• Is the site intuitive to use?

In your blog post, write about the answers to these questions. Also think about how you used the site.

• Were you able to easily navigate the site?
• Did you get lost?
• How did you know where you were in the site?

Be sure to include links to both sites that you review in your blog post.