Competencies

4074.1.1 : Implements Navigational Schemes

The learner implements navigational schemes in websites.

4074.1.2 : Develops Reactive Web Interfaces

The learner develops reactive user web interfaces using CSS.

4074.1.3 : Implements Data Entry and Data Storage

The learner implements data entry and data storage capabilities in a web environment.

4074.1.4 : Implements User-Centered Solutions

The learner implements user-centered solutions from multiple perspectives emphasizing usability and functional page layouts.

Introduction

To be successful as a front-end web designer or developer, you must be able to structure content in HTML and present a visual representation of the structure for various devices using CSS and JavaScript. In this task, you will further design, develop, and implement the low-level comprehensive page layout you created in the previous task. Your work for Task 2 will not be evaluated until Task 1 has been submitted and passed.

In this task, you will have the opportunity to demonstrate your HTML and CSS skills as well as your ability to implement user-centered solutions by creating a website about one of the states within the United States. As you create your website, you will use an external style sheet for the design and layout of the site. Each page should have the same layout to maintain a consistent user experience throughout the site. You will publish your website to one of the free hosting sites listed in the Web Links section.

Note: Because your site will be live, use caution with the content and images you include on your website. The public will have access to your website, so do not include any sensitive or private information.

Note: All the code in your submission must be original work. You may not use premade templates of any sort, including the templates provided in the exercise files of the course, blog software such as Blogger and WordPress, content management systems like Joomla! and PHP-Nuke, GUI web design software like Adobe Dreamweaver, or any type of “WYSIWYG” application that produces the code by clicking a button.

Scenario

Congratulations, you got the job! You just finished your first week at the state government office where you completed the orientation and onboarding documentation. You have also met with your new supervisor daily to learn more about the department and expectations of your role, as well as your new colleagues who have been teaching you about the systems used in the office. You are now ready to develop the new website for the state government office.

Requirements

Your submission must be your original work. No more than a combined total of 30% of a submission and no more than a 10% match to any one individual source can be directly quoted or closely paraphrased from sources, even if cited correctly. An originality report is provided when you submit your task that can be used as a guide.

You must use the rubric to direct the creation of your submission because it provides detailed criteria that will be used to evaluate your work. Each requirement below may be evaluated by more than one rubric aspect. The rubric aspect titles may contain hyperlinks to relevant portions of the course.

Tasks may not be submitted as cloud links, such as links to Google Docs, Google Slides, OneDrive, etc., unless specified in the task requirements. All other submissions must be file types that are uploaded and submitted as attachments (e.g., .docx, .pdf, .ppt).

A. Create 4–10 web pages of content for your website with a main page that introduces the state of your choice and additional pages for the capital and two other cities located within the state. The information for the capital and each city can vary but must include the following:

• the city’s population

• the year the city was incorporated

• the region of the state in which the city is located

• the classification of the city: urban, suburban, and/or rural

• the average income level of the city compared to the rest of the state

1. Include the following items on each page, using a suitable HTML element:

• a title in the head of each document that describes the web page’s individual topic

• a relevant image, including alternative text for the image

• a consistent menu that allows the user to navigate to any other page on the site

2. Include the following semantic elements from Task 1 on each page:

• a header containing introductory content (pertaining to the document as a whole or a particular section of a document)

• a nav to place the links to navigate throughout the site

• a section to display the main content of the page

• an aside to display information related to the content

B. Include each of the following elements within your website, using suitable markup:

1. a link that opens an external website in a new window or tab using the target attribute

2. an HTML-coded ordered list with at least three list items

3. an HTML-coded unordered list with at least three list items

4. an HTML-coded table consisting of 3–6 columns and 3–6 rows to organize content

C. Create an external CSS file with the following CSS rules and formatting, and apply these rules to enhance your website content:

1. each of the following styles for text:

• one font-family declaration

• a :hover pseudo-class to create a rollover effect for navigation buttons

2. a float property to position at least one HTML element to the side of another in your web page

3. absolute and relative positioning in at least one area of your web page

4. each of the following selectors:

• one element selector to style the HTML elements

• one class selector that is used at least two times to style HTML elements

• one ID selector to format specific elements of a page

D. Add a form on one page of your website by doing the following:

Note: The form does not need to include a functional Submit button.

• Include text fields for the user’s first name, the user’s last name, and the user’s email address, as well as a confirmation field for the email address for verification purposes and a text box that allows the user to ask a question.

• Ensure all fields contain placeholders.

1. Include JavaScript code that verifies the email fields match when a user enters a second email address.

E. Upload your website to one of the hosting sites listed in the Web Links section. Your website must include the following components:

• HTML pages

• external CSS document(s)

• all images uploaded to the website

F. Submit one ZIP file of your website with all files (i.e., images, other media) used to create your website.

Note: Your project will be evaluated using both the hosted site and the files. The local copy that you submit needs to match the hosted website.

G. Submit a completed copy of the attached “Student Project Submission Form.”

H. Acknowledge sources, using in-text citations and references, for content that is quoted, paraphrased, or summarized.

I. Demonstrate professional communication in the content and presentation of your submission.

File Restrictions

File name may contain only letters, numbers, spaces, and these symbols: ! - _ . * ' ( )
File size limit: 200 MB
File types allowed: doc, docx, rtf, xls, xlsx, ppt, pptx, odt, pdf, csv, txt, qt, mov, mpg, avi, mp3, wav, mp4, wma, flv, asf, mpeg, wmv, m4v, svg, tif, tiff, jpeg, jpg, gif, png, zip, rar, tar, 7z