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.

Nov 21

sampleCreate a new 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.

  • 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">
    <!--
    body{
    font-size: 14px;
    color: #FFFFFF;
    background-color: #000000;
    }
    a:link {
    color: #FFFFFF;
    }
    a:visited {
    color: #FFFFFF;
    }
    a:hover {
    color: #0000FF;
    }
    a:active {
    color: #FFFFFF;
    }
    -->
    </style>

  • Type
    • </head>

  • Type
    • <body>

Aug 28

Intro/Requirements

Syllabus: Take home and return it signed

Build your index page in Brackets