WDD 131: Dynamic Web Fundamentals

W02 Assignment: Picture Album

Overview

This assignment applies the concepts presented in the learning activities to a picture album page that is responsive in small and larger views. This page will utilize a 'hamburger' menu and respond to user requests.

Associated Course Learning Outcomes

Develop responsive web pages that follow best practices and use valid HTML and CSS.
Demonstrate proficiency with JavaScript language syntax.
Use JavaScript to respond to events and dynamically modify HTML.

Task

Design, develop, test, and then deploy a temple album page using your own selections of temple pictures.

Example Picture Album Page Screenshot - Mobile
Figure 1: Screenshot Example in Mobile View
Example Picture Album Page Screenshot - Larger
Figure 2: Screenshot Example in Larger View
Demonstration of Responsive Behavior responsive example

Instructions

File and Folder Setup

  1. In VS Code, open the wdd131 local repository folder if it does not open automatically because it was your last working directory.
  2. Create a new file named "temples.html".
  3. Add two CSS files named "temples.css" and "temples-large.css" to the "styles" directory.
  4. Add a JavaScript file named "temples.js" to the "scripts" directory.

HTML

  1. In the temples.html document, include the standard HTML document and <head> elements.

    Refer to the development standards if you need a review.

  2. Add links to the CSS files in the proper order to support mobile first dev.
  3. Add a deferred <script> reference to the JavaScript file.
  4. In the <body>, create a basic layout using a header, a main, and a footer as main line elements.
  5. The <header> element contains:
    • a heading that matches up with the title, and
    • a <nav> menu with the following text links:
      • Home
      • Old
      • New
      • Large
      • Small
      You can build this navigation using straight up anchor <a> tags or using a common, unordered list <ul> with list items <li> and <a> tags. Of course, the structural decision you make affects how you will use CSS to style the vertical (mobile) and horizontal (larger) menu.
  6. The <main> element contains the following:
    • a heading element with content matches the current menu selection,
    • at least (9) <figure> elements with temple images and captions. Use the built in figure captions elements and name the temple.
      It is OK to have a single placeholder temple image at this point in the course. We will be adding additional functionality, including responsive image variations to this page in the coming weeks.
  7. The <footer> contains the same dynamic and static information found on your home page from last week.
    Common Footer Screenshot Example
    Figure 3: Screenshot Example of Common Footer

CSS

Use the external temples.css and temples-large.css files to layout and style the page as shown is the example screenshots. Your design must support a responsive view in mobile and larger views.

The temples.css file is used for the mobile view and the temples-large.css file is used for the larger view. Most of your CSS should be located in the temples.css file in mobile first design

  1. Use your own color schema.
    Please note: You are responsible to practice good design principles of alignment, color contrast, proximity, repetition, and consistent spacing in all of your work.
  2. Use your own typography choice by using the Google Fonts API service to select one or two fonts to use on the page.
    Google Fonts Demonstration
  3. Use CSS Flex on the navigation nav.
    CSS Flex Navigation Menu - Demonstration Video
    CSS Flex Menu Example - CodePen Source Code
    Header Contained CSS Flex Example - CodePen Source Code
  4. The navigation must employ a hover affect. See the CodePen above for an example.
  5. The main element has a limited width and is centered on the screen horizontally.
  6. Layout the main column figure elements using CSS Grid. In the mobile view, there should only be one (1) column.

    The application of CSS Grid to support a responsive view is up to you. Some of the options could be:
    • use grid-template-column specific fr changes in the media query, or
    • use grid-template-column property with a repeat function and auto-fit and minmax function.
    Example: Grid Column Layouts and Image Effects - CodePen

JavaScript

Remember that all of your JavaScript references in this class should be to external files.
  1. Support the footer copyright year and date last modified output through a valid JavaScript reference. You already have one or could use the temples.js file.
  2. Apply a responsive hamburger effect to your existing navigation menu using JavaScript.
    • The hamburger button should only show in the mobile view.
    • Clicking the hamburger button toggles the navigation menu items from viewable to not viewable.
    • Use a symbol, such as an 'X' to close the hamburger menu.

Testing

  1. Continuously check your work by rendering the page locally using Live Server in VS Code.
  2. Screenshot of console error icon in DevTools
    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.
    "DevTools" is an abbreviation for "Developer Tools." It refers to a set of tools or utilities provided by web browsers to help developers debug, profile, and analyze web pages during the development process. The tools are typically accessed by pressing the F12 function key or selecting the menu option for the browser's developer tools.
  3. Use DevTools CSS Overview to check your color contrast.
  4. Generate the DevTools Lighthouse report and run diagnostics for Accessibility, Best Practices, and SEO in both the mobile and Desktop views.
    It is best to test your page in a Private or Incognito browser window.
  5. Hard reload the page using Empty Cache and Hard Reload in DevTools with the Network tab open to view the total transferred bytes at the bottom of the tab. Check that the page is 500 kB or less. The usually fixes at this point are:
    • Make sure that all images are optimized.
    • Third party libraries are not allowed because these libraries typically add a lot of unused code to the page and the learning outcome is to understand the basic concepts in web frontend development.

Audit and Submission

  1. Commit your local repository and push or upload your work to your GitHub Pages enabled wdd 131 repository on GitHub.
  2. Use this ☑️ audit tool to check some basic HTML and CSS standards and requirements.
  3. Share your work by posting your URL in the course's Microsoft Teams weekly forum and comment on your peers' work by providing constructive feedback.
  4. Return to I-Learn and submit your the correct GitHub Pages enabled URL. 
    https://your-github-username.github.io/wdd131/temples.html