Coding and Debugging
Write clearer code, find problems, and fix what isn’t working.
12 modules
Self-paced
Certificate of Completion
Enrolled
About this course
Writing code with AI is straightforward until the program fails. This course focuses on finding the cause of a bug, understanding existing code, and writing dependable software.
Work through realistic programming tasks where you diagnose issues, refactor functions, write tests, inspect edge cases, and ensure production readiness.
Diagnose before modifying
Trace execution flow, isolate failing assumptions, and understand error traces systematically before changing code.
Build production habits
Write tests, review AI-generated code for security flaws, and manage software architecture safely.
What you’ll learn
- Understand unfamiliar codebases and trace system data flow
- Write, refactor, and optimize functions with safe edge case handling
- Systematically diagnose, narrow down, and resolve complex bugs
- Write unit and integration tests to verify code behavior
- Review generated code for security vulnerabilities and style
- Design resilient architecture and delegate tasks safely to coding agents
Curriculum · 12 Modules
Every module includes guided lessons, practical assignments, and an independent challenge.
-
1
Read the page
-
2
Find the structure: Identify and repair areas that require clearer document landmark structure.
-
3
Fix the headings: Repair heading hierarchy without changing visible text content.
-
4
Repair the form: Make the registration form accessible and usable with real inputs, labels, and submit button.
-
5
Check accessibility: Review the page for structural accessibility issues, meaningful image text, and keyboard focus.
-
6
Prepare the page: Clean and finish the HTML while preserving the intended design; submit final project with repair notes.
-
1
Find what controls the layout: Inspect the page and identify the CSS rules controlling page width, navigation, cards, and image sizing.
-
2
Read the box model: Fix card sizing where added padding causes container blowout due to default content-box sizing.
-
3
Fix spacing and sizing: Clean sizing and spacing without changing the intended visual composition.
-
4
Repair the responsive layout: Make navigation and article cards behave correctly across desktop, tablet, and mobile screens.
-
5
Check different screen sizes: Inspect and verify the layout at 1440px desktop, 768px tablet, and 390px mobile viewports.
-
6
Clean up the styles: Remove unnecessary declarations and redundant CSS while keeping behavior correct; submit final styles.
-
1
Follow the event: Trace the browser click event from user button selection through the filter function to rendered DOM updates.
-
2
Read the data: Inspect product objects and determine which fields filtering depends on; handle unexpected categories.
-
3
Trace the state: Trace how changing activeCategory and product count variable changes rendered products.
-
4
Change the behavior: Add a new requirement: 'Price under $50' filter button that combines with category filtering.
-
5
Handle an edge case: Create a useful empty state without breaking product count when no items match filters.
-
6
Check the result: Verify All, Bags, Under $50, Clear, empty states, and keyboard activation; submit the working project.
-
1
Find the starting point: Identify where the application initializes and where the search UI is rendered.
-
2
Trace a user action: Trace the execution path when a user types into the search box down to the rendered output.
-
3
Find where the rule lives: Locate the exact function and file responsible for filtering note search queries.
-
4
Follow the data: Trace a Note entity from its TypeScript interface definition to rendered card markup.
-
5
Explain the project: Create a concise project architecture map covering entry, UI, logic, data, and rendering.
-
6
Choose where a change belongs: Product request: search should also match note body text. Implement the change in the correct file without modifying UI.
-
1
Reproduce the bug: Record the expected behavior, actual behavior, and environment conditions that reproduce the defect.
-
2
Gather evidence: Analyze browser event evidence and compare button click handling with form submission.
-
3
Narrow the cause: Compare button click, Enter key, and form submit events to isolate the smallest explanation covering all evidence.
-
4
Test the theory: Make the targeted local change in SearchBox and test form submission behavior.
-
5
Fix the bug: Finalize implementation to preserve button search, Enter key search, and keyboard accessibility without page reload.
-
6
Prove the fix: Verify button search, Enter key search, empty search, and keyboard accessibility; submit patch and verification note.
-
1
Read the requirement: Turn product request into testable acceptance criteria.
-
2
Find the change points: Inspect task types, task row, task list, filters, and tests to identify change points.
-
3
Change the data: Update task model safely in types/task.ts and handle legacy tasks where priority is absent.
-
4
Build the interaction: Render priority badges in TaskRow and preserve existing task completion styles.
-
5
Add the filter: Implement 'High Priority' filter in Filters and App without breaking completion state.
-
6
Finish the feature: Run existing tests, new tests, typecheck, and submit patch with implementation summary.
-
1
Establish the behavior: Run the existing test suite to establish a green baseline before modifying any code.
-
2
Find the repetition: Identify duplicated currency conversion and symbol formatting blocks across branches.
-
3
Extract one clear piece: Extract formatAmount(cents, currency) helper function while keeping all existing tests green.
-
4
Keep the change small: Evaluate an intentionally overengineered alternative and explain why the simpler helper is superior.
-
5
Check edge cases: Test edge cases: zero cents, large amounts, and negative inputs.
-
6
Compare before and after: Submit refactor and explain what became clearer and how maintainability improved.
-
1
Name the behavior: Identify what behaviors deserve test coverage before writing code.
-
2
Write the obvious test: Add a standard past-date test that verifies 'overdue' status.
-
3
Test the boundary: Test due date equal to today across different timestamps on the same day.
-
4
Find the missing case: Investigate invalid date strings and unexpected inputs using supplied product requirements.
-
5
Use a failing test: Expose an end-of-day boundary defect by writing a failing test before changing implementation.
-
6
Fix and strengthen the suite: Consolidate the test suite and verify all 5 test cases pass cleanly.
-
1
Read the contract: Read versioned API documentation and identify guaranteed v2 response fields.
-
2
Find the mismatch: Compare documentation with implementation to identify cause of undefined temperature.
-
3
Make the smallest integration fix: Update parser mapping to use temperature_c without modifying downstream components.
-
4
Handle failure: Handle documented HTTP error codes (401, 404, 429, 500) with user-friendly error messages.
-
5
Check the version: Inspect an outdated v1 code snippet and explain why copying it recreates the defect.
-
6
Document the integration: Create a concise developer integration note specifying endpoint, fields, errors, and version.
-
1
Trace the sequence: Analyze overlapping asynchronous requests and explain how out-of-order responses create stale state.
-
2
Reproduce the race: Reproduce the race condition using simulated delays (A=900ms, B=200ms) and observe stale overwrite.
-
3
Find what can become stale: Identify which pieces of state must be protected against obsolete async responses.
-
4
Choose a safe approach: Compare request ID counters, monotonic versioning, and AbortController to choose the safest solution.
-
5
Implement the fix: Implement monotonic request ID tracking in DraftManager to eliminate the race condition.
-
6
Test timing, not just values: Author tests verifying timing resolution and error handling under concurrent conditions.
-
1
Read the requirement: Understand what the session timeout requirement actually requested.
-
2
Plan the change: Establish a review checklist covering files involved, behaviors that must stay stable, tests, and risks.
-
3
Review the proposed patch: Compare diff against requirement: mark changes as required, unrelated, or risky.
-
4
Find the defects: Catch the cleanup issue, unrelated behavior change, unsafe secret value, and missing test.
-
5
Correct and verify: Repair the patch: remove secret, preserve defaults, clean up interval timer, and add tests.
-
6
Prepare the release: Submit corrected diff, passing tests, concise summary, and release note ready to merge.
-
1
Understand the project: Map entry, model, storage, search, filtering, rendering, and tests across Beacon Issues.
-
2
Fix the search defect: Fix the case-sensitivity defect where 'Login broken' failed to match search query 'login'.
-
3
Fix storage safely: Recover gracefully when localStorage contains malformed JSON without crashing application startup.
-
4
Plan priority: Plan priority feature: Low, Normal, High schema, legacy record compatibility, and UI controls.
-
5
Build priority: Implement priority selector in form, priority badges in row, and High filter button.
-
6
Review the product: Inspect complete diff, verify all tests pass, and prepare final patch for production release.
Certificate of Completion
Earn an official Practisi credential
Upon completing all 12 modules and the Final Challenge with a passing score of at least 80%, you receive an official Certificate of Completion.
- Permanent public credential verification link
- Cryptographically secure verification record
- Directly shareable on LinkedIn and professional portfolios
Learner reviews & ratings
No ratings yet
Frequently asked questions
What languages are covered?
The exercises focus on modern JavaScript, TypeScript, and Python paradigms with universal principles applicable across all programming languages.
Is this beginner-friendly?
Yes. Lessons start from foundational syntax and code tracing before advancing into multi-file architectures and coding agents.
Can I ask Clare for help?
Yes. Clare, your Practisi tutor, is available in the right panel to guide your reasoning without writing your answers for you.
Can I earn a certificate?
Yes. Complete all 12 modules and Final Challenges with a course score of at least 80% to earn your Certificate of Completion.