I am teaching a course right now to coworkers about the fundamentals of web design. I will continue to add presentation slides after I hold class sessions. I tried to add annotations to the slides so someone could understand the slides even without me presenting. Granted, this is a lot better when I am there going through the slides, but I am hoping the annotations will help serve as a good reference or a loose guide for someone to follow along.

Course Description

This course will introduce students to the major concepts involved in the world of web design as well as teach them how to work with HTML, CSS and JavaScript to create basic websites.

During each class session, we will focus on a different area of web development, incrementally building on past knowledge. At the end of the course, students will have created their own website.

Slides will be made available after each class, and suggested readings will be presented as well to help students hone their skills outside of class.

Class 0: Introduction to web design and the languages of the web

• The evolution of web design and web languages in tandem with browser evolution
• Understanding Static vs dynamic, frontend vs. backend and a CMS
• Overview of how HTML, CSS, and JavaScript serve different purposes
• Getting started with local development or online hosting

Class 1: Understanding HTML

• The evolution of HTML
• Structure of an HTML document
• HTML elements and what they do (give structure and definition)
• Getting started with writing your own HTML
• The idea of content first design
• HTML5 today

Class 2: Understanding CSS and how it talks to HTML

• CSS controls styling and positioning
• CSS talks to HTML through different selectors
• Common selectors are class, id, and using the element
• Exploring a CSS document
• The components of a CSS rule (selector, declaration, property, value)

Class 3: Visualizing the power of CSS and understanding inheritance and specificity

• Visualizing the power of CSS with the CSS Zen Garden
• Understanding CSS inheritance and specificity
• Basic positioning with floats

Class 4: Sizing elements with margins, padding and the box model

• The difference between block and inline elements and how we can identify them with browser tools
• Margins and padding as a metaphor for the Cuban Missile Crisis
• How the CSS box model is calculated