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
- Google: Mobile-Friendly Test
- imgix Page Weight Tool
- 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
- Google Load Time Benchmarks
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
- 1/16/2024 - Instructor Introduction (ppt)
- 1/16/2024 - Course Introduction
- 1/18/2024 - Definitions/File Management
- 1/23/2024 - HTML Review
- 1/23/2023 - Brackets/HTML5
- 1/25/2024 - Digital Imaging & Photoshop Basics
- 1/30/2024 - CSS
- 2/6/2024 - Audience Analysis
- 2/15/2024 - Typography
- 3/19/2024 - Responsive Design
- 3/21/2024 - Design
- 3/26/2024 - Navigation
- 3/28/2024 - Web Analytics
- 4/2/2024 - Load Time
- 4/2/2024 - WebP
- 4/4/2024 - Search Engine Optimization
- 4/9/2024 - Usability
- 4/11/2024 - Accessibility
- 4/11/2024 - Test Review