Introduction to Web Design

Tools and Resources

Code Editor

• Sublime Text
• Visual Studio Code

Tools

• Google Chrome
• FileZilla

References

• W3Schools: CSS Rules List
• W3Schools: HTML Elements List

Week 1

Concept

• Before We Begin
• Interactivity, Digital Publishing, and the Web
• Web Development: HTML and CSS

Guide

• Page 1: Workspace Setup
• Page 2: Website Elements via HTML
• Page 3: More HTML and Hyperlink
• Page 4: Website Styling via CSS
• Page 5: Publishing Website via FileZilla

Week 2

Concept

• Briefly on Usability
• Web Development: Box Model, <div> and CSS Reset

Guide

• Page 1: Workspace Setup
• Page 2: CSS Reset
• Page 3: Layout Construction via HTML
• Page 4: Layout Styling via CSS
• Page 5: Content Elements via HTML/CSS

Week 3

Concept

• Web Development: Image, Type, and Multimedia

Guide

• Page 1: Getting Started
• Page 2: HTML and CSS
• Page 3: Custom Typefaces
• Page 4: Icons
• Page 5: Video Player and Social Media

Week 4

Concept

• Web 2.0 and Mashup Applications
• Web Development: Accessibility, SEO, and Multipage

Guide

• Page 1: Microsite Setup
• Page 2: Page Clones
• Page 3: Google Analytics
• Page 4: Event Tracking (Advanced)

Week 5

Concept

• Design Showcase: Typefaces, Influencers, and Trends
• Web Development: CSS3 and Responsive Design

Guide

• Page 1: Getting Started with Responsive Design
• Page 2: Inspect Element / Device Toolbar
• Page 3: Responsive Design
• Page 4: Device Testing

Week 6

Concept

• Beyond HTML and CSS

Guide

• Page 1: Setup
• Page 2: Layout Grid
• Page 3: Components
• Page 4: Plugins

Additional Content

Week 1 - Recommended Readings

• 5 Stages in the Design Thinking Process
• Information Architecture - Basics for Designers
• A Collection of Inspiring Sitemaps and User Flow Maps

Week 2 - Recommended Readings

• A Beginner’s Guide to Wireframing
• The Anatomy of a Landing Page
• Personas – A Simple Introduction
• ABC Nightline - IDEO Shopping Cart

Week 3 - Recommended Readings

• 9 Killer Examples of Personal Branding Websites
• The Brand Called You

Week 4 - Recommended Readings

• Figma: How to wireframe
• Coursetro: Figma Tutorial - An Introduction
• 20 inspiring web and mobile wireframe examples

Week 5 - Recommended Readings

• How to make websites accessible
• Usability Evaluation Basics
• How to Evaluate a Website

Recommended Reference Books

• Layout Essentials: 100 Design Principles for Using Grids
• The Web Designer's Idea Book: The Ultimate Guide To Themes, TrendsStyles In Website Design
• Universal Principles of Design
• 100 Diagrams That Changed the World: From the Earliest CavePaintings to the Innovation of the iPod
• Paul Rand: A Designer's Art
• HTML & CSS: The Good Parts