Schedule
Week 1
This week we’ll start to get to know a bit about each other and spend a little time reviewing how this course will work. Then we’ll move onto an overview of the programs, tools, and languages we will be using. We will also look at a few basic HTML elements and design concepts.
Lessons
- 1.1: Introduction
- 1.2: Basic HTML
- 1.3: Grids & Spacing
Exercises
- E1: 20 Questions
- E2: Make the Grid
Project
- P1.1: Concept, content, and reference collection
Digital References
- Learning Web Design: Chapters 1–5
- Interneting is Hard: Introduction & Basic Web Pages
Week 2
This week we’ll go a little further into HTML and begin to introduce CSS. We will look at best practices for folder and file naming, organization, and structure as well as the first steps of planning and designing a website.
Lessons
- 2.1: Organization, Naming, and Planning
- 2.2: Links
- 2.3: External Style Sheets
- 2.4: Images
Exercises
- E3: Organization and Naming
- E4: Site Map
- E5: Wireframes
Project
- P1.2: Site map, wireframes, and folder structure
Digital References
- Learning Web Design: Chapters 6, 7, 11, 23, & 24
- Interneting is Hard: Links and Images & Hello CSS
Week 3
Every element in HTML is a rectangular box and the box model will help us understand how those elements get drawn on the screen. We will also advance our knowledge of CSS and talk about hierarchy and typography on the web.
Lessons
- 3.1: The Box Model
- 3.2: CSS Selectors
- 3.3: Hierarchy & Typography
Exercises
- E6: Type on Screen I
- E7: seven-principles.txt
Project
- P1.3: First 1440px designs, homepage content populated
Digital References
- Learning Web Design: Chapters 12–14
- Interneting is Hard: The Box Model, CSS Selectors, & Web Typography
Week 4
This week we are going to catch our breath and review what we talked about in the previous weeks.
Lessons
- No new lessons
Exercises
- No new exercises
Project
- P1.4: Second 1440px designs, begin to style homepage, content in other pages
Digital References
- Review previous references
Week 5
There are many different ways to layout pages with HTML and CSS. This week we will talk about one of those — floats.
Lessons
- 4.1: Floats
Exercises
Project
- P1.5: Third 1440px designs, full site styles, functioning navigation
Digital References
- Learning Web Design: Chapters 15 & 16
- Interneting is Hard: Floats & if your looking for more flexibility in your layouts Flexbox
Week 6
Responsive design is a key element of designing for the web today. This week we will introduce the concept and coding principles behind getting a website to show up well on a narrow phone screen and a wide desktop monitor. We will also talk about navigation design and coding.
Lessons
- 5.1: Responsive Design
- 5.2: Navigation
Exercises
- E10: Visualizing Responsiveness
- E11: Type on Screen II
Project
- P1.6: First 320px designs, homepage responsive
Digital References
- Learning Web Design: Chapters 6 & 17
- Interneting is Hard: Responsive Design
Week 7
This week we will expand our knowledge of HTML and CSS by covering a few advanced ideas.
Lessons
- 6.1: Advanced Positioning
- 6.2: Advanced CSS
Exercises
- E12: CSS Drawing
- E13: Programmer and Computer
Project
- P1.7: Second 320px designs, All pages responsive
Digital References
- Learning Web Design: Chapters 15 & 23
- Interneting is Hard: Advanced Positioning & Responsive Images
Week 8
In our final week we will touch on JavaScript and jQuery. Both JavaScript and jQuery open up worlds of new possibilities to the websites we are building but we will look mainly at introducing interaction to the sites.
Lessons
- 7.1: JavaScript and jQuery
- 7.2: Plugins
Exercises (optional)
- E14: jQuery
Project
- P1.8: Project complete. 4 final desktop designs at 1440px as pngs, 4 final mobile designs at 320px as pngs, 1 working website that is as close as possible to your desktop designs.
Digital References
- Learning Web Design: Chapters 22