• HTML/CSS Code Editors
  • see the links in the HTML & CSS Editors section of the Begin Lesson on the DVD
    
• Browsers - If you rated your CSS skills, on your Introduction at the Forum, as Intermediate or less, use ONLY Firefox (download Firefox here) until the Mid Term. For those with stronger CSS skills who choose to use multiple browsers from the beginning, I may not have time to comment on hacks and work arounds, or troubleshoot problems, until after the Mid Term.
• Assignments Page Sample: a VERY simple Assignments page
• Basic Page Code Template
  contains XHTML Declarations and Validator Icon Links for creating new pages
  
• Class Website FAQ page
  • look over the questions on the FAQ page, so that you're aware of what questions have been asked and answered, in case you encounter any of those situations
• If you need help
  • go to the class Forum, Help Requests sub-forum
  • look through any already posted requests to see if they match your issue
  • if they don't, create a new topic, with a descriptive subject line, so it's clear what your issue is, and then give all the pertinent details in the body of the topic
  • Requesting Help Guidelines: Pertinent Details

back to top

• Code Snippet: Basic Page Template
  contains XHTML Declarations and Validator Icon Links
• Code Examples from the Text: On page xi of Stylin with CSS, it states that the various code examples shown in the text can be downloaded from bbd.com/stylin. If you have any difficulty accessing the Stylin with CSS page at bbd.com, you can download the files from this website using this link -- Code Examples from the Text. 
• The MUST KNOW XHTML list
  31 Basic XHTML tags, grouped by type
• Validator Error Message Help
  from Linda's CD for HTML-1
• xhtml.com
  Comprehensive XHTML Reference with Examples, great organization
• learningforlife.fsu.edu/
  webmaster/references/
  xhtml/tags/index.cfm
  Wonderfully complete listing of Elements (Tags) and Attributes, and which tags can validly be nested within other tags (valid child, and parent tags) see the University of Florida Certified Webmaster Curriculum site,
• topxml.com/xml/
  LearnXML.asp
  Comprehensive XHTML Reference with Tutorials, and Quizzes
• htmlgoodies.com/
  primers/html
  Comprehensive HTML/XHTML Reference, with Tutorials & Examples
• w3schools.com/
  xhtml/default.asp
  Comprehensive XHTML Reference, with Tutorials, Examples, & Quizzes, short on examples
• www.cookwood.com/
  html/extras/entities.html
  Complete list of X/HTML Character Entities by entity code and also by number code
• cssZenGarden.com - a wonderful resource site showing how radically different page layouts and appearances can be applied via CSS in external style sheets, to the very same XHTML page markup code -- this is made possible by carefully planning and naming the different functional areas of the page with div tags so that the CSS styles can target the specific areas.
  

back to top

• More About Learning and Practice
  a bit of info on how humans learn and how valuable practice is
  
• Validator Error Message Help
  from Linda's CD for HTML-1
• Muiz' CSS Recap
  Overview & Recap of CSS Fundamentals with examples 
• htmldog.com/reference/
  cssproperties/
  CSS Reference with Tutorials, and Examples 
• htmlgoodies.com/
  beyond/css
  CSS Reference Comprehensive, with Tutorials & Examples 
• webdesign.about.com/od/
  cssselectors/
  CSS_Selectors.htm
  CSS Reference, with Examples, and a fair amount of ads
• www.eskimo.com/
  ~bloo/indexdot/
  css/propindex/all.htm
  CSS Property Index
• web.oreilly.com/
  news/csstop10_0500.html
  Top 10 CSS Authoring Tips

back to top

• Muiz' Font & Text Recap
   Muiz' review of Fonts & Text properties
  
• www.codestyle.org/
  css/font-family/index.shtml
  Web Font Sampler (guide to web safe/common fonts)
• www.codestyle.org/
  servlets/FontStack
  Font Stack Builder (create web safe font-families)
• www.clagnut.com/
  blog/348/
  Blog & Discussion of Font Sizing issues 
• css-discuss.incutio.com/
  ?page=FontSize
  in-depth resource on Font Sizing
  
• jakpsatweb.cz/
  css/css-vertical-
  center-solution.html
  Vertical Centering in CSS
• Font and Text Property Tutorials
  • http://www.
    w3schools.com/
    css/css_font.asp
    W3schools CSS Fonts
  • http://www.
    w3schools.com/
    css/css_text.asp
    W3schools CSS Text
  • http://usabletype.com/
    css/font/sizes/
    Design Principles for Text
• Line Height and the Effects of Different Units
  • http://meyerweb.com/
    eric/thoughts/
    2006/02/08/
    unitless-line-heights/
• Color Properties
  • Determining Color

    Use either site when setting the color and background-color values.
    Hexadecimal site -http://www.somacon.
    com/p142.php

    Hexadecimal site - http://www.psyclops.
    com/tools/rgb/

  • 5-Color Color Palette Resource

    kuler.adobe.com

    A great resource for creating 5-color color palettes for web sites is kuler.adobe.com -- the palettes are displayed as 5 square boxes of color, like color swatches or chips in a paint store. There are a huge number already created and uploaded to be shared, and you can also create your own.

    By registering a username and password, you can create a free account where you can store the 5-color palettes you create, and ones that you've marked as favorites from all those available for sharing.

    If you pick a palette to edit/make changes, you get both the visual color squares, and numeric codes -- rgb, cmyk, hex, hsv, and lab, plus a color wheel/disc with the base color for the palette in the center of the disc, and 4 movable color points. You can make changes by moving the 4 color dots to other locations on the color disc, or you can type in the numeric codes for the different squares. OR you can choose from 6 different color rules that the web site will apply to the base color -- analogous, monochromatic, triad, complementary, compound, and shades.

    You can create a new palette based on a single base color, or you can upload a photo, graphic, logo, or some other image, and the site will analyze the colors in it, and produce a 5-color palette that will work with the colors in the image.

• Lorem Ipsum/Blind Text Generators
  • Lorem Ipsum text generator
    • www.lipsum.com/
    • the entry box and choice buttons are about mid-page, so scroll down
  • Blind Text Generator
    • www.blindtext
      generator.com/
      lorem-ipsum
    • this one creates Lorem, and several other types of placeholding or blind text,
    • PLUS a checkbox to put the p tags in for you

back to top

• Muiz' Box Model & Positioning Recap
  a recap of the Box Model and Position Properties  
• www.w3.org/TR/REC-CSS2/
  box.html#box-dimensions
  W3C Secification for Box Model (a bit dull)  
• www.andybudd.com/
  archives/2003/11/
  no_margin_for_error/
  discussion of Margin Collapse  
• css-discuss.incutio.com/
  ?page=BoxModel
  discussion of Box Model and diagram  
• www.brainjar.com/css/
  positioning/default.asp
  discussion of Box Model and diagram  
• www.hicksdesign.co.uk/
  journal/3d-css-box-model
  discussion of Box Model and 3-D diagram  
• http://www.redmelon.net/
  tstme/box_model/
  discussion of Box Model and cool Interactive Diagram  
• http://www.positionis
  everything.net
  /easyclearing.html
  Using :after pseudo-element to clear floats WITHOUT adding divs to the markup

back to top

• Download Firefox Browser Tools
  • Web Developer Tools v1.1.8 (add-on for Firefox)
    addons.mozilla.org
    /en-US/firefox/
    addon/60
     
  • Firebug v1.0 (add-on for Firefox)
    www.getfirebug.com/
     
  • YSlow Page Analyzer (add-on for Firebug add-on)
    developer.yahoo.com/
    yslow/
    This tool, an add-on for Firebug, analyzes a variety of things that can slow down page loading and performance. It MAY be of some use to any who are very concerned about speeding up their pages

• ---

  Download Latest Browser Versions
  • IE 8 for various Windows versions
    www.microsoft.com
    /windows
    /internet-explorer
    /worldwide-sites.aspx
     
  • IE 7 (win XP only)
    www.microsoft.com/
    downloads/
    Browse.aspx?
    displaylang=
    en&categoryid=6
     
  • Safari 4 (for mac tiger or leopard, win xp or vista--the download page determines whether to display the link for mac or win)
    www.apple.com/safari/
    download/
     
  • Safari 1.2 (mac os 10.3 - 10.3.8)
    www.apple.com/
    support/
    downloads/safari.html
     
  • Safari 3 for os X Tiger included in os 10.4.11 software update
     
  • Firefox 3.6.6 (win/mac)
    www.mozilla.com/
    firefox/
     
  • Opera latest version (win/mac)
    www.opera.com/
    download/
    index.dml?custom=yes
     
  • Netscape Archive for Flock or Thunderbird (win/mac)
    support for all versions of Netscape ended on 01 Mar 08 so the download links for previous versions have been moved off this page.
  • Old Versions of Netscape
    browser.netscape.com/
    downloads/
  
  

• ---

  Testing in Many Browsers:
  
  • Discussion/Recap of how to test in many browsers
    css-discuss.
    incutio.com/?
    page=BrowserTesting
     
  • TredoSoft.com Multiple IE Installer
    an installer program that makes it possible to install multiple versions of IE without the installs overwriting crucial Windows Registry settings, which is what prevents normal installations of mulitple versions from working
    tredosoft.com/
    Multiple_IE
     
  • Evolt.org Archive - Old Versions of Dozens of Different Browsers
    (who knew there were so MANY different browsers ??)
    browsers.evolt.org/
     
• IE 6 in Windows Vista (for serious propeller-heads only)
  very technical article on how to get IE 6 to work in Vista -- if your tech-speak and geek-speak quotients aren't very high, this article will likely sound like gibberish
  tredosoft.com/
  IE6_For_Vista_Part_1
   

  ---

• Browser Emulator Screen Shot Sites
  • Top 10 Browser Emulators
    webdeveloper.
    econsultant.com
    /browser-emulators/
    A great resource! 10 different sites where you can create screen shots of pages as if using different browsers
     
    NOTE: The first link on the page, to Broswershots.org uses an old URL that now leads to a non-site page. Instead use this link or type in browsershots.org
     
  • DVD NOTE: Linda mentions browserShots.com, but that URL now is a portal site rather than the one you want (broswershots.org). Linda's comment is that it takes 30 minutes to create the screen shots, isn't actually accurate. The time it takes to create the screen shots depends on how many browser/versions you choose, AND how many other people are using the server simultaneously. You can choose from among 28 Linux, 17 Windows, 4 Mac, & 4 BSD different browser/versions. The more browser/versions selected the longer it takes to create the screen shots. I tested it with 5 or 6 selected and it took about 4 minutes. The time choice is really a limit on how long your requests stay in the queue, when the server is busy, not how long your requests will take. Check it out just to see how it works.
     
  • NOTE: Don't miss the Lynx text-mode Viewer site (one of the 10 sites at the link above) -- see how your page looks displayed as text only. The ideal in this new approach to web pages that we're learning, is to design pages that are understandable and navigable using any media, including text only. How close one comes to achieving this ideal is a matter of choice, design/testing time available, and how the site is anticipated to be used.
     
  • Total Validator
    www.total
    validator.com/
    Don't freak out if this site shows validation errors that don't show up at the W3C site we've been using. For the purposes of your grade, we'll continue to use the W3C site we have been using. To get at the browser emulation screen shots, click the 'select validation options' link to the right of the Validate button, which will let you choose a validation standard, and a browser/version to use.
   
• Browser Usage Stats at W3Schools.com
  www.w3schools.com/
  browsers/
  browsers_stats.asp
   
• Wikepedia Browser Usage Stats
  en.wikipedia.org/
  wiki/Usage_share_
  of_web_browsers

back to top

• pending

• pending

• pending