🌐 My GitHub Website

A beginner-friendly website project with GitHub Pages!

Welcome! This is a simple website you can customize and host for free on GitHub Pages. It's designed to help you learn Git and GitHub while creating something you can actually see and share!

---

🚀 Quick Links

Resource	Link
📖 New to GitHub?	Start Here
✅ Track Progress	Learning Checklist
🌐 Live Website	https://YOUR_USERNAME.github.io/github-training

---

📸 What This Looks Like

This project creates a simple, interactive website with:

• ✅ Clean, modern design
• ✅ Interactive elements (buttons, counters)
• ✅ Color changer
• ✅ Skills tracker
• ✅ Mobile-friendly (works on phones!)
• ✅ Your own personal touches!

---

🎯 What You'll Learn

• HTML - Structure of webpages
• CSS - Making things look pretty
• JavaScript - Adding interactivity
• Git - Tracking code changes
• GitHub - Storing and sharing code
• GitHub Pages - Free website hosting!

---

🛠️ Setup (For This Project)

Option 1: Start From Scratch (Recommended for Learning)

Follow the Step-by-Step Guide to create your own repository from scratch!

Option 2: Use This Template

1. Click the green "Use this template" button (if available)
2. Or fork this repository
3. Clone it to your computer:

git clone https://github.com/YOUR_USERNAME/github-training.git
cd github-training

Enable GitHub Pages

1. Go to your repository on GitHub
2. Click Settings → Pages
3. Set Source to Deploy from a branch
4. Select main branch, /(root) folder
5. Click Save
6. Wait 2-3 minutes for your site to go live!

---

📁 Project Structure

github-training/
├── .github/
│   └── workflows/          ← GitHub Actions (auto-deploy)
│       ├── deploy.yml      ← Publishes your site
│       └── validate.yml    ← Checks for errors
├── css/
│   └── style.css           ← Makes the site look good
├── js/
│   └── main.js             ← Makes the site interactive
├── index.html              ← Main webpage (homepage)
├── STEP_BY_STEP_GUIDE.md   ← Complete beginner tutorial
├── LEARNING_CHECKLIST.md   ← Track your progress
└── README.md               ← This file

---

📝 Practice Exercises

Exercise 1: Personalize Your Site ⭐ (Easy - 10 min)

Goal: Make the website yours!

1. Open index.html
2. Change the title:

<!-- Find this line -->
<title>My First Website - GitHub Training</title>

<!-- Change to your name -->
<title>Alice's Awesome Website</title>

3. Change the main heading:

<!-- Find this -->
<h1>🚀 Welcome to My First Website!</h1>

<!-- Change to -->
<h1>🚀 Welcome to Alice's Website!</h1>

4. Update the GitHub link in the footer:

<a href="https://github.com/alice" target="_blank">

5. Save, commit, and push:

git add index.html
git commit -m "Personalize website with my name"
git push origin main

6. Wait 2 minutes and refresh your live site!

---

Exercise 2: Change the Colors ⭐ (Easy - 15 min)

Goal: Make the site match your style!

1. Open css/style.css
2. Find the header colors (around line 45):

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

3. Change to your favorite colors! Examples:

/* Ocean theme */
background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);

/* Sunset theme */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* Forest theme */
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

4. Find more gradients at uigradients.com

5. Also change the button color:

button {
    background-color: #667eea;  /* Change this color */

6. Commit and push!

---

Exercise 3: Add a New Section ⭐⭐ (Medium - 20 min)

Goal: Add an "About Me" section.

1. In index.html, find the closing </main> tag
2. Add this before it:

<!-- About Me Section -->
<section id="about-me">
    <h2>About Me</h2>
    <div class="card">
        <h3>Hi, I'm [Your Name]!</h3>
        <p>I'm learning web development and this is my first website.</p>
        <p>Things I love:</p>
        <ul>
            <li>Coding</li>
            <li>Learning new things</li>
            <li>[Add your interests!]</li>
        </ul>
    </div>
</section>

3. Save and test locally (double-click index.html)
4. Commit and push!

---

Exercise 4: Add a Photo ⭐⭐ (Medium - 20 min)

Goal: Add your photo to the site!

1. Create a folder called images in your project
2. Add a photo (name it profile.jpg or profile.png)
3. Add this to your HTML where you want the photo:

<img src="images/profile.jpg" alt="My photo" class="profile-photo">

4. Add CSS to make it look good:

.profile-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;  /* Makes it circular */
    object-fit: cover;
    border: 4px solid #667eea;
}

5. Commit and push!

---

Exercise 5: Create Multiple Pages ⭐⭐⭐ (Advanced - 30 min)

Goal: Add an "About" page.

1. Create about.html:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>About Me</h1>
    </header>
    <main>
        <p>This is my about page!</p>
        <a href="index.html">← Back to Home</a>
    </main>
</body>
</html>

2. Add a link in index.html:

<a href="about.html">About Me</a>

3. Commit and push both files!

---

🎨 Customization Ideas

Here are things you can add to make it unique:

• Change all the colors
• Add your own photos
• Add a favorites section (books, movies, etc.)
• Add a contact form
• Add animations
• Create a dark mode toggle
• Add a blog section
• Embed a YouTube video
• Add a music player
• Create a portfolio gallery

---

🐛 Common Issues & Solutions

Problem	Solution
Site not updating	Clear browser cache (Ctrl+Shift+R)
"404 Page Not Found"	Make sure index.html exists in the root
Changes not showing	Check that you committed AND pushed
Images not loading	Check the file path is correct
CSS not applying	Make sure the link path is correct

---

📚 Helpful Resources

Learning HTML/CSS/JavaScript

• W3Schools - Free tutorials
• MDN Web Docs - Official documentation
• freeCodeCamp - Free courses

Design Inspiration

• Color Hunt - Color palettes
• Google Fonts - Free fonts
• Unsplash - Free photos

Git & GitHub

• GitHub Learning Lab - Interactive courses
• Git Cheat Sheet

---

🤝 How to Contribute

Found a way to make this better?

1. Fork this repository
2. Make your changes
3. Submit a Pull Request

Ideas:

• Add more exercises
• Improve documentation
• Add new interactive features
• Translate to other languages

---

💡 Tips for Success

1. Save often (Ctrl + S)
2. Test locally first (open HTML file in browser)
3. Commit small changes (easier to fix mistakes)
4. Write good commit messages (future you will thank you!)
5. Don't be afraid to break things (Git saves your history!)

---

🎉 Show Off Your Site!

Once your site is live:

• Share the link with friends and family
• Post it on social media
• Add it to your resume/LinkedIn
• Keep improving it over time!

---

Happy coding! Your website is waiting to be built! 🚀