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:

0. Fear Not: We’re Here to Help
1. Not a Series of Tubes: An Internet Primer
2. HTML: Hamburger Text Markup Language
3. Don’t Fear the Browser: Developer Tools and Vanilla Ice Cream
4. Don’t Fear Starting From Scratch, Part 1: HTML
5. Don’t Fear Starting From Scratch, Part 2: CSS
6. 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