Task 2 Performance Assessment for WGU'S Front End Web Development course (D277). Made via VSCode.
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
- 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
- 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:
-
a link that opens an external website in a new window or tab using the target attribute
-
an HTML-coded ordered list with at least three list items
-
an HTML-coded unordered list with at least three list items
-
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:
- each of the following styles for text:
• one font-family declaration
• a :hover pseudo-class to create a rollover effect for navigation buttons
-
a float property to position at least one HTML element to the side of another in your web page
-
absolute and relative positioning in at least one area of your web page
-
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.
- 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: 400 MB File types allowed: doc, docx, rtf, xls, xlsx, ppt, pptx, odt, pdf, 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
RUBRIC
A:WEBSITE CONTENT (COMPETENT) The submission includes 4–10 web pages of content with a main page that introduces the state and additional pages for the capital and 2 other cities located within the state. The website includes each of the given points for the capital and each city.
A1:HTML ITEMS (COMPETENT) The submission includes each of the given items on each page. All items use a suitable HTML element.
A2:SEMANTIC ELEMENTS (COMPETENT) The submission includes each of the given semantic elements on each page.
B1:EXTERNAL WEBSITE ELEMENT (COMPETENT) The submission includes a link that opens an external website in a new window or tab using the target attribute and includes suitable markup.
B2:ORDERED LIST ELEMENT (COMPETENT) The submission includes an HTML-coded ordered list with at least 3 list items. The list uses suitable markup, and the HTML code is properly structured.
B3:UNORDERED LIST ELEMENT (COMPETENT) The submission includes an HTML-coded unordered list with at least 3 list items. The list uses suitable markup, and the HTML is properly structured.
B4:TABLE ELEMENT (COMPETENT) The submission includes an HTML-coded table to organize content, and the table has 3–6 columns and 3–6 rows.
C1:TEXT STYLE ENHANCEMENT (COMPETENT) The external CSS file includes both of the given text styles, and both styles function correctly.
C2:FLOAT PROPERTY ENHANCEMENT (COMPETENT) The external CSS file includes a float property to position at least 1 HTML element to the side of another in the web page, and the float property is coded correctly.
C3:ABSOLUTE AND RELATIVE POSITIONING ENHANCEMENT (COMPETENT) The external CSS file includes absolute and relative positioning in at least 1 area of the web page and is coded correctly.
C4:SELECTOR ENHANCEMENT (COMPETENT) The submission includes 1 element selector to style the HTML elements, 1 class selector that is used at least 2 times to style HTML elements, and 1 ID selector to format specific elements of a page, and all selectors function properly.
D:FORM (COMPETENT) The submission includes a form on 1 page of the website with the given text fields, and each field contains appropriate placeholders.
D1:JAVASCRIPT CODE (COMPETENT) The submission includes JavaScript code that correctly verifies the email fields match when a user enters a second email address.
E:UPLOAD WEBSITE (COMPETENT) The submission is uploaded to 1 of the hosting sites listed in the Web Links section and includes each of the required components.
F:ZIP FILE (COMPETENT) The submission includes 1 ZIP file that includes all files used to create the website.
G:"STUDENT PROJECT SUBMISSION FORM (COMPETENT) The submission includes a completed copy of the attached “Student Project Submission Form” that includes the URL published in part E.
H:SOURCES (COMPETENT) The submission includes in-text citations for sources that are properly quoted, paraphrased, or summarized and a reference list that accurately identifies the author, date, title, and source location as available.
I:PROFESSIONAL COMMUNICATION (COMPETENT) Content reflects attention to detail, is organized, and focuses on the main ideas as prescribed in the task or chosen by the candidate. Terminology is pertinent, is used correctly, and effectively conveys the intended meaning. Mechanics, usage, and grammar promote accurate interpretation and understanding.