On-line Tools
- Blank HTML5 Page (Generates valid HTML5 markup)
- Blind Text Generator (Dummy text for design)
- Lettercount.com (Check line lengths)
- TitleCase - Text Conversion Solutions
- Web Page Test (Test page speed)
- Google PageSpeed Insights
- Cloudinary.com Image Analysis Tool
- Squoosh (Compress images, create WebP)
- Compress or Die (jpg)
- Compress or Die (png)
- Compress or Die (webp)
- Tiny PNG (Compress PNG and JPG images)
- W3C HTML Validator
- W3C CSS Validator
- caniuse.com (Browser support for CSS3 properties)
- CSS Font Stack
- Font Squirrel Webfont Generator
- Google Fonts
- WebAIM Color Contrast Checker
- Firefox Plugin Contrast Checker
Examples
- CSS List Navigation Example
- CSS Centering
- How to Use a Single Google Font
- WebP Examples
- Simple CSS Horizontal Dropdown Menu
- HTML5 Multimedia
Reference documents
- Brackets Cheat Sheet
- Publishing Settings
- Emmet - the Essential Toolkit for Web Developers
- Emmet Cheat Sheet (pdf)
- HTML Tags
- CSS Styles
- CSS Box Model Graphic
- Simple 1-Column CSS Layout.
- Simple 2-column CSS layout
- Simple 3-column CSS Layout
- Fonts In Use – Type at work in the real world
- CSS Shorthand Guide
- Simplified usability checklist
- Listamatic - One list, many options
- Principles of Design Quick Reference Poster
- WebAIM's WCAG 2.0 Checklist
Video Tutorials
Exercises
Readings
- A Respected MIT Professor Had a Simple 4-Word Rule for His Classroom, and Every Company Should Follow It
- Google: Rolling out the mobile-friendly update
- HTML Naming Conventions and File Management
- What Structure Should Your Website Have?
- Image Types and Usage in Web Design
- Learn CSS Today The Easy Way
- Standardizing CSS class and id names
- Understanding Your Web Audience
- Personas
- Myth #1: People read on the web
- Read How to Improve Your Website Readability Score
- How to Create Web Content That Works
- A Comprehensive Guide to Typography Basics
- Better CSS Font Stacks
- Slash Page Load Times with CSS Font Subsetting
- Interpreting Your Website Statistics
- Seven Steps to Easier Web Navigation
- Where Am I?
- SEO 101: How to Write Compelling Title Tags
- Document titles and title separators
- Writing Great Alt Text
- Your Key to Basic Web Analytics
- Google Analytics vs AWStats - What's the difference
- How Google Search Works
- Beginner's Guide to Responsive Web Design
- Pursuit of the Original
- Page Design Section
- Working with Visual Weight in Your Designs
- Google Shares New Mobile Page Speed Guidelines
- Usability 101
- Introduction to Web Accessibility
Lecture notes
- 8/26/2025 - Instructor Introduction (ppt)
- 8/26/2025 - Course Introduction
- 8/28/2025 - Definitions/File Management
- 8/28/2025 - HTML Review
- 9/2/2025 - Brackets/HTML5
- 9/4/2025 - Digital Imaging & Photoshop Basics