Spring 2021 // Tuesday 10:30–1:10 & 1:30–4:10 // Online

Intro to Web Design

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

Starting

Digital References


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

Starting

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

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


Week 11 [4.6]

This week we will cover best practices for designing and building navigation.

Lessons

Starting

Digital References


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

Starting

Digital References


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

Starting

Digital References


Week 14 [4.27]

We made it to the end! Today we will complete our final exercise in class.

Lessons

In Class

Digital References