WDD 231: Web Frontend Development

Individual Website Project Description

Overview

This NEW individual website project is a comprehensive assessment of each student's proficiency in achieving the course learning outcomes. Students are tasked with creating a website using a contemporary approach with HTML, CSS, and JavaScript. The goal is to develop a dynamic and responsive website that integrates data sources, while adhering to accessibility, usability, and development standards.

Project Requirements

This project will be of your own subject, design, and development. You may not expand upon nor submit the chamber of commerce, learning project. You may not consult nor work with any other individual. The content and subject is driven from your own proposed topic and the site should be complete without any placeholders.

Location and Hosting

• Your project must be stored in its own subfolder within your wdd231 repository.
• Your website project must be hosted on GitHub and rendered publicly via the GitHub Pages service.

File and Folder Naming

• All files and folders adhere to the course naming conventions which include lowercase only, no spaces, and are meaningful (semantic).

HTML Standards

• Structure the pages with valid, standards-based HTML markup.
• Each page should meet the baseline development standards.

CSS Standards

• Use valid CSS that does not contain unused and unnecessary (duplicate) declarations and rules.

Design Principles and Layout

• The design must demonstrate a consistent look and feel meeting all design principles of proximity, alignment, repetition, contrast, and white-space.
• Use responsive navigation. Small screen links expand when opened.
• Style the site so that it is responsive to mobile (320px) (portrait and landscape) and larger screen views without violating design principles with no horizontal scrolling.
• Use wayfinding with the site's pages navigation links.
• Make sure each page size is below the 500kB of total data transfer from an empty cache limit.

Content

• At least three (3) total pages are required. This includes the landing (home) page.
• The content must be cohesive and must be relevant to the purpose of the site as outlined in your website plan.
• Each page must have a unique title and meta description.
• A favicon based on the site logo or design.
• Use appropriate social media meta data on the pages.

Images

• All images must be optimized for the web and use intrinsic aspect ratios.
• Use a lazy loading technique to support progressive design and to increase page performance.

HTML Form

• Use an HTML form that meets the standards presented in the course.
• Display the form data on a form action page. (This page does not count toward your site minimum number of pages size.)

JavaScript Functionality and Components

The site must have dynamic elements provided by Javascript, your code should show elements of the following application:

• Demonstrate well organized code with a minimum of three functions and use ES modules.
• Include DOM interaction: select an element, modify it, and listen for and react to relevant events.
• Use conditional branching.
• Use an array method.
• Use template literals when building strings.
• Use localStorage.
• Fetch JSON data from a remote site using an API or you can create your own JSON formatted data file and use that in place of remote data.
• Use at least one asynchronous function with a try block.
• Build at least 15 items dynamically from your data source(s). Display at least 4 pieces of data for each of the items.
• Use at least one modal dialog structure.

Professionalism

• Ensure that there are no spelling nor grammatical errors.
• The design must support accessibility and usability.
• Include a link to the attributions page in the footer if applicable.

  The images and verbiage may be referenced from other sources which will need to be cited in a resource attributions page, which must be linked from the footer of the landing (home) page. This attributions page does not need to be styled.

• Complete the project by the posted Due Date.

Video Demonstration and Reflection

Create a video that captures your screen as you demonstrate your website project. Include the following:

• Provide an overview of the site's purpose and design.
• Demonstrate the responsive design.
• Demonstrate the navigation and navigate through each page.
• Demonstrate and explain your API/Data integration and purpose.
• The video must include your live face at least at the beginning with an introduction or during the video.
• The video should be about 5 minutes in length.
• Upload your completed video to Youtube or note the reference from Loom.
  You will provide a link to your video when you submit your assignment.

Testing

• Validate your HTML and CSS.
• Test your site in multiple browsers and devices.
• Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of DevTools.
• Use DevTools CSS Overview to check your color contrast.
• Generate the DevTools Lighthouse report and run diagnostics for accessibility, best practices, and SEO (Search Engine Optimization) in both the mobile and desktop views.
• Be sure that that your site is available to the graders by testing it in the browser.

Submission

Return to Canvas and submit

1. the project's URL, and
2. in the comment section, your demonstration video's URL.