WDD 131: Dynamic Web Fundamentals

Website Project Description

Overview

The final website project is a comprehensive assessment of the course learning outcomes giving you an opportunity to demonstrate your mastery of the course learning outcomes in HTML, CSS, and JavaScript to create a dynamic and responsive website that adheres to development standards.

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 brief verbiage may be referenced from other sources which will need to be cited in a resource reference/attributions page, which link will be located in the footer. This attributions page does not need to be styled.

Project Requirements

Your project must meet the following functional and developmental specifications.

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

  1. Your website project must be hosted on GitHub and rendered via GitHub Pages.
  2. The website must consist of at least three (3) pages with a common navigation and theme that appeals to the target audience.
  3. The site must have significant and relevant content that supports the purpose of the site as outlined in your website plan.
  4. The design must support accessibility, usability, visual appeal, and design principles.
  5. Structure the pages with valid, standards-based HTML markup.
  6. Style the site with valid CSS that does not contain unused and unnecessary (duplicate) declarations and rules.
  7. Style the site so that it is responsive to mobile (portrait and landscape) and larger screen views without violating PARC design principles.
  8. All images must be optimized.
  9. Use a lazy loading technique to support progressive design.
  10. Use an HTML form that meets the standards presented in the course.
  11. The site must have dynamic elements powered by Javascript including the following:
    • ✔ have more than one function,
    • ✔ include DOM interaction including selecting an element, modifying it, and listening for and react to events,
    • ✔ use conditional branching,
    • ✔ use objects, arrays, and array methods,
    • ✔ exclusively use template literals when building strings for output, and
    • ✔ use localStorage.
  12. Ensure that there are no spelling or grammatical errors.
  13. Complete the project by the due date.

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

  1. 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.
  2. Use DevTools CSS Overview to check your color contrast.
  3. Generate the DevTools Lighthouse report and run diagnostics for Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views.

Submission

  1. Your project should be stored in its own subfolder within your wdd131 repository.
  2. Return to I-Learn and submit the project's URL.