Web Development · module 11 of 13

Tooling, Git & Delivery

Use modules, package scripts, formatting, Git branches, useful commits, environment configuration, and a repeatable deployment workflow.

Course map
working diryour editsgit addstagingwhat goes nextgit commithistorysaved locallygit pushremotesharedStaging is the step people skip past, and it is the useful one: it lets you commit part of what youchanged, so one commit can be one idea even when you edited five things at once.git add -A stages everything — including work you did not mean to bundle in.
Tooling, Git & Delivery — the idea in one picture

What this module covers

5 steps · Web Development

  1. Step 1. Lesson: Tooling, Git & Delivery

    Use modules, package scripts, formatting, Git branches, useful commits, environment configuration, and a repeatable deployment workflow. Learning objectives - Recognize when tooling, git & delivery is the right tool. - Explain the role of import, npm, git. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Use modules, package scripts, formatting, Git branches, useful commits, environment configuration, and a repeatable deployment workflow. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Use the example to demonstrate tooling, git & delivery.

  2. Step 2. Quiz: Tooling, Git & Delivery

    Check your understanding of Tooling, Git & Delivery.

    An environment example documents required keys without exposing secret values. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Complete the knowledge check.

  3. Step 3. Exercise: Tooling, Git & Delivery

    Split a small app into modules, add development and test scripts, then document a clean feature-branch workflow.

    This exercise turns the Tooling, Git & Delivery lesson into a working code change. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the solution use import and npm and git?

  4. Step 4. Review lab: Explain & improve Tooling, Git & Delivery

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how import, npm, git work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the improved version still use import, npm, git clearly?

  5. Step 5. Mini project: Tooling, Git & Delivery

    Prepare an existing web app for delivery with modules, scripts, environment examples, a README, meaningful commits, and deployment checks.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the project apply the module's tooling, git & delivery skills?

Loading code lab...