Web Design Module

Objectives:

·        Familiarize yourself with web design terminology and industry terms.

·        Demonstrate the foundations of starting an HTML5 compliant web page.

·        Develop a firm understanding of the how to properly use colors with HTML5 code.   

·        Construct HTML5 compliant web page that includes graphic and multimedia elements.

 

1.     Complete the pre-test questionnaire found here

 

2.     Introduction to the unit, and how to use notepad ++ Video

 

3.     Watch the video The art of web design (7 min). This will give an overview about website design and introduce you to the field.

 

4.     Complete the terminology / Vocabulary questions. This will expose the student to industry terms and vocabulary that will assist you when creating your own web pages. Each group may turn in only 1 copy, but make sure everyone in the group has their name on it.

 

5.     Next you are going to work through some video tutorials. That will help you create a web page.  At the end of each tutorial I am going to have a personalized assignment for you to finish. In your network folder or flash drive create a folder called “web design module” Inside that folder create 6 new folders. Name them 1,2,3,4,5. Watch the video tutorial and follow along. Type the code into your own text editor. You will be using Note Pad ++ remember to use the live preview plug in. Save your page when you are done.  

 

Video tutorial 1     Web page set up, tags, and some simple content

Assignment for tutorial 1: Make a page complete with your own class schedule. Save the web page into folder 1 and leave it there for the instructor to check off.  View my sample.

 

6.     Video tutorial 2     Heading tags, simple css and introduction to colors

Assignment for tutorial 2: Make a web page using the <h1> through <h7> tags.  Make the page about your favorite restaurant and what you like to eat there.  Use CSS to color your text.  You need at least a heading and 4 things to eat or drink at the restaurant. View my sample.

 

7.     Video tutorial 3     Pictures, sizing, and hyperlinks

Assignment for tutorial 3:  Make a web page complete with pictures. You can use your existing web pages, but just build on and change them. You need to make a page that tells 3 things about yourself that someone might not know. You need to have a picture with each one.  Size your pictures appropriately and use the width and height attributes. All your pictures should be the same size. Give a short description of the picture. You also need to add a working hyperlink somewhere on your page. View my sample.

 

8.     Video tutorial 4     Audio and Video

Assignment for tutorial 4:  You can use the same webpage from assignment 3, but save it in your assignment 4 folder, and change the file name. All you will be doing is adding 1 audio element, and one video element somewhere in the page. You can use your own audio and video, but I have some samples to use. Download these files into your folders by right clicking and click save link as. Save the file in your folder. View my sample.

 

Audio Samples:       Song 1               Song2        Song3           Song4                       
Video Samples:       Vince Carter dunk    Jack Links commercial     Kid freaks out

 

9.     Video tutorial 5     Video Colors1         Video Colors2         Hexadecimal colors and fonts

Assignment for tutorial 5:  These concepts were not covered very well or at all in the video series that I was using so this is an extra tutorial on colors and fonts. The assignment you need to complete is to make a web page complete with a background color, 6 different colors with a description, and 6 different fonts with a description.  View my sample.

 

10.                         Write your reflection paper.

11.                         This concludes the Web Design module.