Tools
- Blank HTML5 Page (Generates valid HTML5 markup)
- Blind Text Generator (Dummy text for design)
- Lettercount.com (Check line lengths)
- Lighthouse (Great google tool)
- Web Page Test (Test page speed)
- TitleCase - Text Conversion Solutions
- Google PageSpeed Insights
- Google: Mobile-Friendly Test
- Google Test My Site (Test mobile speed)
- Squoosh (Compress images, create WebP)
- Compress or Die (jpg)
- Compress or Die (png)
- Cloudinary.com Image Analysis Tool
- 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
- IE NetRenderer
- WebAIM Color Contrast Checker
- Firefox Plugin Contrast Checker
Examples
- CSS List Navigation Example
- CSS Centering
- WebP Examples
- Simple CSS Horizontal Dropdown Menu
- HTML5 Multimedia
Reference documents
- Brackets/Filezilla Installation
- 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
- 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
- Photoshop Exercise #1
- Layout Exercise #1
- Layout Exercise #2
- Layout Exercise #3
- Layout Exercise #4
- Layout Exercise #5
- Layout Exercise #6
- Layout Exercise #7
Readings
- 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
- Myth #1: People read on the web
- Read Why Web Users Scan Instead of Reading
- 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
- 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
- What is Web Accessibility?
Lecture notes
- 1/20/2021 - Introduction
- 1/25/2021 - Definitions/File Management
- 1/25/2021 - HTML Review
- 1/27/2021 - Organization/Publishing
- 1/27/2021 - Brackets/HTML5
- 2/1/2021 - Digital Imaging & Photoshop Basics
- 2/8/2021 - CSS
- 2/15/2021 - Audience Analysis
- 2/22/2021 - Two Column Layout
- 3/1/2021 - Typography