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.

May 18

Dharma Yoga Responsive HTML and CSS Website Tutorial

OBJECTIVE: Use HTML5 and CSS3 to build a responsive website

May 14

Insert another script

Unit 5 Module 2 Lesson 6: Building a Custom Video Player

May 11

HTML Test 1

May 7

Insert a javascript game

April 26

Quiz on Unit 5 Module 1 Lesson 1: Client-side vs. Server-side Scripting

April 25

Unit 5 Module 2 Lesson 2: Javascript Errors and Debugging

Unit 5 Module 2 Lesson 3: Building a JavaScript Clock Part 1

Unit 5 Module 2 Lesson 4: Building a JavaScript Clock Part 2

Unit 5 Module 2: Lesson 5: Using Javascript to Hide and Show Content

April 24

CSS Test 2

Unit 5 Module 2 Lesson 1: Using JavaScript to Show an Alert

April 23

Unit 5 Module 1 Lesson 1: Client-side vs. Server-side Scripting

Apr 12

Unit 4 Module 4 Lesson 1: Selection Tools

Unit 4 Module 4 Lesson 2: Layer Effects and Blending Overview

Unit 4 Module 4 Lesson 3: Background Images

Apr 10

Remake one of the following images using Photoshop

Mar 29

Remake your choice of the Photoshopped images

Mar 26

CSS Test 2

Mar 22

Make at least three icons and a favicon for your website

Mar 16

Unit 4 Module 3 Lesson 1: Basic Shapes and Colors

Unit 4 Module 3 Lesson 2: Working With Layers

Unit 4 Module 3 Lesson 3: Optimizing GIF Images

Unit 4 Module 3 Lesson 4: Creating a Favicon

Mar 9

HTML Test 3

Use the code below to replace the code of your stylesheet.

UNIT 4 Module 2 Lesson 1: Understanding Web Graphics

UNIT 4 Module 2 Lesson 2: Acquiring Images for Web Graphics

UNIT 4 Module 2 Lesson 3: Cropping and Resizing

UNIT 4 Module 2 Lesson 4: Adding Images to Your Web Page

Mar 6

New login information for FTP

Mar 2

UNIT 3 Module 7 Lesson 1: Reflections

UNIT 4 Module 1 Lesson 1: Introduction to Web Graphics

UNIT 4 Module 1 Lesson 2: Copyright Law and Graphics on the Web

Feb 27

UNIT 3 Module 6: Page Layout Techniques

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

Test

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**/
body{
color: rgba(255, 255, 255,1);
font-size: 12px;
line-height: 14px;
background-color: #000000;
}

.wrapper{
padding: 5px;
}

.header{
background-color: rgba(131, 0, 131, 1);
}
.left{
background-color: rgba(0, 0, 0, 1);
}
.right{
background-color: rgba(255, 0, 0, 1);
}
.footer{
background-color: rgba(0, 147, 255, 1);
}

.header h1{
font-size: 10px;
}

img{
width: 95%;
height: auto;
float: none;
clear: both;
}

}

Sep 26

Media Query

Sep 25

Footer

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.

Aug 28

Intro/Requirements

Syllabus: Take home and return it signed

Build your index page in Brackets