Resources

GENERAL

Whiteboard Notes

FILES

HTMLtemplate.html (right-click to save file)
Personal Page Example

HTML

Web Design Basics: slides introducing web design concepts
HTML Basics: slides introducing HTML concepts
HTML Cheat Sheet: summary of common HTML tags
HTML Reference: complete list of all HTML tags

CSS

CSS Basics: slides introducing CSS concepts
Creating a Nav Bar: slides explaining step-by-step how to create a navbar using CSS
CSS Cheat Sheet: summary of common CSS style declarations
CSS Reference: complete list of all CSS attributes
CSS Examples: excellent resource of how-to’s for CSS
Using <div> tags: a comprehensive example of how to use <div>…</div> tag pairs
Simple Box Maker: an example of how to use margins and padding
Pseudo Element Roundup
Mozilla CSS Reference

COLORS

Color Names: list of the 147 color names defined for HTML and CSS use
Color Picker: find the #xxxxxx codes for specifying colors in HTML and CSS

VIDEOS

The series of videos called “Don’t Fear the Internet” are good introductions and summaries of topics in web development:

Fear Not: We’re Here to Help
Not a Series of Tubes: An Internet Primer
HTML: Hamburger Text Markup Language
Don’t Fear the Browser: Developer Tools and Vanilla Ice Cream
Don’t Fear Starting From Scratch, Part 1: HTML
Don’t Fear Starting From Scratch, Part 2: CSS
Don’t Fear Specificity: Targeting Content With Classes & Ids

CHROME DEVELOPER TOOLS

Getting Started: video providing overview of Chrome Developer Tools
Elements Panel: tutorial on using the elements panel to make on the fly (temporary) edits
Elements Styles: tutorial on how to make temporary edits to the CSS and how to save those edits
Inspecting Elements: video demonstrating how to inspect elements using Chrome Developer Tools

EDITORS

Notepad++: download this free Windows HTML editor from here if you want to use it at home
Text Wrangler: download this free Macintosh HTML editor if you want to use it at home