Web Design 1 Assignments (subject to change)

All assignments and your personal web page must be saved to your network folder in order to be graded.  Assignments should be put it your personal folder.  Your site should be put in the folder named mysite.  Files you need for your assignments are in the folder named student_files.

Feb 20

Unit 3 Module 5: The Role of ID and Class in CSS

Feb 14

UNIT 3 Module 4: The Box Model in CSS

UNIT 3 Module 4: The Box Model in CSS

You must make the recommended changes to the Accessibility page

UNIT 3 Module 4: The Box Model in CSS

Feb 7

Modify your personal site

Feb 1

UNIT 3 Module 3 Lessons 1-2: Typography in CSS

Jan 31

UNIT 3 MODULE 2 Lesson 1: Understanding Color in CSS

UNIT 3 MODULE 2 Lesson 2: Applying Color in CSS Overview

Jan 23

Create a 7th page and update all pages

Jan 16

Create an external stylesheet

Jan 4

UNIT 3 Module 1: Introduction to Cascading Style Sheets

Jan 2

Replace video

OBJECTIVE: Create CSS styles to modify appearance of web pages

Dec 13

Insert a video into a new page IN YOUR SITE.

Dec 12

Unit 2 Module 7 Lesson 1: Reflections


Dec 11

Unit 2 Module 6: HTML Video Lessons 1-2

Dec 7-8

Unit 2 Module 5 Lesson 1: Creating a Data table

Dec 6

Unit 2: Module 4: Lessons 1-3: Creating Links

Dec 5

Unit 2: Module 3: Lesson 1-2: Lists

Dec 4

Unit 2 Module 2 Lesson 3: Common Tags

Nov 30

University of Washington Web Development

Nov 27

sampleCreate a new background

Create another background

Nov 20

Add four classes to your stylesheet

Nov 14

Change images so they display using a class rather than a table and it works well for mobile.

Nov 9

Create another page: Page 5

Nov 6

Create a pictures page with nine images in a table

Oct 30

Create another page: Page 3

Objective: Create pages using html and CSS.

Oct 26

DUE: Re-Create your links page

Oct 23

Re-Create your links page

Oct 20

DUE: Create a new responsive page


Oct 12

Create a new responsive page

Mobile Preview

index for w3schools

Desktop Preview

index for w3schools

Oct 9

Create a links page

Oct 5-6

Oct 4-5

Add the paragraph classes to the media query

Oct 2

Add a class for the paragraphs

Sep 28-29

Copy and paste the code below to ensure we all have the same media query

@media only screen and (max-width: 500px) {
.header, .left, .right, .footer {
display: block;
width: 100%;
/**add some other properties**/
color: rgba(255, 255, 255,1);
font-size: 12px;
line-height: 14px;
background-color: #000000;

padding: 5px;

background-color: rgba(131, 0, 131, 1);
background-color: rgba(0, 0, 0, 1);
background-color: rgba(255, 0, 0, 1);
background-color: rgba(0, 147, 255, 1);

.header h1{
font-size: 10px;

width: 95%;
height: auto;
float: none;
clear: both;


Sep 26

Media Query

Sep 25


Sep 18

Create additional div tags

Sep 15

Add the following to the wrapper class:

Fix the paragraph appearance. Add or change the inline styles so it displays correctly.

Adjust the properties to your liking. Show me when you are done.

Sep 13

Add a wrapper div to your home page.

Sep 11

Copy and paste the code for the paragraph with the inline style.

Sep 8

Download a background image for the page

Sep 7

Insert images on your page

Sep 5

Insert hyperlinks

Aug 28-Sep 6

Notes on code for your home page

Start your own site

Build your index page in Brackets

Below is a a preview of the page and the code.

Objective: Create pages using html and CSS.

  • This will be completed step-by-step.
  • Brackets can be found under Start, Programs and Accessories menu. 
  • Save the file in the folder with your name in your mysite folder as index.html.

  • The following code is the two first lines of each of your pages. Copy and paste this. It will replace <html>
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
  • Type <head>

  • Copy and paste this.
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • Type
    • <title>The name of your Page</title>

  • Copy and paste the following code.

    <style type="text/css">
    font-size: 14px;
    color: #FFFFFF;
    background-color: #000000;
    a:link {
    color: #FFFFFF;
    a:visited {
    color: #FFFFFF;
    a:hover {
    color: #0000FF;
    a:active {
    color: #FFFFFF;

  • Type
    • </head>

  • Type
    • <body>

Aug 28


Syllabus: Take home and return it signed

Build your index page in Brackets