Exploring Localhost

Now that your dev server is running and you can see the website at http://localhost:3000, let's explore what you're looking at and understand the connection between the browser and the code.

What You're Seeing

The K12worX Learning Jamboree website is now running on your local machine! Let's take a tour.

Homepage Tour

1. Header

At the top of the page:

Logo: K12worX branding
Navigation menu: Links to different pages
Responsive: Try resizing your browser - menu changes on mobile!

Code location: components/layout/Header.tsx and components/layout/Navigation.tsx

2. Hero Section

The large banner with main message:

Bold headline
Descriptive subtitle
Call-to-action buttons

Code location: app/page.tsx (around lines 10-30)

3. Content Sections

Scroll down to see:

Mission statement
How it works
Get involved section
Footer with links

Code location: All in app/page.tsx

Connecting Browser to Code

Let's see how changing code affects the browser.

Exercise 1: Find the Homepage File

In VS Code, open: app/page.tsx
This file generates what you see at http://localhost:3000

Understanding the connection:

app/page.tsx  →  http://localhost:3000/
app/about/page.tsx  →  http://localhost:3000/about
app/contact/page.tsx  →  http://localhost:3000/contact

File location = URL!

Exercise 2: Reading the Code

Look at app/page.tsx. You'll see:

export default function Home() {
  return (
    <LandingLayout>
      {/* HTML-like code here */}
    </LandingLayout>
  )
}

What this means:

Home is a function (component)
It returns JSX (HTML-like syntax)
LandingLayout wraps the content with header/footer
Everything inside is what you see on the page

Exercise 3: Find Text in Code

In browser: Find the main headline (likely "Every Student Can Achieve...")

In VS Code: Search for that text in app/page.tsx

Use Cmd+F (Mac) or Ctrl+F (Windows)
Type the headline text
You'll find it in the code!

This is the key insight: Every piece of text you see in the browser exists somewhere in the code files!

Exploring Other Pages

Navigate to About Page

In browser: Click "About" in the navigation
URL changes to: http://localhost:3000/about
In VS Code: Open app/about/page.tsx

See the pattern? The file structure matches the URL structure!

Try Other Pages

Explore:

Contact: http://localhost:3000/contact → app/contact/page.tsx
Programs: http://localhost:3000/programs → app/programs/page.tsx
Model: http://localhost:3000/model → app/model/page.tsx

Browser DevTools

Let's open the browser's developer tools.

Opening DevTools

Mac: Cmd + Option + I Windows/Linux: F12 or Ctrl + Shift + I

You'll see a panel with tabs:

Console: JavaScript logs and errors
Elements: HTML structure
Network: Files being loaded
Sources: Source code

Using the Console

The Console tab shows:

console.log() messages from your code
JavaScript errors (in red)
Warnings (in yellow)

Try it: Add this to app/page.tsx:

console.log('Hello from the homepage!');

Save, check browser console - you'll see your message!

Inspecting Elements

Right-click any element on the page
Choose "Inspect" or "Inspect Element"
DevTools opens, highlighting that element's HTML

Useful for: Understanding how elements are structured and styled.

Understanding Tailwind Classes

Inspect an element with lots of classes:

<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">

In the Elements/Inspector tab, you'll see all the Tailwind classes and their resulting CSS.

Learning opportunity: See what each class does!

Hot Reload in Action

Let's prove hot reload works:

Test 1: Change Text

Open app/page.tsx
Find the main headline
Change one word
Save (Cmd+S / Ctrl+S)
Watch the browser - updates in < 1 second!

Test 2: Change Color

Find a Tailwind class like text-gray-900
Change to text-blue-600
Save
Watch the color change instantly!

Test 3: Break Something

Delete a closing tag </div>
Save
Browser shows error overlay - Next.js tells you what's wrong!
Put the tag back, save - error disappears!

This is your safety net - errors are caught immediately!

Common Page Types

Our website has different layouts for different page types:

Landing Pages

Example: Homepage (app/page.tsx)

Bold hero section
Marketing-focused
Large typography
Uses LandingLayout

Article Pages

Example: About, Model pages

Content-heavy
Readable typography
Narrow column for text
Uses ArticleLayout

Standard Pages

Example: Contact, Programs

Functional pages
Forms or listings
Standard layout
Uses DefaultLayout

Learning point: Different layouts for different purposes!

Understanding the Access Gate

If you see a password prompt when visiting localhost:

What It Is

components/AccessGate.tsx - protects the entire site during launch phase

How It Works

Shows password form
Stores password in localStorage
Wraps all pages in app/layout.tsx

Disabling It (For Development)

Temporary: Just enter the password (ask your coordinator)

Permanent (for local development):

Open components/AccessGate.tsx
Find line 8: const GLOBAL_ACCESS_GATE_ENABLED = true;
Change to: const GLOBAL_ACCESS_GATE_ENABLED = false;
Save - access gate disabled!

Don't commit this change - it's just for local development!

What to Look For

As you explore, notice:

1. Consistent Design

Same header on every page
Consistent color scheme (blues, grays)
Similar button styles
Uniform spacing

Why: Tailwind's design system ensures consistency!

2. Responsive Design

Resize your browser window - see how the layout adapts:

Desktop: Wide, multiple columns
Tablet: Medium, fewer columns
Mobile: Narrow, single column, hamburger menu

Try: Open DevTools, click the device toggle (phone icon), test different screen sizes

3. Component Reuse

Notice the same Header and Footer on every page?

Why: Defined once in layouts, reused everywhere!

Exploration Checklist

Tips for Exploring

1. Be Curious

Click everything! You can't break the production site - this is your safe environment.

2. Make Connections

For every visual element, try to find it in the code. This builds your mental map!

3. Take Notes

Write down:

Where files are located
Which files generate which pages
Patterns you notice

4. Experiment

Try changing things! Best way to learn is by doing.

What You've Learned

After exploring localhost, you now understand:

✅ How to navigate the local website
✅ The connection between code files and browser pages
✅ How to use browser DevTools
✅ How hot reload works
✅ The file structure → URL pattern
✅ Different layout types
✅ How to inspect and experiment

Next Steps

You've explored the site - now let's make your first real code change!

Your First Code Change →