Web Design Module


·        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. Video tutorial 6
            Assignment for tutorial 6: In activity 6 you are going to learn about CSS, Styles, centering text, images, and border properties. The goal will be for you to make your own parking sign.             View my sample


10.                         Write your reflection paper.

11.                         This concludes the Web Design module.