WDD 131: Dynamic Web Fundamentals

W06 Project

Overview

The final website project is a comprehensive assessment that demonstrates your mastery of the course learning outcomes in HTML, CSS, and JavaScript. You will create a dynamic, responsive website that adheres to professional development standards.

Project Requirements

This project must be your own original design and development. You may not consult with or work with any other individual or group. The content and subject matter come from your topic proposal, and the site must be complete with no placeholders. You may reference images and text from other sources, and you must cite these on a separate references page.

Link the reference page (which does not need to be styled) in your website's footer.

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. Host your website project in your wdd131 GitHub Pages repository in the project folder you created for your siteplan.html document.

    You can check the basic layout of your project folder and the siteplan.html document by using this quick audit tool.

  2. The website must consist of at least three (3) pages with consistent navigation and visual theme suited to your target audience.
  3. The site must have significant and relevant content that supports your website's purpose as outlined in your site plan.
  4. The design must support accessibility, usability, visual appeal, and design principles.
  5. Organize the pages with valid, standards-based HTML markup.
  6. Apply valid CSS styling without unused or duplicate declarations and rules.
  7. Make the site responsive for mobile (portrait and landscape) and larger screens while maintaining 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. Include dynamic elements created with JavaScript that demonstrate the following:
    • ✔ Have more than one function,
    • ✔ Include DOM interaction including selecting an element, modifying it, and listening for and reacting to events,
    • ✔ Use conditional branching,
    • ✔ Use objects, arrays, and array methods,
    • ✔ Exclusively use template literals when building strings for output
    • ✔ Use localStorage.
  12. Ensure there are no spelling or grammatical errors.
  13. Complete the project by the due date.

This course teaches you how to build dynamic and responsive websites using core web technologies: HTML, CSS, and JavaScript. Third-party templates, site builders, drag-and-drop tools, and designs based on existing websites are not permitted and will result in no credit for this project.

Testing

  1. Use the browser's DevTools console to check for JavaScript runtime errors, 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 Canvas and submit the project's URL.