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 [1.25]
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: Linking Narrative
Digital References
- Learning Web Design: Chapters 1–5
- Interneting is Hard: Introduction & Basic Web Pages
Week 2 [2.2]
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 [2.9]
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 [2.16]
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: Website for a Blank
Digital References
- Interneting is Hard: Web Typography
Week 5 [2.23]
This week we will cover the parts and designs for navigation, how to add and style images, and how to target more specifically with CSS selectors.
Lessons
- 5.1: Navigation
- 5.2: CSS Selectors
Starting
Digital References
- Learning Web Design: Chapters 6, 11, & 12
- Interneting is Hard: CSS Selectors & Web Typography
Week 6 [3.2]
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: Chapter 17
- Interneting is Hard: Responsive Design & Responsive Images
Week 7 [3.9]
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 one way to layout pages with HTML and CSS — 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 try Flexbox
Week 8 [3.16]
10 minute individual midterm meetings scheduled through the link in your email and posted in Slack.
Week 9 [3.23]
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 [3.30]
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: Positioning
Starting
- E11: CSS Drawing
- P3: Single Serve or Build Project 2
Digital References
- Learning Web Design: Chapters 15
- Interneting is Hard: Advanced Positioning
Week 11 [4.6]
This week we will cover best practices for designing and building navigation.
Lessons
- 9.1: Images
Starting
- E12: Type on Screen II (Optional) –>
Digital References
- Learning Web Design: Chapters 6
Week 12 [4.13]
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
Digital References
- Learning Web Design: Chapters 18 & 19
Week 13 [4.20]
HTML and CSS are great for building and styling websites but they are not great at creating interaction or dynamic changes. This is where JavaScript and jQuery come in and this week we will cover some basic concepts of how to add simple interactions to a website.
Lessons
- 11.1: JavaScript and jQuery
Starting
- E14: jQuery
Digital References
- Learning Web Design: Chapters 21 & 22
Week 14 [4.27]
We made it to the end! Today we will complete our final exercise in class.
Lessons
- None
In Class
Digital References
- None