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. This is the folder for this class, not the one provided by the school district. Your site must be saved in the folder named mysite. You must show assignments to me in class for grading.

OFFLINE Distance Learning

If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. These assignments are posted below, but you must print the material. Scroll down to OFFLINE DISTANCE LEARNING.

Google Hangouts/Meet-real time one-on-one help

Google hangouts-real time help (Not an assignment)

To get real-time help try one of the following. Sorry, I don’t want to use Zoom. I cannot guarantee I will be available the second you send a request. I may set up certain hours for certain classes in the future if needed. This must be done through your school gmail account for accountability.

Code.org (Alternate assignment to Dharma videos offline assignments are listed below in the Dharma videos)

 

Go to https://studio.code.org/home

Distance Learning May 18 - 29 (Dharma)

Final

Distance Learning May 11-15 (Dharma)

Make sure you complete the work from the previous weeks which are below this....SCROLL DOWN.

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Video 7

Distance Learning May 4-8 (Dharma)

Make sure you complete the work from the previous weeks which are below this....SCROLL DOWN.

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Video 6

Distance Learning April 27-May 1 (Dharma)

Make sure you complete the work from the previous weeks which are below this....SCROLL DOWN.

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Video 5

Distance Learning April 20-24 (Dharma)

Make sure you complete the work from the previous weeks which are below this....SCROLL DOWN.

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Video 4

Distance Learning April 13-17 (Dharma)

Make sure you complete the work from the previous weeks which are below this....SCROLL DOWN.

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Video 3

Distance Learning April 6-10 (Dharma)

ASSIGNMENT FOR THOSE WITH A COMPUTER

Dharma Yoga Responsive HTML and CSS Website Tutorial

SUBMITTING YOUR WORK

Dharma Yoga Responsive HTML and CSS Website Tutorial

You need to follow the steps below (WEEK 1) to install Brackets and FileZilla. Both of these are free.

Dharma Video 1

Dharma Video 2

Distance Learning Mar 16-27

Assignment in Google Docs

Complete in Google Classroom

The following need to be done to work at home after spring break

OFFLINE Distance Learning May 4 - 29

ASSIGNMENT IF YOU DO NOT HAVE A COMPUTER: If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. Below is a link to the same papers you can find in the office, but you must print the material.

OFFLINE Distance Learning April 27 - May 1

ASSIGNMENT IF YOU DO NOT HAVE A COMPUTER: If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. Below is a link to the same papers you can find in the office, but you must print the material.

OFFLINE Distance Learning April 20 - 24

ASSIGNMENT IF YOU DO NOT HAVE A COMPUTER: If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. Below is a link to the same papers you can find in the office, but you must print the material.

OFFLINE Distance Learning April 13 - 17

ASSIGNMENT IF YOU DO NOT HAVE A COMPUTER: If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. Below is a link to the same papers you can find in the office, but you must print the material.

OFFLINE Distance Learning April 6 - 10

ASSIGNMENT IF YOU DO NOT HAVE A COMPUTER: If YOU DO NOT have a connected computer at home you must get the offline assignments from the office. They involve weekly tests and research papers. Below is a link to the same papers you can find in the office, but you must print the material.

ASSIGNMENTS BELOW HERE WERE PRIOR TO SCHOOL CLOSURE

 

Apr 17 (previously Mar 15)

Photoshop yourself

Apr 9 (previously Mar 7)

Remake one of the following images using Photoshop

Apr 7 (previously Mar 5)

Evaluate Web 2 Web Sites

Apr 3 (previously Mar 1)

Make at least three icons and a favicon for your website

Mar 29 (previously Feb 28)

TAKE CSS Test 2

Mar 26 (previously Feb 25)

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 20 (previously Feb 19)

REVIEW AND RETAKE CSS Test 1

Mar 16 (previously Feb 15)

CSS Test 1

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 11 (previously Feb 11)

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

Mar 6 (previously Feb 6)

UNIT 3 Module 6: Page Layout Techniques

Mar 4 (previously Feb 4)

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

Mar 2

QUIZ: Make a table with formatting applied with CSS exactly like the example below

Feb 27 (previously Feb 1)

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 26 (previously Feb 1)

Inside the newportfolio folder

HTML Test 1

CSS Test 1

Feb 19-21 (previously Feb 7)

Modify your personal site

Feb 13 (previously Jan 28)

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

Feb 12 (previously Jan 18)

UNIT 3 MODULE 2 Lesson 1: Understanding Color in CSS

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

Feb 6 (previous Jan 9)

Create a 8th page and update all pages

Feb 4 (previous Dec 20)

Create an external stylesheet

 

January 30 (previous Dec 12)

UNIT 3 Module 1: Introduction to Cascading Style Sheets

Jan 24 (previous Dec 11)

Replace video

OBJECTIVE: Create CSS styles to modify appearance of web pages

Jan 22 (previous Dec 10)

Insert a video into a new page IN YOUR SITE.

Jan 21 (previous Dec 7)

Test

Jan 15-16 (previous Dec 5-6)

Unit 2 Module 6: HTML Video Lessons 1-2

Unit 2 Module 7 Lesson 1: Reflections

Jan 14-15 (previous Dec 4-5)

Unit 2 Module 5 Lesson 1: Creating a Data table

Jan 10 (previous Dec 3-4)

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

Jan 9

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

Jan 8

Unit 2 Module 2 Lesson 3: Common Tags

Jan 6

University of Washington Web Development

Unit 2 > Module 2 Lesson 2: Essential Tags

Dec 13

sampleCreate a new background

Create another background

Create another background

Last one

Dec 10

Add four classes to your styles

Dec 5

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

 

 

 

 

Dec 2

Quiz: Create another page, this should be your 6th page

Nov 20

Create a pictures page with nine images in a table

Nov 18

Create another page: Page 4

Nov 15

DUE: Create another page: Page 3

Nov 6

Create another page: Page 3

Nov 4

Create a links page

Oct 28

New seating chart

Oct 24

Make your new page responsive

Oct 23

 

 

Oct 21

Recreate index page

Mobile Preview

index for w3schools

Desktop Preview

index for w3schools

Oct 18

Recreate index page

/* Gives appearance that the two columns are same height */

.row{
background-color: #8e8e8e;
line-height: 1.5em;
}
/* Create two equal columns that float next to each other */
.column {
float: left;
padding: 10px;
width: 50%;
background-color: #8e8e8e;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

.p1{
color: #9fde4a;
font-family: fantasy;
text-decoration: line-through;
}

.pbox1{
color:#000000;
background-color: #ffffff;
text-align:center;
font-size: 1.5em;
line-height: 1.5em;
font-variant: small-caps;
font-weight: bold;
border: 1px solid #000000;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: 1em;
}

.pbox2{
text-shadow:2px 2px #000066;
color:#6f6f6f;
-webkit-text-stroke: 1px #000000;
background-color: url(assets/yankee_stadium.jpg); /*fix this*/
background-size: cover;
text-align:center;
font-size: 1.5em;
font-variant: small-caps;
font-weight: bold;
line-height: 1.5em;
border: 3px solid #000000;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: .5em;
}

Oct 17

Recreate index page

Oct 16

Recreate index page

<div class="column">
<h2>Left Side</h2>
<p class="pbox1">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>This is a normal <a href="http://google.com">hyperlink</a>.</p>
<img src="assets/1.jpg" height="auto" width="85%" alt="Picture description" title="Picture description">
</div>
<div class="column">
<h2>Right Side</h2>
<p class="pbox2">Important News!!!!!</p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>This is an email link. Contact me at <a href="mailto:email@gmail.com">email@gmail.com</a>.</p>
<img src="assets/2.jpg" height="auto" width="85%" alt="Picture description" title="Picture description">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

Oct 15

Recreate index page

<!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">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--add style after html is done-->
</head>
<body>

index2newdivs

Oct 4

Media Query

Sep 30

Add another style for a paragraph

 

Sep 25

Change an inline style to an embedded style

Sep 24

Footer

Sep 20

Join Google Classroom

Pretest: Household Credit

Sep 18

Create additional div tags

Sep 16

Add the following to the wrapper class:

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

Sep 14

Add a wrapper div to your home page.

Sep 11

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

Sep 6

Download a background image for the page

Sep 5

Insert images on your page

Aug 29-Sep 5

Insert hyperlinks

Aug 27-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 27

Intro/Requirements

Syllabus:

Build your index page in Brackets