Week 2

Notes

CSS Basics

• CSS Terminology
• Basic Selectors
• Divs, Spans, Id's, and Classes
• Attaching CSS to Your Document
• The HTML Document Tree

Smooth Scrolling with JavaScript

• Including JavaScript In Your Page
• Including jQuery In Your Page
• jQuery Smooth Scroll GitHub page

TextMate Manual (class exercise)

• Plain text version
• Dane's version with HTML markup
• In class version with smooth scrolling

Reading

Read for week 3:

• Review the following pages from Shay Howe’s excellent Learn to Code HTML & CSS website:
  • Building Your First Web Page (start at Understanding Common CSS Terms)
  • Getting to Know CSS
  • Working with Typography
  • Creating Lists

Homework

Mark up the Simmons Academics page with basic HTML and CSS. You can download all of the files here:

• Simmons Academics files

Start with looking at the content and thinking about how it should be structured with HTML. Think about what parts of the page should have similar structures.

• Here's an example of what the page might look like with just HTML

Once you've completed the HTML markup, create an external style sheet and work on styling the document. Start with styling the typefaces and colors. Use the included simmons-academics.png screenshot as a reference for how the page should look. You will need to make use of class selectors to make this work. Don't forget to use either a reset stylesheet or normalize.css

You can use the DigitalColor Meter application on all Macs to get the exact colors. It's located in /Applications/Utilities/ on the computers (you can also do a Spotlight search). You do not need to worry about getting the exact typeface, just one that is close in style.

• An example of the page styled with CSS but without layout properties