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.
• The design must support accessibility and usability.

Content

• 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 an appropriate, 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 and the use ES modules.
• Include DOM interaction: select an element, modify it, and listen for and react to relevant events.
• 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

• Proofread Carefully: Fix all spelling and grammar mistakes.
• Acknowledge Sources: If you've used external content, add an "Attributions" link to your footer.

  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.

• Meet the Deadline: Submit your completed project by the Due Date at the end of Week 06.

Video Demonstration and Reflection

Create a succinct video that captures your screen as you demonstrate how you met the JavaScript requirements. Only include the following demonstrations by walking through your JavaScript code in VS Code:

• How did you incorporate ES Modules.
• How you used DOM interaction.
• How you used localStorage.
• How you used your API/Data integration and what was the output.
• How you used a modal dialog structure.
• The video must include your live face at least at the beginning with an introduction or during the video.
• The video should be about 3 minutes in length. Focus on the required demonstrations and nothing else.
• Upload your completed video to Youtube, Loom, or an equivalent service.
  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.
• 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.
• Make sure your video is available to the graders.

Submission

Return to Canvas and submit:

1. Your project's URL
2. In the comment section, your demonstration video's URL