Collaboration & Teamwork in Web Development

In real-world software development, working together is just as important as writing code. This guide covers key collaboration tools and workflows, especially VSCode Live Share, Git-based teamwork, and pair programming.

VSCode Live Share

VSCode Live Share lets you collaborate in real time. You and your teammates can edit, debug, and even use the terminal together — all from your own devices.

How to Use Live Share

  1. Install the Live Share extension in VSCode.
  2. Click the Live Share button in the bottom bar to start a session.
  3. Share the invite link with your partner(s).
  4. Teammates can join and collaborate in your coding environment.
  5. Use shared terminal, servers, and debugging tools together.

Live Share is perfect for:

  • Pair programming
  • Mentoring or tutoring
  • Remote debugging
  • Collaborative review sessions

Pair Programming Strategies

Pair programming is when two developers work together at one workstation — one codes (“driver”), and the other reviews and guides (“navigator”).

How to Do It

  • One person writes code, the other watches, gives ideas, and catches bugs.
  • After 10–15 minutes, switch roles.
  • Keep communication active and respectful.
  • Use Live Share so you can work from separate computers.

When to Pair Program vs Split Tasks

Split Work By Features (Best for Teams of 3+)

  • Divide features logically: e.g., one person works on login, another on leaderboard, a third on game logic.
  • Use branches to avoid merge conflicts.
  • Later, merge and integrate your parts.

Pair Program When…

  • Working on tricky features
  • Debugging something complex
  • Reviewing code before a big push

Git Collaboration Basics

Version control is your safety net for team coding.

Git Concepts to Know

Tools to Use

ç

Collaborative Blog Post in about.md with VSCode Live Share

Purpose

Practice real-time collaboration by writing and styling a short blog post together about something you both have in common.

How It Works

  1. Chat In Person First
    Talk to your partner about something you both enjoy — a favorite sport, hobby, subject, or interest.

  2. Start a Live Share Session
    One partner starts VSCode Live Share and shares the invite link.

  3. Open the about.md file together

  4. Write Together
    In the same file, write a short blog post (2-3 sentences) about the shared interest.

  5. Add a Picture
    Include a relevant image in the images/ folder and embed it with inline styles to adjust the size or layout.

  6. Add Fun Styles
    Use inline CSS styles inside your markdown (e.g., colors, margins, borders) to make your post visually appealing.

  7. Switch Roles
    One person can write content while the other styles, then swap.

  8. Review Your Work Together
    Talk about what you added and how the styles improve the look.

Example

## Our Shared Passion: Basketball

Basketball is an exciting game we both love. It’s fast-paced and helps us stay active.

<img src="/student/images/basketball.png" alt="Basketball" style="width:150px; border-radius: 10px; margin: 10px;">

We enjoy playing and watching games, especially during the playoffs!

Quick Intro to CSS Styling

CSS (Cascading Style Sheets) lets you control how your content looks — size, color, spacing, layout, and more!

In this project, you’ll use inline CSS, which means writing style rules directly inside your HTML elements.

Syntax Example

<img src="/student/images/baking.png" alt="Baking" style="width:150px;">

style="..." goes inside your HTML tag.

width:150px; makes the image 150 pixels wide.

You can also add other styles like:

style="border-radius: 10px; margin: 10px; box-shadow: 2px 2px 5px gray;"

Try It!

Add styles like these to your about.md content:

  • Change the size of an image
  • Add space around a heading
  • Make a heading a different color:
<h2 style="color: teal;">My Hobbies</h2>