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.

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