WDD 231 | Individual Project Description

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 new small website using a contemporary approach with HTML, CSS, and JavaScript. The goal is to develop a dynamic and responsive website that integrates external data sources, while adhering to accessibility, usability, and development standards.

Submitting your existing chamber site for this capstone activity does NOT meet the requirements and will result in a failing grade.

"The desire to create is one of the deepest yearnings of the human soul. No matter our talents, education, or backgrounds, we each have an inherent wish to create something that did not exist before. Everyone can create. You don't need money, position, or influence in order to create something of substance or beauty. Creation brings satisfaction and fulfillment. We develop ourselves and others when we take unorganized matter into our hands and mold it into something of beauty."
Happiness, Your Heritage - Dieter F. Uchtdorf

Project Requirements

This project will be of your own design and development. You may not consult nor work with any other individual nor group on the project. The content and subject is driven from your proposal of a topic and the site should be complete without any placeholders. The images and verbiage may be referenced from other sources which will need to be cited in a resource attributions page, which link will be located in the footer of the home page of the site.
The attributions page does not need to be styled.

Your project must meet the following functional and developmental specifications for full credit consideration:

These are the minimum specifications for the project. As always, you are encouraged to go above and beyond these requirements to demonstrate your mastery of the course learning outcomes.

Your website project must be hosted on GitHub and rendered publicly via the GitHub Pages service.

1: File and Folder Naming

✔ All folders and files follow the course naming rules which include lowercase only, no spaces, and are meaningful (semantic).

2: HTML Standards

✔ Structure the pages with valid, standards-based HTML markup.

✔ Each page should meet the baseline development standards.

3: CSS Standards

✔ Style the site with valid CSS that does not contain unused and unnecessary (duplicate) declarations and rules.

4: Design Principles

✔ The design must demonstrate a consistent look and feel meeting all design principles (PARC).

✔ Implement wayfinding with the site's pages navigation links.

5: Layout

✔ Implement responsive navigation. Small screen links expand when opened.

✔ Style the site so that it is responsive to mobile (portrait and landscape) and larger screen views without violating PARC design principles.

6: Content

✔ Build a site with at least three (3) cohesive pages.

✔ Add a favicon based on the site logo or design.

✔ The site must have significant and relevant content that supports the purpose of the site as outlined in your website plan.

✔ Add appropriate social media meta data to the pages.

✔ All images must be optimized using correct aspect ratios , sizes, and file formats.

7: Lazy Loading

✔ Use a lazy loading technique to support progressive design and to increase page performance.

8: HTML Form

✔ Use an HTML form that meets the standards presented in the course.

✔ Display the form data on a form action page.

9: 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.
Use an asynchronous function with a try block.
Build at least 15 items dynamically from your data source. Each item must have a modal dialog with relevant information.

There are many public and free APIs that you can use for your project. Check the Web Frontend Development Resources page for some examples.

10: Spelling and Grammar

✔ Ensure that there are no spelling nor grammatical errors.

11: Professionalism

✔ Include a link to the attributions page in the footer if applicable.

✔ The design must support accessibility and usability

✔ No page on the site exceeds 500kB of total data transfer from an empty cache.

✔ Complete the project by the due date.

12: Video 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 integration/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 3-5 minutes in length.
Upload your completed video to your GitHub account or Youtube. You will provide a link when you submit your assignment.

This is a web course intended to help you learn how to construct dynamic and responsive websites using the core web technologies of contemporary HTML, CSS, and JavaScript. Third party templates are NOT allowed. Pages built from site builder software or drag-and-drop tools or that are based on existing sites are not allowed and will lead to no credit on the term project.

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 Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views.

Submission

Your project should be stored in its own subfolder within your wdd231 repository.
Return to I-Learn and submit
1. the project's URL, and
2. in the comment section, your demonstration video's URL.