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.

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