WDD-231---Web-Frontend-Development-I

WDD 231 Competency Progress Tracker

Use one row for each slice you work on. After you explain a slice to a peer, record the peer review and link the evidence. Address unresolved gaps before requesting a whole-competency instructor or TA pass-off.

The instructor or TA pass-off happens after all slices in a competency have been peer-reviewed. Update the competency result only after that meeting. Possible results are Passed, Pass with next step, and Not yet.

Student: __________
Term: _____________

1. Semantic and accessible HTML

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Choose HTML elements according to meaning and structure rather than appearance.
[ ]	Create headings, landmarks, navigation, forms, labels, buttons, and links that make sense to assistive technology users.
[ ]	Support keyboard navigation, visible focus, readable text, useful alt text, and appropriate names for interactive controls.
[ ]	Check a page with keyboard-only navigation, browser tools, and an accessibility checker.

2. Responsive CSS and inclusive visual design

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Build a mobile-first layout with Flexbox, Grid, media queries, and relative sizing.
[ ]	Create a consistent visual system with custom properties, spacing, typography, and color choices.
[ ]	Handle long text, different images, narrow screens, and wider screens without breaking the layout.
[ ]	Organize shared and component-specific styles so they are easy to find and change.
[ ]	Check color contrast, readable text sizing, and spacing that supports comprehension and comfortable interaction.
[ ]	Test reflow, zoom, and text enlargement so content remains usable without unnecessary horizontal scrolling.
[ ]	Consider motion, animation, and touch-target size as part of an inclusive interface.

3. JavaScript, the DOM, and events

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Use variables, functions, arrays, objects, conditionals, and loops to represent and process information.
[ ]	Select DOM elements and update content, attributes, classes, and generated markup.
[ ]	Respond to user events such as clicks, input, submit, and change.
[ ]	Separate data, rendering, and event-handling responsibilities into understandable functions.

4. Data-driven rendering and modules

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Represent repeated content as arrays or objects rather than duplicating markup.
[ ]	Create reusable rendering functions or templates for repeated UI patterns.
[ ]	Split code into modules with clear responsibilities and imports/exports.
[ ]	Keep data, application logic, and presentation concerns reasonably separated.

5. APIs and asynchronous programming

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Make requests with `fetch` and use promises or `async`/`await` correctly.
[ ]	Read the response status and convert response data from JSON.
[ ]	Represent loading, success, empty, and error states in the interface.
[ ]	Keep secrets out of source code and follow the API’s documented requirements.
[ ]	Inspect requests and responses with browser developer tools.

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Identify which information the interface needs to remember during a session.
[ ]	Manage state so changes are reflected consistently in the interface.
[ ]	Save and retrieve appropriate data with `localStorage` when persistence is useful.
[ ]	Validate stored data and handle missing, malformed, or outdated values.
[ ]	Create links that carry an identifier or other context in the URL.
[ ]	Read and validate search parameters with browser APIs.
[ ]	Fetch or select detail data based on a URL parameter.
[ ]	Handle missing, invalid, or unknown parameters with a useful user experience.
[ ]	Model open and closed states clearly in JavaScript and CSS.
[ ]	Keep visual state, keyboard behavior, and ARIA state synchronized.
[ ]	Support Escape, focus movement, click-away behavior, or other appropriate interaction details.
[ ]	Reuse interaction logic across pages or components.

7. SEO

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Provide useful titles, descriptions, headings, links, and other discoverability information.
[ ]	Use meaningful page structure and link text to help people and search engines understand the content.
[ ]	Check that metadata, headings, images, and links support the page’s purpose.

8. Collaboration and technical communication

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Break work into a useful issue, task, or milestone with a clear definition of done.
[ ]	Communicate progress, questions, blockers, and integration needs early.
[ ]	Review another person’s work with specific, respectful, actionable feedback.
[ ]	Record important decisions, alternatives considered, and reasons for the final choice.
[ ]	Integrate team changes without losing quality or ownership of your contribution.

9. Optional: Performance and deployment

Instructor/TA pass-off result: ________ Date: ____ Instructor/TA: ________
Next step, if any: ________________________

Peer reviewed	Slice	Peer name and date	Evidence link or note
[ ]	Check page performance, image behavior, and unnecessary network or script work.
[ ]	Run lint, build, preview, and other project checks consistently.
[ ]	Deploy a working site and recognize differences between local and production environments.
[ ]	Investigate an incorrect asset path, missing environment variable, or build failure.

Cross-cutting practice: Debugging and evidence-based troubleshooting

Use this practice in every contract and pass-off; it does not require a separate competency pass-off.

Practiced	Evidence link or note
[ ]	Reproduce a problem and describe expected and actual behavior.
[ ]	Use console output, breakpoints, DOM inspection, network inspection, or incremental experiments.
[ ]	Form a hypothesis about the cause before changing code.
[ ]	Verify a fix and check that it did not create a regression.
[ ]	Explain what you would investigate next if the fix did not work.

Cross-cutting practice: Responsible AI-assisted learning

Use whenever AI is involved; it does not require a separate competency pass-off. AI may guide your learning but must not generate or complete code for the slices being assessed in your contract.

Practiced	Evidence link or note
[ ]	Ask focused questions for explanations, objective clarification, hints, debugging hypotheses, or comparisons.
[ ]	Break large requests into smaller questions that you can evaluate.
[ ]	Check AI guidance against course materials, documentation, tests, experiments, and observed behavior.
[ ]	Reject suggestions that are incorrect, insecure, inaccessible, inappropriate, or would do the assessed work for you.
[ ]	Explain what assistance you used, what you accepted or rejected, and why.
[ ]	Explain the final work and identify which decisions and implementation are your own.

Planning the next contract

Competency or slice to work on next: _________________
Why this is the next useful step: _________________
Support or resources I will use: __________________