info1300-2024sp-documents

Project 3: Enhance a WebSite with Client-Side Interactivity

tl;dr Incorporate interactivity into an existing website. You will add client-side interactivity (specifically a hamburger drop-down navigation menu and a modal) either to your Project 1 or Project 2 to enhance the usability and engagement of the website.

Table of Contents

Learning Objectives

Deadlines

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)

Plan to submit on time. We strongly encourage you not to use your slip days unless you have a legitimate need for a deadline extension.

Resources

Project Document Summary:

Coding Resources:

Project Guidelines

You will design and implement client-side interactivity for your existing Project 1 or Project 2 website by adding a hamburger drop-down navigation menu and a modal.

Your project will require you to design, plan, and implement significant and original client-side interactivity in your Project 1 or Project 2 website. You only need to revise portions of your Project 1 or 2 websites if it is necessary in order to meet this assignment’s requirements. Please note that the HTML and CSS files that contain your interactivity must validate, even if they didn’t validate for your Project 1 or 2 submission.

Your hamburger menu and modal must enhance your audience’s experience and help them accomplish their goals.

You are required to implement the interactivity using the methods taught in this class.

Project Requirements

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.

Refer to the Project Requirements frequently and consistently use them to evaluate your own work. Just like you would if you were working for a client.

Grading

Only Project 3 content/requirements will be graded for this assignment. We will not grade what was already graded for Project 1 or Project 2. You do not need to revise your Project 1 or Project 2 site unless revising it is necessary to complete Project 3. This means we will only grade the new client-side interactivity and related content for Project 3.

Milestones and the final submission are graded for correctness. You will receive detailed instructions for each milestone and the final submission as to what components are required for the assignment.

Please note that we are unable to provide credit for non-functioning interactivity. Your interactivity must function to be graded for credit. If your code does not work, then you will likely receive a very low grade.

Generally across all milestones plus the final submission, we will assess your project in three parts:

1. Design Process and Planning (~20% of your grade)

2. Final Design of Website Interactivity (~30% of your grade)

3. Implementation of your Website Interactivity (~50% of your grade)

Project Tips

Getting Help

If you need help on this assignment, you have the following options:

  1. Ask a peer in the course for help.

    Working with your peers is one of the best ways to get help in this course. Helping a peer improves your learning and theirs!

  2. Attend TA Office Hours.

    Office hours are the best way to seek help in this course. You are encouraged to make regular use of office hours and work with your peers during office hours.

    Current office hours are posted to the office hour schedule.

    Start assignments early and seek help early; office hours right before deadlines are often be packed.

    Because we want you to learn how to evaluate your own work, we ask that you not ask the TAs to check, endorse, or pre-grade your submission.

  3. Post a public question on Ed Discussions (link in Canvas course).

    Do you have a general question about the course material or an assignment? The course Q&A forum is the best place to receive clarification on course content.

    If you need help with an assignment/project, please seek help with a peer or visit office hours. We want to help you, but it’s often difficult for us to effectively help you with your code in online forum.

    TAs prioritize helping students in office hours first then answering questions on Ed. We try to respond to your questions within 48 hours (Monday-Friday, 9am-4pm).

  4. Attend the instructors’ office hours.

    The instructors’ office hours are always open. Please feel free to stop by for anything. We are always happy to help you with any problem no matter how big or small.

    Instructor Office Hours: - Tue 1-2pm in Gates 203 (most days check with Prof.) - Thu 1-2pm in Gates 11 (most days check with Prof.)

Please do not email info1300@cornell.edu, the instructors, or the TAs for help with an assignment/project. Please use the above methods.

Git Repository and Submission

  1. Create your Project3 repository (you only need to this once)

    Visit https://landrace.infosci.cornell.edu/courses/info1300-2024sp/repos/project3 in your web browser and click on the Create repository link

    This will create your repo in our course organization on github.

  2. Access your Project1 repository in the course GitHub organization

    Visit the following URL in your web browser: https://github.com/cornell-info1300-2024sp/NETID-project3 Replace NETID in the URL with your NetID. Open the project repository as a codespace.

Your submissions should be your own work and adhere to the course citation policy. Please note that no credit is provided for submitting design and/or code that is taken from the course-provided examples. You also are required to use the methods and techniques covered in class; no credit is provided for using methods that are not covered in this class. Lastly, please note that all files must be in the location specified in this document for credit; our grading process cannot reliably locate your work in other locations; incorrectly placed files will not be graded.

Submit all materials to your GitHub repository’s main branch for this assignment. When you’re finished with each milestone or the final submission, stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission. Please do not email your submission to the instructor or to the course email. Our course infrastructure does not support email submissions.

Pro Tip: Back up your progress every time you work on your project: stage, commit, and push your changes to the GitHub server every time you work on your project (no need to complete the submission form). This acts as a backup for your work. Codespaces is configured to auto-save your files, but this does not change the contents of your Git repo.

If your computer fails, you may access your codespace again (with all your backed-up work) from any internet-connected computer such as the Engineering computer labs or a loaner library laptop, and continue working on the assignment. Please back up your work frequently. We don’t want you to lose any of your hard work.

Writing with Markdown

The design process is the most important part of designing and coding a website. You will document your design process in the design journey: design-plan/design-journey.md.

Your design journey should be written in Markdown. Please refer to the official Markdown Reference Documentation.

Use Codespace’s Command Palette to preview your Markdown: Markdown: Open Preview

You will need to include photos/images in the design-journey, etc.

We will grade design-plan/design-journey.md using Codespace’s Markdown Preview. Make sure your design journey is complete by viewing it using Code’s Markdown Preview. Everything, including images, must be visible for us to grade it. If it’s not visible, then we can’t grade it. We also can’t give you partial credit either.

Academic Integrity

Each student in this course is expected to abide by the Cornell University Code of Academic Integrity.

Please see the syllabus for additional details about copying code and academic integrity.