AI can be used to help you with this assignment, but you should not rely on it too heavily. Use it to help you understand concepts, troubleshoot or get unstuck, or generate ideas. Do not use it to generate large amounts of code. If you do use AI, make sure to validate what it tells you with other sources.

Requirements

This project will be completed in a team of 2 students. After forming your team you will be responsible to plan and complete a web application as a showcase that demonstrates your mastery of the topics taught during this course. Your web application can take many different forms, but there is a list of requirements that each app must include:

• At least one detailed, validated form
• Local storage for persistence
• Fetching data from an API or json file.
• Drop-down menu
• CSS Animation
• Responsive design
• Good user experience (UX) and accessibility
• URL parameters (data that is passed from page to page in an app through the URL, for example https://example.com/page2.html?id=34 Send the id of 34 to the code running at page2.html)
• Use of modules for organization

Checkpoint

By the end of this unit (Unit 3) it is recommended that you have most of the HTML and CSS written for your application. In order to meet this checkpoint it is recommended that you use static content hard coded into the HTML. You should make note of where you will need to switch that out for dynamically generated markup later.

Keep the requirements list above in mind as you code up the HTML and CSS of your application.

AI audit prompt

Your instructor will specify if this is required or optional for your section. They may also provide a custom prompt for you to use, or you can use the default prompt below. The goal of this audit is to get feedback on your project from an AI assistant, and then to use that feedback to make improvements to your project.

This prompt will be most effective if you run it in something like Copilot Chat or another AI-assisted development environment so that the AI can have access to all your project files.

Run the following prompt against your project at this milestone:

You are our web project milestone audit coach.

Your role:
Evaluate our current progress honestly, compare it to required success criteria, and give a focused improvement plan.
Do not give generic praise. Be specific, evidence-based, and actionable.

Context we will provide:
- Milestone name/number:
- What we completed this week:
- Links/files/screenshots:
- Known bugs or blockers:
- Team goals for next check-in:

Required success criteria (audit all of these every time):
1) At least one detailed, validated form
2) Local storage for persistence
3) Fetching data from an API or JSON file
4) Drop-down menu
5) CSS animation
6) Responsive design
7) Good UX and accessibility
8) URL parameters used to pass data between pages
9) Use of modules for organization

Audit instructions:
1. Progress summary
- Briefly summarize what looks complete, partial, and missing.

2. Criteria-by-criteria evaluation
- For each of the 9 success criteria, report:
  - Status: Met / Partially Met / Not Yet Met
  - Evidence found in our work
  - Main gap(s)
  - One concrete improvement step

3. Quality review (cross-cutting)
- Identify important issues in:
  - functionality/reliability
  - UX clarity
  - accessibility basics
  - code organization/maintainability

4. Prioritized action plan
- Give the top 5 next tasks in priority order.
- For each task include:
  - why it matters now
  - estimated effort (S/M/L)
  - definition of done (how we verify it)

5. Reflection coaching
- Ask us 3 short reflection questions that help us decide what to improve next.

6. Code literacy
- Pick a section of code and ask us to explain what it does.
- Then give feedback on our explanation and fill in any gaps in our understanding.

Output format:
- Use clear headings.
- Use concise bullet points.
- Keep it practical and student-friendly.

Audit report

Add a short report to your submission (4–8 bullets total):

• Top findings from the audit.
• What you learned from the audit.
• What changes your team made because of the audit.
• Any findings you deferred and why.

Divide and conquer

As a team you should talk about how you will divide up the work. Should one person do all of the HTML and one all of the CSS? That could work but the CSS person will not be able to do much until the HTML is done.

Should one person work on one page and one another? Again this can work but some of the HTML and CSS should be the same across both pages. Think Header and Footer for example, or fonts and colors.

One other plan would be for one person to work on the parts of the pages that should be the same across the whole site, and the other work on the content areas. In this case we have removed most of the blockers and no one is stuck waiting on someone else.

Before moving forward it is highly recommended that each team take a few minutes and write down all of the tasks that need to be done in order to complete the project. Try and make each task about 5-30 minutes in scope. Any task that takes longer than 30 min should be broken into smaller tasks.

You could use a tool like Trello to help organize your tasks. Create three columns to start: Backlog, Doing, and Done.

One last thought. Remember that you can have more than one CSS file as part of your project…you can either link them all in, or check out @import

What might this look like? Let’s say that you decided to break your CSS up into the following parts:

• variables
• global styles
• header/navigation styles
• footer styles
• page specific styles

You might then create a base.css file and the contents would be the following:

@import 'variables.css';
@import 'global.css';
@import 'header.css';
@import 'footer.css';

Then in your index.html file you could add two link elements. One would bring in the base.css and the other a file that contained all the styles for the main content area of the home page called home.css

This breaks up the work across multiple files to make it easier to collaborate on with your team. For more details on this…check out Organizing your CSS

How are we doing?

Each unit your team should reflect on how well they feel they are meeting the objectives. If you feel you are not meeting the objectives, you should meet with the instructor to review progress and discuss potential problems. Don’t wait until the end of the project to ask for help if you feel you are falling behind! Get help early and often.