Schedule
This schedule maps out what we are covering in class each week and what work we are starting that day. It is very subject to change as we go along in class.
If you want to know what is due for next class, check here.
Week 1 [8.27]
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 build a web page.
Lessons
- 1.1: Introduction
- 1.2: Basic HTML
Starting
- E1: 20 Questions
- P1: Start
Digital References
- Learning Web Design: Chapters 1–5
- Interneting is Hard: Introduction & Basic Web Pages
Week 2 [9.3]
This week we will take a look at the primary visual structure of the web, grids. We will learn about creating our own grids and how to use those grids to layout content. We will also go over the concept of space as it relates to design.
Lessons
- 2.1: Grids & Spacing
Starting
- E2: Make the Grid
Digital References
None
Week 3 [9.10]
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. We will also introduce the thing that makes the internet the internet, links.
Lessons
- 3.1: Organization, Naming, and Planning
- 3.2: Links
- 3.3: External Style Sheets
Starting
- E3: Organization and Naming
- E4: Site Map
- E5: Wireframes
Digital References
- Learning Web Design: Chapters 6, 11, 12, & 13
- Interneting is Hard: Links and Images & Hello CSS
Week 4 [9.17]
Much of the information on the internet is gathered through reading. As designers we want to be able to present that information in a clear and understandable way so this week we are talking about hierarchy and typography.
Lessons
- 4.1: Hierarchy & Typography
Starting
- E6: Type on Screen I
- P2: Start Start
Digital References
- Interneting is Hard: Web Typography
Week 5 [9.24]
This week we will cover how to add and style images and how to target more specifically with CSS selectors.
Lessons
- 5.1: Images
- 5.2: CSS Selectors
Starting
Digital References
- Learning Web Design: Chapters 7, 11, & 12
- Interneting is Hard: CSS Selectors & Web Typography
Week 6 [10.1]
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.
Lessons
- 6.1: Responsive Design
Starting
Digital References
- Learning Web Design: Chapters 17
- Interneting is Hard: Responsive Design & Responsive Images
Week 7 [10.8]
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 talk about the different ways to layout pages with HTML and CSS and we will focus on one of those — floats.
Lessons
- 7.1: The Box Model
- 7.2: Floats
Starting
- E9: Patterns
Digital References
- Learning Web Design: Chapters 14 & 15
- Interneting is Hard: The Box Model, Floats & if your looking for more flexibility in your layouts Flexbox
Week 8 [10.13]
10 minute individual midterm meetings scheduled through the link in your email and posted in Slack.
Week 9 [10.22]
We will continue our discussion on floats and expand what we are able to build using them.
Lessons
- 7.2: Floats
Starting
- E10: Layouts
Digital References
- Learning Web Design: Chapters 14 & 15
Week 10 [10.29]
Using CSS we can position elements exactly where we want them to appear on screen or in relation to other elements. This week we will cover four different kinds of positioning and use them to make the browser a drawing tool.
Lessons
- 8.1: Advanced Positioning
Starting
- E11: CSS Drawing
Digital References
- Learning Web Design: Chapters 15
- Interneting is Hard: Advanced Positioning
Week 11 [11.5]
No class this week.
Lessons
- None
Starting
- None
Digital References
- None
Week 12 [11.12]
This week we will cover navigation design and how to make those designs come to life on the web.
Lessons
- 9.1: Navigation
Starting
- E12: Type on Screen II
Digital References
- Learning Web Design: Chapters 6
Week 13 [11.19]
So far we have covered how to style pages with CSS but those styles have generally remained static. This week we will expand our skills in CSS and learn how to animate our designs.
Lessons
- 10.1: CSS Animations
Starting
- E13: CSS Animations
Digital References
- Learning Web Design: Chapters 18 & 19
Week 14 [11.26]
No class, Thanksgiving Break.
Week 15 [12.1]
We made it to the end! Today we will complete our final exercise in class.
Lessons
- None
In Class
- E15: Programmer and Computer
Digital References
- None