Demo Mode

No student ID available

Activity 1 of 5

Activity 1: 01-first-repo

Practice and reinforce the concepts from Lesson 1

Your First Repository: Quick Exercise

🎯 Build a Personal Landing Page

Create and deploy a personal landing page in 15 minutes!

📝 Step One: Initialize (2 minutes)

bash

# Create project
mkdir personal-site
cd personal-site

# Initialize Git
git init

# Create initial file
echo "# Personal Site" > README.md
git add README.md
git commit -m "Initial commit"

🎨 Step 2: Build Your Page (5 minutes)

Create index.html:

html

<!DOCTYPE html>
<html>
<head>
    <title>Your Name - Portfolio</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background: #f5f5f5;
        }
        .header {
            background: linear-gradient(135deg, #ec008c, #fc6767);
            color: white;
            padding: 60px 40px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 40px;
        }
        h1 { margin: 0; font-size: 2.5em; }
        .tagline { opacity: 0.9; margin-top: 10px; }
        .section {
            background: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .skill {
            background: #e3f2fd;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        a {
            color: #ec008c;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Your Name</h1>
        <p class="tagline">Aspiring Developer | Git Enthusiast | Lifelong Learner</p>
    </div>

    <div class="section">
        <h2>👋 About Me</h2>
        <p>I'm learning web development and version control with Git. This is my first deployed website using GitHub Pages!</p>
    </div>

    <div class="section">
        <h2>🚀 Skills</h2>
        <div class="skills">
            <span class="skill">HTML</span>
            <span class="skill">CSS</span>
            <span class="skill">Git</span>
            <span class="skill">GitHub</span>
            <span class="skill">Problem Solving</span>
        </div>
    </div>

    <div class="section">
        <h2>📫 Connect</h2>
        <p>
            GitHub: <a href="https://github.com/YOUR-USERNAME">@YOUR-USERNAME</a><br />
            Email: your.email@example.com
        </p>
    </div>

    <div class="section">
        <h2>🎯 Current Goal</h2>
        <p>Master Git and GitHub to collaborate on open source projects!</p>
    </div>
</body>
</html>

💾 Step 3: Commit Your Work (2 minutes)

bash

# Stage the HTML file
git add index.html

# Commit with clear message
git commit -m "Add personal landing page with about, skills, and contact sections"

# View your commits
git log --oneline

🚀 Step 4: Push to GitHub (3 minutes)

Create new repo on GitHub called personal-site
Connect and push:

bash

# Add remote
git remote add origin https://github.com/YOUR-USERNAME/personal-site.git

# Push to GitHub
git push -u origin main

🌐 Step 5: Deploy with GitHub Pages (3 minutes)

Go to Settings -> Pages
Source: Deploy from branch
Select main branch, / (root)
Save

Your site will be live at: https://YOUR-USERNAME.github.io/personal-site/

✨ Bonus Enhancements

Add these with new commits:

bash

# Add improvements with new commits
# - Add meta tags for SEO
# - Add animations with CSS
# - Add dark mode toggle
# - Customize styling
git add .
git commit -m "Add enhancements"
git push

✅ Success Checklist

Repository created locally
At least 2 commits made
Pushed to GitHub
GitHub Pages enabled
Site is live on the internet!

🎉 Congratulations!

You've just:

Created a Git repository
Built a personal website
Deployed it to the internet
All in under 15 minutes!

Share your live URL with friends! 🎊

Activity 1 of 5

Activity 1: 01-first-repo

Practice and reinforce the concepts from Lesson 1

Your First Repository: Quick Exercise

🎯 Build a Personal Landing Page

Create and deploy a personal landing page in 15 minutes!

📝 Step One: Initialize (2 minutes)

bash

# Create project
mkdir personal-site
cd personal-site

# Initialize Git
git init

# Create initial file
echo "# Personal Site" > README.md
git add README.md
git commit -m "Initial commit"

🎨 Step 2: Build Your Page (5 minutes)

Create index.html:

html

<!DOCTYPE html>
<html>
<head>
    <title>Your Name - Portfolio</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background: #f5f5f5;
        }
        .header {
            background: linear-gradient(135deg, #ec008c, #fc6767);
            color: white;
            padding: 60px 40px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 40px;
        }
        h1 { margin: 0; font-size: 2.5em; }
        .tagline { opacity: 0.9; margin-top: 10px; }
        .section {
            background: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .skill {
            background: #e3f2fd;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        a {
            color: #ec008c;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Your Name</h1>
        <p class="tagline">Aspiring Developer | Git Enthusiast | Lifelong Learner</p>
    </div>

    <div class="section">
        <h2>👋 About Me</h2>
        <p>I'm learning web development and version control with Git. This is my first deployed website using GitHub Pages!</p>
    </div>

    <div class="section">
        <h2>🚀 Skills</h2>
        <div class="skills">
            <span class="skill">HTML</span>
            <span class="skill">CSS</span>
            <span class="skill">Git</span>
            <span class="skill">GitHub</span>
            <span class="skill">Problem Solving</span>
        </div>
    </div>

    <div class="section">
        <h2>📫 Connect</h2>
        <p>
            GitHub: <a href="https://github.com/YOUR-USERNAME">@YOUR-USERNAME</a><br />
            Email: your.email@example.com
        </p>
    </div>

    <div class="section">
        <h2>🎯 Current Goal</h2>
        <p>Master Git and GitHub to collaborate on open source projects!</p>
    </div>
</body>
</html>

💾 Step 3: Commit Your Work (2 minutes)

bash

# Stage the HTML file
git add index.html

# Commit with clear message
git commit -m "Add personal landing page with about, skills, and contact sections"

# View your commits
git log --oneline

🚀 Step 4: Push to GitHub (3 minutes)

Create new repo on GitHub called personal-site
Connect and push:

bash

# Add remote
git remote add origin https://github.com/YOUR-USERNAME/personal-site.git

# Push to GitHub
git push -u origin main

🌐 Step 5: Deploy with GitHub Pages (3 minutes)

Go to Settings -> Pages
Source: Deploy from branch
Select main branch, / (root)
Save

Your site will be live at: https://YOUR-USERNAME.github.io/personal-site/

✨ Bonus Enhancements

Add these with new commits:

bash

# Add improvements with new commits
# - Add meta tags for SEO
# - Add animations with CSS
# - Add dark mode toggle
# - Customize styling
git add .
git commit -m "Add enhancements"
git push

✅ Success Checklist

Repository created locally
At least 2 commits made
Pushed to GitHub
GitHub Pages enabled
Site is live on the internet!

🎉 Congratulations!

You've just:

Created a Git repository
Built a personal website
Deployed it to the internet
All in under 15 minutes!

Share your live URL with friends! 🎊