tl;dr Plan your interactivity. Before you begin coding your interactivity, plan it first! In this milestone you will plan your site’s interactivity. All planning should go in the design journey. The design journey is located in the “design-plan” folder of your project’s repository.
| Submissions | Deadline | Slip Day Deadline | Credit |
|---|---|---|---|
| Milestone 1 (p3m1) | Wed 4/10, 11:59pm | Thu 4/11, 11:59pm | 47 points (correctness) |
| Final Submission (p3fin) | Wed 4/17, 11:59pm | Fri 4/19, 11:59pm | 102 points (correctness) |
Project Document Summary:
Coding Resources:
When working for a client, you’ll need to check their requirements frequently to ensure you’re meeting their expectations. You don’t want to spend weeks working on something only to discover at the last minute that what you’ve been working on doesn’t meet their requirements.
Please read the project overview and project requirements.
Copy your project 1 or 2 website into your Project 3 repository.
Copy the contents of your Project 1 or Project 2 website into the root of your Project 3 repository. Copy all website HTML files, the “images” folder, and the “styles” folder. Do not place the copied website into a subfolder. If you’ve done this correctly, your “index.html” file should be in the same folder as the “README.md”.
To copy, open the codespace for Project 1 or Project 2. Right-click on all files you want to copy and select the “Download…” option. Now in your Project 3 codespace, drag and drop the downloaded files into the codespace to upload the files into your Project 3 codespace.
Please do not copy the “design-plan” or the “.git” folders from your Project 1 or 2. Simply copy the contents of the website to the root of your repository and nothing else.
If you are prompted to overwrite files, please stop! Please re-read these instructions and try again.
In the design journey tell us which project you’ll be using for your Project 3, its audience, and their goals.
You may reuse/copy your audience and their goals from your original project. Please revise the audience and their goals if necessary.
In this project you will design and implement a hamburger drop-down navigation menu and a modal.
Brainstorm several ideas for how to utilize modals in your existing website. Your modals should enhance the functionality of the website for its users. Please document your brainstorm in the design journey.
Once you’ve explored your ideas for the interactivity, sketch at least two iterations of the interactivity’s design. (There are several ways to design a hamburger menu and modal.)
Next, finalize your interactivity’s design with final design sketch(es). Your final design sketches should include a sketch of the entire website with the interactivity included. The interactivity should include the level of detail from project 2 (e.g. all content incorporated, flexboxes planned where necessary). Annotate your interactivity design to explain how it functions (i.e. “Hamburger menu only visible on narrow screens” or “modal appears when thumbnail is clicked/tapped.”)
Justify why this interactivity will enhance the functionality of the site and assist the audience with their goals.
Note: This is a design sketch. It should look how the interactivity will look when the page loads (some stuff may not be visible in this sketch.) You will create a planning sketch in the next step.
Plan your interactivity’s implementation in the design journey as an annotated planning sketch and pseudocode.
Plan the modal first, then plan the drop-down hamburger menu.
Create planning sketch(es) for implementing your interactivity.
Your planning sketches should include all HTML elements needed for the interactivity; annotations for the element types, their unique IDs, and CSS classes; and lastly the initial CSS classes.
Tip: Feedback and affordances are important for usable interactivity. Consider planning your CSS classes for them too. (i.e. .close-x:hover – darken background on hover)
Plan your interactivity code in pseudocode.
In the design journey, plan your pseudocode for implementing the JavaScript needed for your interactivity.
Hint: If you’re using a modal to display a larger image when a user clicks on an image thumbnail, you can include all the large images in the modal too and show/hide the “correct” big image depending on which thumbnail button the user clicked/tapped.
Hint: Media queries are not sufficient to create a responsive hamburger menu and navigation bar. When the browser resizes, you will need to show/hide the hamburger button. Just like click, resize is an event you can listen for and add/remove CSS classes in response to.
Please remember that pseudocode is an informal language. There is no standard for it. It should mostly be natural language (i.e. English). Do not use JavaScript for your pseudocode.
Note: Your pseudocode should be sensible to the students in this class. If you’re unsure, ask a peer from the class to review your pseudocode.
Prepare your website for implementing the interactivity in the next milestone.
Begin by adding the HTML elements you need for the interactivity to your site. Style these elements to align with your planned designed using CSS classes, etc.
Please keep in mind that this is just a draft. The HTML/CSS need not be perfect. We simply want you to be ready to begin the next milestone. No JavaScript is required.
All HTML and CSS files used in your interactivity should validate.
Stage, commit and push all changed files in your Git repository to GitHub. (All commits must reside on the main branch.)
Then, complete the submission form.
Note: All files must be in the location specified in this document for credit; our grading process cannot reliably locate your work in other locations.