Project 1: Smoothie World

Overview

Due on Wednesday, February 12 at 8:05a. 

Project BriefComplete six weekly tutorials to design a Smoothie World web site using HTML and CSS. Each tutorial must be submitted each week.

What you must do for each assignment: Read the introduction of each lesson and the complete the tutorials. Make sure you download the project files onto your web server in a dedicated folder for this project. For more information about connecting to your web server, please read the “Three important technical materials you will need” section located at http://eng317.wordpress.ncsu.edu/projects/introduction. Your readings will come from Web design with HTML and CSS: digital classroom and the actual files for the tutorials will come from from http://www.digitalclassroombooks.com/epub/webdesign/files.html

Assignments

Assignment #2  Fundamentals of HTML, XHTML, and CSS. Due Thursday, January 23, 2014 at 8:00a. Complete Lesson 4  (download the pdf or access the e-book), download work files (.zip), and watch the video (optional) for this chapter.

Please submit this assignment to Moodle. You will only need to submit your edited index.html file located in your web04lessons on your www4.ncsu.edu web space. For example, my submission for this assignment would be http://www4.ncsu.edu/~kmpettiw/ENG317/web04lessons/index.html.

Assignment #3 Graphics, Color, and Transparency. Due Monday, January 27, 2014 at 8:05a. Complete Lesson 5 (download the pdf or access the e-book), download work file (.zip), and watch the video (optional) for this chapter.  Please note: This assignment has been changed due to our cancelled class on Wednesday, January 22. For the new assignment, you will create external style sheets for two different pages and edit the colors in your new style sheet based on our discussion and workshop on January 24.

First, locate the “index.html” file in your web04lessons you created for Assignment #2. Copy the index.html file two times. Rename one of the copied files something like “color-1.html” and the other “color-2.html”.

Next, locate your styles.css file in the web04lessons and copy it two times. Rename one of copied CSS files “color-1.css” and the other “color-2.css”. You will use these two CSS files to create two totally different color schemes for each of the two HTML pages you created (color-1.html and color-2.html).

Next, open “color-1.html” (or whatever you named your copied HTML file). You should already see your external style sheet for styles.css reference between your head tag. Add another external style directly below styles.css and change the file name to “color-1.css”.  

Next, use the colors found at  http://www.w3schools.com/html/html_colors.asphttp://www.w3schools.com/html/html_colornames.asp,  http://www.w3schools.com/html/html_colorvalues.asp or any other program to gather color codes (color name, hex code, or rgb code). Use CSS to change the color of your paragraph tags, body tags, and any other content on your color-1.html page. Follow the same procedure for color-2.html.  

Please submit the web page links (HTML only) through Moodle. Your url should look something like this, but make sure you are using the folder structure you have created on your own web space: http://www4.ncsu.edu/~kmpettiw/ENG317/web04lessons/color-1.html. 

Assignment #4 Formatting Text and Layout with CSS. Due Wednesday, February 5, 2014 at 8:05a. Complete Lesson 6 and Lesson 7 (.pdf) and, download Lesson 6 and Lesson 7 work files (.zip), and watch Lesson 6 and Lesson 7 videos (optional).

Assignment #5 Advanced CSS Layout and Browser Compatibility. Due Wednesday, February 12, 2014 at 8:05a. Please submit to Moodle. Complete Lesson 8 and Lesson 9 (.pdf) and, download Lesson 8 and Lesson 9 work files (.zip), and watch Lesson 8 and Lesson 9 videos (optional).