WEEK 1

CedarPoint Full-Stack Bootcamp

Orientation + Web Basics

Speaker Notes:

Welcome students warmly to their first session
Set an energetic, encouraging tone
Ask: "Who's excited to build their first website?"
Mention this is a 6-week intensive journey

Your Instructor

Full-Stack Developer

5+ years experience teaching web development

By End of Week 1

You Will Build

A clean, multi-section webpage

Speaker Notes:

Introduce yourself briefly - keep it personal but concise
Emphasize the tangible outcome: "By Friday, you'll have a real webpage"
Ask: "Has anyone tried coding HTML before?"

6-Week Journey

1

HTML & CSS Basics

Structure & style

2

Responsive Design

Mobile-first layouts

3

JavaScript Fundamentals

Interactive pages

4

APIs & Projects

Real data integration

5

Auth & Databases

Backend intro

6

Final Project

Deploy & showcase

Speaker Notes:

Give context: "This is your learning path"
Emphasize progression: "Each week builds on the previous"
Ask: "By Week 6, what kind of project would you want to build?"

Essential Tools

VS Code

Your code editor

Browser DevTools

Debug & inspect

GitHub

Version control

Zoom

Live sessions

WhatsApp Group

Quick support

Speaker Notes:

Confirm everyone has VS Code installed
Show quick demo of DevTools (F12)
Ask: "Who has used GitHub before?"
Share WhatsApp group link

Our Learning Flow

1

Live Session

Learn new concepts together

→

2

Practice

Try it yourself with guidance

→

3

Homework

Build real projects

→

4

Review

Feedback & improvement

Speaker Notes:

Emphasize the cycle: "This repeats each session"
Set expectations: "Homework is essential for learning"
Ask: "Questions about the learning process?"

Keys to Success

Attend Sessions

Be present and engaged

Daily Practice

30-60 minutes minimum

Ask Questions

No question is too small

Submit Homework

Practice makes permanent

Be Respectful

Support each other's growth

Speaker Notes:

Make it positive: "These aren't rules, they're your success formula"
Emphasize community: "We're all learning together"
Ask: "Can everyone commit to 30 minutes of daily practice?"

How the Web Works

User

→

Browser

→

Internet

→

Server

←

Response

• You type a URL (like cedarpoint.com)

• Browser sends request through Internet

• Server processes and sends back HTML/CSS/JS

• Browser renders the page you see

Speaker Notes:

Use analogy: "Like ordering food delivery - request and response"
Keep it simple: "We'll focus on what the browser receives"
Ask: "What happens when you type google.com and hit enter?"

Client vs Server

Client Side

✓

Runs in the browser

✓

What users see & interact with

✓

HTML, CSS, JavaScript

✓

Your computer does the work

Server Side

✓

Runs on remote computers

✓

Processes data & logic

✓

Node.js, Python, databases

✓

Server computers do the work

Speaker Notes:

Emphasize: "Week 1-4 = Client side, Week 5-6 = Server basics"
Analogy: "Restaurant kitchen (server) vs dining area (client)"
Ask: "Can anyone think of examples of client-side interactions?"

What is HTML?

Structure

HyperText Markup Language

The skeleton of every webpage. It defines the content and structure.

• Uses tags like <h1>, <p>, <div>

• Creates hierarchy and organization

• Think of it as the blueprint

html

head

title

body

h1

p

div

img

Speaker Notes:

Draw comparison: "HTML is like the frame of a house"
Show simple example in VS Code
Ask: "What do you think happens if you forget a closing tag?"

What is CSS?

Style

Cascading Style Sheets

The design layer that makes pages beautiful. Controls colors, layout, fonts, and animations.

• Transforms plain HTML into visual designs

• Separates style from structure

• Think of it as the paint & decoration

Before CSS

Plain Text

→

After CSS

Beautiful Design

Speaker Notes:

Analogy: "CSS is like interior design for your webpage"
Show quick live demo changing a color in DevTools
Ask: "What websites do you think have great design?"

What is JavaScript?

Behavior

The Programming Language

Makes pages interactive and dynamic. Responds to user actions and updates content in real-time.

• Handles clicks, forms, animations

• Fetches data without page reload

• Think of it as the functionality

Click Me

👆

User clicks

→

⚡

JS runs code

→

✨

Page updates

Speaker Notes:

Analogy: "JavaScript brings your page to life"
Show example: dropdown menu or form validation
Ask: "What interactive features do you use on websites daily?"

Quick Challenge: Spot the Role

HTML

Structure

<button>
  Click Me
</button>

Defines what exists on the page

CSS

Style

button {
  background: green;
  color: white;
  border-radius: 8px;
}

Controls how it looks

JavaScript

Behavior

button.onclick = () => {
  alert('Clicked!');
}

Defines what it does

Speaker Notes:

Interactive moment: "Let's build a mental model together"
Point to examples: "Which one changes the appearance?"
Ask: "If you wanted to make the button bigger, which would you use?"

Homework 1: Get Started

1

Install & Setup

Download VS Code, install Live Server extension, join WhatsApp group

⏱️ 20 minutes

2

First HTML File

Create index.html with basic structure: doctype, html, head, body tags

⏱️ 15 minutes

3

Simple Page

Add: page title, heading, 2 paragraphs, and 2 links to your favorite sites

⏱️ 25 minutes

Speaker Notes:

Emphasize: "This is your foundation - take it seriously"
Offer support: "Stuck? Post in WhatsApp, we're here to help"
Ask: "Any questions before we move to Session 2 content?"

SESSION 2

HTML Foundations

Building blocks of every webpage

Speaker Notes:

Transition: "Now we dive deeper into HTML"
Check in: "Everyone complete Homework 1?"
Set tone: "Time to become HTML experts"

The HTML Skeleton

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width">
  <title>My First Page</title>
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

📄 DOCTYPE tells browser it's HTML5

🧠 Head contains metadata

👁️ Body contains visible content

Speaker Notes:

Walk through each part: "This is the template for every page"
Emphasize: "You'll type this so many times it becomes automatic"
Ask: "What do you think 'meta viewport' does?"

Essential HTML Tags

<h1>

Main heading

<h1>Welcome</h1>

<p>

Paragraph text

<p>Hello world</p>

<a>

Link to pages

<a href="...">Link</a>

<img>

Display images

<img src="..." alt="...">

<div>

Container block

<div>...</div>

<span>

Inline container

<span>text</span>

Speaker Notes:

Go through each tag: "These are your building blocks"
Show live: Open VS Code and demonstrate each tag
Ask: "What's the difference between div and span?"

Lists & Links

Unordered List (bullets)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Result:

HTML
CSS
JavaScript

Ordered List (numbers)

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JS</li>
</ol>

Result:

Learn HTML
Learn CSS
Learn JS

Links Best Practice

❌ Bad: <a href="...">Click here</a>

✅ Good: <a href="...">Read our guide to HTML</a>

Use descriptive link text for accessibility and SEO

Speaker Notes:

Demonstrate: Show both list types side by side
Emphasize accessibility: "Screen readers rely on good link text"
Ask: "When would you use ol vs ul?"

Forms Basics

Simple Login Form

<form>
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         required>

  <label for="password">Password:</label>
  <input type="password" 
         id="password" 
         required>

  <button type="submit">Login</button>
</form>

Email:

Password:

Login

🏷️ Always pair labels with inputs

🔒 Use correct input types (email, password, etc.)

✅ Add validation with 'required' attribute

Speaker Notes:

Emphasize: "Forms are how users send data"
Show DevTools: "See how browser validates input types"
Ask: "What other input types can you think of?"

Semantic HTML

<nav>

<main>

Why Use Semantic Tags?

♿

Accessibility

Screen readers understand page structure

🔍

SEO

Search engines rank your content better

📖

Readability

Code is easier to understand and maintain

Speaker Notes:

Emphasize: "Semantic = meaningful tags, not just divs everywhere"
Show comparison: div soup vs semantic structure
Ask: "Why is accessibility important for your websites?"

HTML Debugging Checklist

1

Check Indentation

Properly nested = easier to spot errors

<div>
  <p>Indented</p>
</div>

2

Close All Tags

Every opening tag needs a closing tag

<p>...</p> ✅

<p>... ❌

3

Check Nesting

Tags must close in reverse order

<div><p>...</p></div> ✅

<div><p>...</div></p> ❌

4

Use DevTools

Inspect element to see the DOM structure

5

Validate HTML

Use W3C Validator to catch errors

validator.w3.org

Speaker Notes:

Practice: "Let's introduce an error and fix it together"
Show: Quick DevTools demo of inspecting elements
Ask: "What debugging tools have you used before?"

Homework 2: Personal Landing Page

Hero Section

About

Skills

Contact

Requirements:

1

Hero section: Your name, tagline, photo (optional)

2

About section: Short paragraph about yourself

3

Skills list: Use <ul> with at least 5 skills

4

Contact link: Email or social media link

5

Use semantic HTML: header, main, section, footer

Grading: Structure (40%), Semantic tags (30%), Proper indentation (20%), Creativity (10%)

Speaker Notes:

Encourage: "This is YOUR page - make it personal!"
Clarify: "No CSS yet, just clean HTML structure"
Ask: "What will you include in your hero section?"

NEXT SESSION

CSS Basics + Styling Your Page

Transform your HTML into beautiful designs

Colors & Fonts

Box Model

Flexbox Layouts

Responsive Design

Before Next Session:

✅ Complete Homework 2

⏱️ Practice coding 30 minutes daily

💬 Ask questions in WhatsApp group

Speaker Notes:

Energize: "Next week we make things beautiful!"
Encourage: "Daily practice is the secret to success"
Ask: "Any final questions before we wrap up?"
Thank everyone for their attention and participation