Week 1 Assignment — Your First Website (Git + HTML + CSS)

Welcome to your first web assignment! By the end of this week, you will have:

• A simple personal website (just one page)
• Basic understanding of HTML (structure) and CSS (style)
• Practiced using Git (clone, commit, push, pull request)
• Published your site live with GitHub Pages 🚀

Part 1: Setup

1. Accept the assignment link from GitHub Classroom.

2. Clone your repository to your computer:

   git clone <your-repo-url>
   cd <repo-name>
   
   

3. Open the project in VS Code (or your editor).

4. Make sure you see two files:

   • index.html → your website’s content
   • style.css → your website’s style

Part 2: HTML (Structure)

Open index.html and follow the instructions in the comments.

You will:

• Add an <h1> with your name
• Add a <p> paragraph about yourself
• Add an <img> of you or something you like (with alt text)
• Add a list (<ul> or <ol>) of your goals
• Add an <a> link to your favorite website
• Wrap sections inside <header>, <main>, and <footer>

👉 Think of HTML as the skeleton of your website.

---

Part 3: CSS (Style)

Open style.css and follow the instructions in the comments.

You will:

• Change the color of your <h1>
• Change the background color of the page
• Pick a new font-family
• Add spacing with margin and padding
• Add hover effects to your links
• Style a list (bullets, colors, or remove bullets)
• Make something look unique (challenge step!)

👉 Think of CSS as the clothes and design of your website.

---

Part 4: Git Workflow

You must make at least 5 commits with clear messages.

Example workflow:

git status                # check changes
git add index.html        # stage your file
git commit -m "added h1 with my name"
git push origin main      # upload to GitHub

✅ Each change (adding h1, adding a paragraph, styling background) should be its own commit.

---

Part 5: Submit Your Work

1. Go to your repo on GitHub.

2. Make sure all your changes are pushed.

3. Set up GitHub Pages:

   • Settings → Pages → Deploy from branch
   • Branch: main, Folder: /root
   • Save → wait a minute → your live link will appear

4. Submit:

   • Repo link
   • Live site link
   • (Optional) Screenshot of your site

---

Checklist (Before Submitting ✅)

• <h1> with your name
• Image with alt text
• Paragraph about yourself
• List of goals
• Link to another site
• Footer with email (mailto:)
• CSS file linked and working
• Background color changed
• Font changed
• At least one hover effect
• 5+ commits with good messages
• Live site published on GitHub Pages

---

Reflection (Write in Your PR Description)

• One thing you learned
• One thing you struggled with
• One thing you want to try next

---

🎉 Congratulations! By finishing this, you’ve officially published your first website on the internet.