K
K12worX Education501(c)(3) Public Charity
Jamboree

Changing Text Content

Let's make your first real contribution to the K12worX website! This guide walks you through changing text content safely and effectively.

What You'll Learn

  • How to find text in the codebase
  • Safe ways to change content
  • How to preview changes
  • What to test after changing text
  • When to commit your changes

Why Start with Text Changes?

Text changes are the safest type of edit because:

  • ✅ Hard to break functionality
  • ✅ Easy to undo
  • ✅ Immediate visual feedback
  • ✅ Builds confidence

Perfect for your first real contribution!

Prerequisites

Before starting:

  • ✅ Dev server running (npm run dev)
  • ✅ Browser open at http://localhost:3000
  • ✅ VS Code open with the project

Exercise 1: Change a Heading

Step 1: Identify What to Change

Let's change the main homepage headline.

Current text (on localhost:3000):

"Every Student Can Achieve Their Full Academic Potential"

Open your browser and find this text on the homepage.

Step 2: Find It in Code

Method 1: Search in VS Code

  1. Press Cmd+Shift+F (Mac) or Ctrl+Shift+F (Windows)
  2. Type: Every Student Can Achieve
  3. Hit Enter
  4. See results - should show app/page.tsx

Method 2: Direct Navigation

  1. Open file explorer in VS Code
  2. Navigate to app/page.tsx
  3. Press Cmd+F (Mac) or Ctrl+F (Windows)
  4. Search for Every Student

Step 3: Make the Change

Find this code (around line 16):

<h1 className="text-4xl md:text-6xl font-bold mb-6">
  Every Student Can Achieve Their Full Academic Potential
</h1>

Change the text to:

<h1 className="text-4xl md:text-6xl font-bold mb-6">
  Empowering Students Through Community Tutoring
</h1>

Or write your own headline!

Step 4: Save and Preview

  1. Save: Cmd+S or Ctrl+S
  2. Check terminal: Should say "Compiled successfully"
  3. Check browser: Headline should update automatically!

Step 5: Verify the Change

Checklist:

  • New text appears on the page
  • Formatting looks correct (not broken)
  • No errors in terminal
  • No errors in browser console (F12)

If something's wrong: Hit Cmd+Z or Ctrl+Z to undo!

Exercise 2: Update a Paragraph

Find the Subtitle

Look for (around line 19):

<p className="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">
  A student-powered network of AI-amplified tutors and mentors, celebrating the potential of students in underserved communities across the United States.
</p>

Make It Your Own

Change to:

<p className="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">
  High school and college students building an AI-powered tutoring network that closes educational opportunity gaps for K-8 students nationwide.
</p>

Or create your own description!

Test It

  1. Save
  2. Check browser
  3. Read the new text - does it make sense?
  4. Is it the right length? (Not too long or too short?)

Exercise 3: Change a Section Heading

Find "Our Mission" Section

Search for: Our Mission

You'll find (around line 44):

<h2 className="text-3xl font-bold text-gray-900 mb-4">Our Mission</h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
  To celebrate the potential of students in underserved US communities by closing the educational opportunity gap.
</p>

Update Both Heading and Description

Change to:

<h2 className="text-3xl font-bold text-gray-900 mb-4">What We Do</h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
  We connect motivated student tutors with K-8 learners, amplified by AI technology to maximize impact and close educational opportunity gaps.
</p>

Verify Consistency

After changing a section heading:

  • Does it fit the page theme?
  • Is the tone consistent with other sections?
  • Does the description match the heading?

Exercise 4: Update Button Text

Find Call-to-Action Buttons

Search for: Join the Launching Committee

You'll find (around line 24):

<Link
  href="/launching"
  className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
>
  Join the Launching Committee
</Link>

Change Button Text

Options:

  • "Get Started Today"
  • "Join Our Team"
  • "Learn More"
  • "Sign Up Now"

Pick one and update:

<Link
  href="/launching"
  className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
>
  Get Started Today
</Link>

Test Button

  1. Save and preview
  2. Click the button - does it still work?
  3. Check that link goes to correct page
  4. Does new text fit in the button (not too long)?

Exercise 5: Update Card Content

Find Feature Cards

Search for: Laser-Focused Sessions

You'll find (around line 100):

<h3 className="text-xl font-semibold mb-2">Laser-Focused Sessions</h3>
<p className="text-gray-600">
  AI-driven insights identify specific learning gaps, making every tutoring hour count.
</p>

Change Card Text

Update to:

<h3 className="text-xl font-semibold mb-2">Personalized Learning</h3>
<p className="text-gray-600">
  AI technology helps tutors identify each student's unique needs and deliver targeted support.
</p>

Consistency Check

When changing cards:

  • Keep similar length across all cards
  • Maintain consistent tone
  • Check alignment and spacing

Best Practices for Text Changes

1. Keep It Concise

{/* ✅ Good: Clear and concise */}
<p>High school students tutoring K-8 learners with AI support.</p>

{/* ❌ Too verbose */}
<p>
  This innovative program leverages the unique capabilities of highly motivated
  high school and college students who are passionate about education to provide
  comprehensive tutoring services to K-8 students in underserved communities...
</p>

2. Match the Tone

{/* ✅ Professional yet friendly */}
<h2>Join Our Community</h2>

{/* ❌ Too casual */}
<h2>Hey! Come hang with us!</h2>

{/* ❌ Too formal */}
<h2>Request Admission to Our Organization</h2>

3. Check Grammar and Spelling

Before saving:

  • Read the text aloud
  • Check for typos
  • Verify punctuation
  • Ensure capitalization is consistent

4. Consider Length

{/* ✅ Fits well in button */}
<button>Get Started</button>
<button>Learn More</button>

{/* ❌ Too long for button */}
<button>Click Here To Get Started With Our Amazing Program</button>

5. Preserve Structure

Only change the text between tags:

{/* ✅ Correct */}
<h1 className="text-4xl font-bold">
  New Heading Text
</h1>

{/* ❌ Don't change the tags or classes */}
<h2 className="text-2xl">
  New Heading Text
</h2>

Common Text Elements to Change

Headings

<h1>Main page title</h1>
<h2>Section heading</h2>
<h3>Subsection heading</h3>

Paragraphs

<p>Body text describing features, benefits, or information.</p>

<Link href="/page">Link text</Link>

Buttons

<button>Button text</button>

Badges/Labels

<span>Badge text</span>

Finding Text to Change

  1. Browse the website
  2. Note what you want to change
  3. Use Cmd+Shift+F to search for that text
  1. Know which page (e.g., homepage)
  2. Open app/page.tsx
  3. Browse through the file
  4. Edit what you find

Method 3: Follow the Structure

Homepage → app/page.tsx
About page → app/about/page.tsx
Contact page → app/contact/page.tsx

Testing Your Changes

Visual Testing

Check these:

  1. Text displays correctly
  2. Formatting is intact
  3. Spacing looks right
  4. No text overflow
  5. Responsive on mobile (resize browser)

Functional Testing

If you changed:

  • Link text: Click it, verify destination
  • Button text: Click it, ensure it works
  • Form labels: Check form still works

Browser Testing

Test in multiple browsers (if available):

  • Chrome
  • Firefox
  • Safari
  • Edge

Undoing Changes

Option 1: Undo in Editor

Cmd+Z (Mac) or Ctrl+Z (Windows)

Use when: You just made the change

Option 2: Git Checkout

# Discard all changes in one file
git checkout -- app/page.tsx

# Discard all changes in project
git checkout -- .

Use when: You want to reset to last commit

Option 3: Git Stash

# Temporarily save changes
git stash

# Restore stashed changes later
git stash pop

Use when: You want to save changes for later

When to Commit

Good times to commit:

  • ✅ After completing a set of related changes
  • ✅ When changes are tested and working
  • ✅ Before starting a different task
  • ✅ End of work session

Don't commit:

  • ❌ Broken code
  • ❌ Incomplete changes
  • ❌ Untested changes

We'll cover Git in detail in Chapter 07!

Troubleshooting

Problem: Text doesn't update in browser

Solutions:

  1. Did you save the file? (Cmd+S or Ctrl+S)
  2. Check terminal for errors
  3. Hard refresh: Cmd+Shift+R or Ctrl+Shift+R
  4. Restart dev server: Ctrl+C, then npm run dev

Problem: Layout breaks after text change

Causes:

  • Text too long (overflows container)
  • Accidentally deleted a closing tag

Solutions:

  • Make text shorter
  • Check for missing </tag>
  • Undo with Cmd+Z and try again

Problem: Changed wrong text

Solutions:

  • Cmd+Z to undo
  • Or git checkout -- filename to reset file

Problem: Can't find the text in code

Try:

  1. Search for partial text
  2. Check spelling (exact match needed)
  3. Search in different files
  4. Look in components/ folder if not in app/

Quick Reference

Find text:

Cmd+Shift+F (Mac) or Ctrl+Shift+F (Windows)

Find in current file:

Cmd+F (Mac) or Ctrl+F (Windows)

Save file:

Cmd+S (Mac) or Ctrl+S (Windows)

Undo:

Cmd+Z (Mac) or Ctrl+Z (Windows)

Hard refresh:

Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

Reset file:

git checkout -- filename

Practice Checklist

Try changing these items for practice:

  • Homepage main headline
  • Homepage subtitle
  • A section heading
  • Button text
  • Card title and description
  • Footer text (if you can find it!)

What's Next

Now that you're comfortable changing text, let's learn how to add new navigation links:

Adding New Links →