tl;dr Finish your site’s interactivity. Polish it. Make it ready for your portfolio!
| 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:
Revise your project based on your Milestone 1 feedback.
When revising your plan in the design journey, don’t delete your “old” answers. Remember, we want to see your design’s journey; you are graded on your design process. If you later change your mind, keep the “old” answer and then add a new one below it explaining why you changed your mind.
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 go back and re-read the project overview and project requirements.
Using your plan, implement the interactivity in HTML, CSS, Javascript+jQuery.
Start by getting the JavaScript code working; don’t worry about styling for now. Simply get the basic interactivity to work. Start with implementing the modal first, then implement the hamburger menu.
This is the most important part of the assignment. If your interactivity doesn’t work, we aren’t able to provide partial credit. Please get your interactivity working first, then style it in the next step.
Your hamburger menu button should not display on wider screens. Use the On-Page-Loaded and the On-Window-Resized snippets to add and remove classes on the hamburger menu button.
Use the background-color property in your interactivity CSS classes to make it easy to see if your addClass() removeClass() calls are working the way you expect (without display: none).
If something is hidden by default, temporarily remove the CSS class that hides the element. It’s really hard to code/styling something you can’t see. When you’re done getting that element just right, add the hidden CSS class back.
If your interactivity is not working as intended, use the steps below to help troubleshoot and try to identify the problem.
<body>?id="")# in the selector in the snippet?. to the class name in the add/remove class snippet?background-color: red;With your basic interactivity working, style it!
Your interactivity should look professional. It should employ common design patterns and use affordances, feedback, visibility, and familiarity.
Use the Mozilla reference documentation as necessary. Professional programmers frequently need to refer to the documentation when coding. You will need to refer to this documentation too (Hint: z-index and position).
Note: If you decide that you want to change your design, change the design in the design journey first, then code that change.
Once you’ve finished the final site, take a moment and explain your final interactivity’s design in the design journey.
You wouldn’t hand off the final version of a site to a very important client without checking that you’ve met all the client’s requirements first. Professionalism is important. Check your final website against the project’s requirements. Remember here, a client won’t provide you with a rubric. Instead, you need to evaluate work using the requirements.
Tip: Put a check mark next to every requirement in the write-up as you check your site.
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.