• firefox extensions
• more on css
• css box model
• exercises
• readings

• Different browsers allow you to extend their capabilities with small plug-ins.
• Firefox and Chrome allows the creation of extensions (small add-ons that add new functionality to Mozilla applications)
• useful Firefox addons for web developers and designers:
  • Web Developer - adds a menu and a toolbar with various web developer tools.
  • HTML validator - get warning and error reports when you view source on a page.
  • Total validator - Provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests.
  • Colorzilla - get a colour reading from any point in your browser.
  • More Web Development Add-Ons
• useful Chrome addons for web developers and designers:
  • Web Developer - adds a menu and a toolbar with various web developer tools.
  • Validity - validate your pages right from the address bar.
  • Colorzilla - get a colour reading from any point in your browser.
  • CSS Viewer - hover over elements on a web page to see their properties/values.
  • More developer tools
  • Chrome DevTools Overview
  • Chrome DevTools Tips

• as far as a style sheet is concerned, everything in your HTML is inside a box
• from the outside in it looks like this:
  
  margin

  border

  padding
  this is some content
• content: text & web page elements in the container
• padding: area between the content and the margin
• border: between the padding and the margin
• margin: determines the empty space between the element and adjacent elements
• content width vs. visible width:
  • content width is the size of the visible content (text, images, etc.)
  • visible width, however, includes everything out to the edges of border

Get all the textbook exercises in one great PDF.

1. Work through Hands-On Practice 6.1 starting on page 251 of text.
2. Begin with ex01_normal_flow/starter.html.

Float property

Elements that seem to "float" on the right or left side of either the browser window or another element are often configured using the float property.

.floatright {float: right;}
<img src="file.jpg" class="floatright">

Display property

Configures how and if an element is displayed.

• display:none;
  The element will not be displayed.
• display:block ;
  The element is rendered as a block element, even if it is actually an inline element, such as a hyperlink.
• display:inline;
  The element will be rendered as an inline element, even if it is actually a block element, such as a <li>.

1. Work through Hands-On Practice 6.2 starting on page 253 of text.
2. Begin with ex02_float/startyls.html.
3. Try the clear property (see page 246)
4. Try the overflow approach to clear a float (see page 255)

1. A CSS property index
   By Brian Wilson (no not THAT Brian Wilson)
2. W3Schools
   Tutorials and examples.
3. Complete CSS Guide
   From Westciv.
4. 50 Useful Coding Techniques
   CSS Layouts, Visual Effects and Forms - from Smashing Magazine.
5. Lists, Floats and Selectors
   Great tutorials from MaxDesign
6. Position is Everything
   Advanced CSS techniques for dealing with browserr issues.
7. The Layout Reservoir
   From bluerobot.com.
8. CSS Layout Techniques
   From glish.com.
9. 10 CSS tricks you may not know.
   From webcredible.co.uk.
10. Little Boxes
    More CSS layout techniques

Your instructor will walk you through a more advanced layout for the WidgetWerks site.

1. Complete the Hands-On Exercises for Lighthouse Island Bistro
   Using the files in ex04_lighthouse, complete the exercises starting on page 266 (6.4) and page 267 (6.5).
2. Turn a list into a navigation bar:
   Walk through the steps required to recreate a navigation bar described by Roger Johansson in his excellent tutorial.