Description
Web Site Project
Purpose: To design, develop, and publish a web site using recommended design practices. Your
web site will contain a home page and at least six (but no more than ten) content pages. You are
required to create an external style sheet (.css file) that configures text, color, and page layout.
(No font tags, embedded CSS, or inline CSS may be used.)
Required components of the pages include:
?
?
?
?
?
?
?
?
?
Appropriate meta tags
One page utilizing tables effectively to display tabular information
One e-mail hyperlink
One external hyperlink
Consistent banner logo area
Consistent main navigation
Association with external style sheet (.css file)
One page containing a form with at least three elements
YouTube video, CSS image gallery, or CSS Transition
Workshop One:
Website Project ? Stage 1: Topic Approval
Getting Started:
This is the first portion of the Web Project. This project will require you to demonstrate
knowledge of all skills introduced throughout the course. A description of the Web
Project is found in Chapter 5 of your textbook, and more details are on the Website
Project Description document located in Resources.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Select a topic for your website project and answer the following questions in a onepage paper:
a. What is the purpose of the website? (State the reason you are creating the
website.)
b. What do you want the website to accomplish? (List the goals you have for
the website.)
c. Who is your target audience? (Describe your target audience by age,
gender, socioeconomic characteristics, etc.)
d. What opportunity or issue is your website address?
e. What type of content may be included on your website?
3. List the URLs for two related or similar websites and explain how these sites relate
to your site.
4. This document should be in APA format and references should be properly cited.
5. When you have completed your assignment, save a copy for yourself and submit a
copy using the Assignment submission link by the end of the workshop.
Assessment Criteria:
50
Due by the end of the workshop
1. All requirements met? 7 points per requirement
? Purpose of website
? Goals for website
? Target audience
? Opportunity or issue being addressed
? Type of content to include
2. One page double-spaced Microsoft Word document in APA format using proper
spelling, grammar, etc. – 5 points
List the URLs for two related or similar sites and explain how they relate to your site. 10 points
Website Project – Stage 2 ? Initial Home Page Structure
Getting Started:
In exercise 1.4 you created a page from scratch for JavaJam. In this assignment you will
create the initial home page for your website project. You can follow the structure of
exercise 1.4 or you can look ahead to chapter 6 in the text book to see other ways to
structure your page.
W3schools provides a clear way in which you can structure your pages. Visit
https://www.w3schools.com/html/html_layout.asp for more information.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Create a folder on your computer and title it ?project?. This is where you will store
all of the files related to the website project you are building throughout this course.
When submitting your project assignments you will be zipping this folder up with all
the files contained and uploading it into the assignment folder for grading.
3. Create the initial home page structure for your website project. Include the basic
elements of a html page as noted in chapter 2 in the section titled Head, Title,
Meta, and Body Elements.
Page Title Goes Here
Review the hands on exercises from Chapter 2 or visit
https://www.w3schools.com/html/html_layout.asp for help in creating your first
page. Save the file as Index.html inside you project folder you created in step 2. You
will work on styling the page in Workshop Two. The initial webpage should include
the following elements and attributes:
Html, head, doctype, lang, charset, header, nav, footer, title.
4. Ensure you have created content related to your topic selected in 1.6.
5. Upload the your project folder with the assigned home page in a zip file to the
assignment link by the end of the workshop. This assignment is the continuation of
the project work for your completed website as started in 1.6.
Assessment Criteria:
50
Due by the end of the workshop
1. The basic elements of a website are present and include: – 4 points per
requirement
Html
Head
Doctype
Lang
Charset
Header
Nav
Footer
Title
2. File is saved as index.html and zipped in the project folder ? 4 Points
3. Page structure is correct, tags are opened and closed without validation errors.
? 10 points
Workshop Two:
Website Project – Stage 3: Create a CSS Stylesheet
Getting Started:
CSS provides a great means to style html pages with ease and granular control. This
assignment requires a basic understanding of CSS and will potentially requiring working
through the workshop two exercises to ensure the understanding exists.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Create an external style sheet that will be used to style your website project pages.
You will only need to create one style sheet and then utilize different elements
associated to html tags to style different pages.
3. Associate the style sheet to your Home Page you create in workshop one
4. Ensure you have style a minimum of five different elements of you html page such
as your navigation, background color, font colors, etc..
5. See section 3.8, “Using External Style Sheets,” of Chapter 3 in your textbook for
information regarding using external style sheets.
6. Validate your style sheets by using the W3C CSS Validation Service.
7. When you have completed your assignment, save a copy for yourself and submit
your zip file to your instructor by the end of the workshop.
Assessment Criteria:
50
Due by the end of the workshop
1. The style sheet should include a minimum of 5 styled elements such as
background color, font color, navigation structure
2. File is saved as style.css and zipped in the project folder which includes the
needed html page
3. Validate all of your pages using the validator tools at https://validator.w3.org/
to ensure correct/valid code
4. Page structure is correct, tags are opened and closed without validation errors.
Website Project – Stage 4 ? Create Website Map and Wireframes
Getting Started:
In workshop one you developed you initial homepage design. Building on the ideas
developed from the topic and homepage you will complete a flowchart and wireframe
assignment for the all of the pages, including your homepage, in your website project.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Website Project Site Map
a. Using Word, PowerPoint, or https://www.lucidchart.com/pages/ , draw a
flowchart (storyboard) of your website that shows the hierarchy of pages
and relationships between them.
b. Include each page in your flowchart (storyboard).
c. See section 5.2, “Website Organization,” in Chapter 5 of Web Development
and Design Foundations with HTML 5 for examples of site flowcharts.
3. Website Project Page Layout Design
a. At the end of Chapter 5, look at Web Project -> Hands-On Practice Case #3,
“Web Project Page Layout Design.”
b. Use the drawing feature of Word, another graphics application, or pencil
and paper to create wireframe page layouts for the home page and content
pages of your site. Note: If you elect to draw the page layouts, then you
must scan them and put them into either a Word or PDF document. You will
need a wireframe image for each of your website project pages.
c. Indicate where the logo, navigation, text, and images will be placed.
d. Save this file as Layout Design or a similar name and make sure that you
have included all relevant information such as your name, the assignment
number, etc.
4. Put your wireframe design document and your flowchart in a zip file.
5. When you have completed your assignment, save a copy for yourself and submit
your zip file using the Assignment submission link by the end of the workshop.
6. art
Example:
7. Wireframe Example:
8.
Assessment Criteria:
50
Due by the end of the workshop
1. There should be a flowchart that includes each page of your website project
2. There should be a wireframe image for each page of your website project
Items on each wireframe are labeled and indicate what you are going to
place in each location
Website Project – Stage 5: Create website project html pages
Getting Started:
When creating websites, it is beneficial to ensure that each page maintains the structure
of the other pages for visitors to have a consistent experience on your site. In this
assignment you will be copying the homepage you created in Workshop One and
copying it into multiple pages to fill out the number of pages you indicated in your
wireframes in 2.5.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. In your text editor, copy the code from your homepage into a new HTML page.
3. Rename that page to one of the pages listed in your wireframes from Assignment
2.5.
4. Repeat this process for each of the pages you have listed in your wireframes.
5. In later workshops you will add different content to the main section of the pages.
9. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code
Once you have completed each page place all the HTML pages and the CSS
style sheet in your website project folder, zip the folder, and submit your zip
file by the end of the workshop using the Assignment submission link.
Assessment Criteria:
80
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project
b. One style sheet correct associated to each page
2. All Page structures are correct, tags are opened and closed without validation
errors
Workshop Three:
Website Project – Stage 6: Add Elements to Two Website Pages
Getting Started:
Website pages contain many types of elements, so it is important to understand how to
add those elements. This assignment will add two elements to two of the pages you
created in Workshop Two for your website project.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade
2. Add a table element to one of your website project pages
a. Style the table using your external CSS code
b. Include relevant information in the table such as a contact form or pricing
information
3. Add an image to one of your website project pages
a. Ensure the image is accessible using the alt tag
b. Style or format the image using CSS
c. Ensure the image is a .png or .gif format
4. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
Place all website project pages and associated files in the project folder, zip the folder
and submit the assignment.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project
b. One style sheet correct associated to each page
c. Two of the website project pages should contain the table and
image you added.
2. All Page structures are correct, tags are opened and closed without
validation errors
Website Project – Stage 7: Creating the Header Image
Getting Started:
Headers are used to brand a site and provide a consist theme. HTML5 has a header tag
to contain the information.
Creating a header is an important component of web design. The header, which can
contain navigation along with the content and footer, is part of the ?wireframe? or
blueprint for your pages. Most headers contain a logo that identifies the business,
organization, or content of the site.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. GIMP Image Editor is free and downloadable from the following link:
a. http://www.gimp.org/
3. Free trials are available for Fireworks and Photoshop at:
a. http://www.photoshop.com
b. http://www.adobe.com/downloads/
4. Go to the companion site for Chapter 4
at: https://webdevfoundations.net/9e/chapter4.html
5. Scroll down the page to the section that has the heading Free Graphics Tutorials.
The tutorials on this page are for older versions of Fireworks and Photoshop, but the
programs are still very similar to the current version.
6. Select one of the tutorials listed on this site and follow the instructions to create a
logo banner, or try one of the logo tutorials for GIMP at:
a. http://www.gimp.org/tutorials/
7. Once you are familiar with a graphics program, then use it to create a logo for your
website project.
8. Make sure that you create the logo as a Graphic Interchange Format (GIF) and as a
Portable Network Graphic (PNG).
9. Once you have created the logo add to your header image for each html page of
your website project.
10. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
11. Add the image to your website project folder, zip the folder, and submit the
assignment.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project
b. One style sheet correct associated to each page
c. A header image is correctly added to each page of your website
project.
2. All Page structures are correct, tags are opened and closed without
validation errors
Workshop Four:
Website Project – Stage 8: Initial Home Page Structure
Getting Started:
Adding a form in which to contact someone is a much more efficient and effective way
to manage communication through a website. In this assignment you will be adding a
form to your website project. Your form should include:
1. Input box for a name
2. Input box for an email
3. A radio button group with at least three choices
4. Submit button
5. Cancel button ? this should clear the form
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. On one of your website project pages create a contact form that includes the
following elements:
a. At least one input box for a name
b. At least on input box for an email
c. A radio button group with at least three choices
d. A submit button
e. A cancel button that clears the form.
3. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
4. Once you have updated your project page with the form, save the page in your
website project folder, zip the folder and upload it to the assignment portal.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project
b. One style sheet correct associated to each page
c. One page updated with the form created in this assignment which
includes:
i.
At least one input box for a name
ii.
At least on input box for an email
iii.
A radio button group with at least three choices
iv.
A submit button
v.
A cancel button that clears the form.
2. All Page structures are correct, tags are opened and closed without
validation errors
Website Project – Stage 9: Adding navigation to the Website
Getting Started:
In this workshop you have studied how to add navigation to HTML pages and then
utilize CSS to format the links. In this assignment you will be taking what you have
learned and applying it to your website project by adding consistent navigation to each
of the pages in your project.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Create a consistent navigation for your website project that includes a link to every
page in your project.
3. Copy the navigation into each page and ensure they navigate correctly between the
pages of your project.
4. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
5. Once you have copied the navigation to each page in the website project, save all
the files associated to the project, zip the folder and upload it to the assignment
portal.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project
b. One style sheet correct associated to each page
c. A consistent navigation menu the navigates between all pages of
the website project.
2. All Page structures are correct, tags are opened and closed without
validation errors
Workshop Five:
Website Project – Stage 10: Adding Accessibility
Getting Started:
You have just practiced adding accessibility to an example page and now you will use
that ability to add the same elements to your website project pages.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Search the pages of your website project and ensure you have added the following
accessible items:
a. You have declared the lang attribute in the tag
b. All tags include the alt attribute
c. You have utilizes the and subsequent tags appropriately throughout
your site.
3. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
4. Once you have ensured that you have updated the accessibility of your pages, save
all the files in your website project folder accordingly, zip the folder into a file and
upload it to the assignment portal.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project with added
accessibility to the needed elements.
b. One style sheet correct associated to each page
2. All Page structures are correct, tags are opened and closed without
validation errors
Website Project – Stage 11: Adding SEO Elements
Getting Started:
Have you ever wondered why some sites show up on the top of Google?s search results
while others are pages and pages below? Some of the reasons that sites are hard to find
is that they simply do not make it easy for Google to find them. Giving web pages
categories, and meta data, along with valid and accessible code, allow Google to search
easily through a site and improve the search position of your site.
In this exercise you will be adding the elements you practiced in 5.2 to your website
project pages.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. For each page of your website project ensure you have the following meta tags with
appropriate information for your content.
a. Charset
b. Description
c. Keywords
d. Author
3. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
4. Once you have ensured that you have updated the optimization of your pages, save
all the files in your website project folder accordingly, zip the folder into a file and
upload it to the assignment portal.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. One html page for each page in the entire project with added
optimization for each page.
b. One style sheet correct associated to each page
2. All Page structures are correct, tags are opened and closed without
validation errors
Website Project – Stage 12 ? Rough Draft
Getting Started:
You are almost finished at this point with your website project. The pages should be
taking shape and you should be much more comfortable writing in both CSS and HTML.
During this stage of the website project you will be adding content as well as ensuring
you have all the needed elements for your website project.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Your website project may not have all of the content yet but ensure you have added
the following requirements:
?
?
Six to ten pages
Appropriate meta tags
?
?
?
?
?
?
?
One page utilizing tables effectively to display tabular information
One e-mail hyperlink
One external hyperlink
Consistent banner logo area
Consistent main navigation
Association with external style sheet (.css file)
One page containing a form with at least three elements
3. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
4. Once you have ensured that you have updated the optimization of your pages, save
all the files in your website project folder accordingly, zip the folder into a file and
upload it to the assignment portal.
Assessment Criteria:
100
Due by the end of the workshop
1. The website project zip file should contain all of the files needed for your
website project.
2. All of the following elements are addressed in the website project files:
?
?
?
Six to ten pages
Appropriate meta tags
One page utilizing tables effectively to display tabular information
?
?
?
?
?
One e-mail hyperlink
One external hyperlink
Consistent banner logo area
Consistent main navigation
Association with external style sheet (.css file)
?
One page containing a form with at least three elements
3. All Page structures are correct, tags are opened and closed without
validation errors
Workshop Six:
Website Project – Stage 13: Adding Interactivity
Getting Started:
Now that you have practiced adding interactivity/media elements to a page you are
going to add one or more of those elements to your website project.
Instructions:
1.
Review the rubric to make sure you understand the criteria for earning your
grade.
2.
Either embed or link to at least one media/interactivity type you learned about
in exercise 6.1 into a page in your website project.
3.
Validate all of your pages using the validator tools at https://validator.w3.org/
to ensure correct/valid code.
4.
Once you have ensured that you have added the media/interactivity to at least
one of your pages, save all the files in your website project folder accordingly, zip the
folder into a file and upload it to the assignment portal.
Assessment Criteria:
50
Due by the end of the workshop
1. The website project zip file should contain:
a. All of the pages for your website project including the updated page
with your media/interactivity on it.
b. One style sheet correct associated to each page
2. All Page structures are correct, tags are opened and closed without
validation errors
Website Project ? Final Stage: Final Version
Getting Started:
When completing a project it always comes down to the details that set the project
apart from others. In with assignment you will be completing those details in your
website project.
Instructions:
1. Review the rubric to make sure you understand the criteria for earning your grade.
2. Your website project may not have all of the content yet but ensure you have added
the following requirements:
?
?
?
?
?
?
?
?
?
?
Six to ten pages
Appropriate meta tags
One page utilizing tables effectively to display tabular information
One e-mail hyperlink
One external hyperlink
Consistent banner logo area
Consistent main navigation
Association with external style sheet (.css file)
One page containing a form with at least three elements
One page with at least one media/interactivity on it
3. Address any suggestions or corrections indicated by your facilitator for the course.
4. Validate all of your pages using the validator tools at https://validator.w3.org/ to
ensure correct/valid code.
5. Once you have ensured that you have updated all of your pages and have included
the required elements, save all the files in your website project folder accordingly,
zip the folder into a file and upload it to the assignment portal.
Assessment Criteria:
100
Due by the end of the workshop
1. The website project zip file should contain all of the files needed for your
website project.
2. All of the following elements are addressed in the website project files:
?
?
?
?
?
?
?
?
?
?
Six to ten pages
Appropriate meta tags
One page utilizing tables effectively to display tabular information
One e-mail hyperlink
One external hyperlink
Consistent banner logo area
Consistent main navigation
Association with external style sheet (.css file)
One page containing a form with at least three elements
One page with at least one media/interactivity on it
3. All suggestions or corrections required by your facilitator for the course
have been addressed
4. All Page structures are correct, tags are opened and closed without
validation errors
Purchase answer to see full
attachment
