codex-lv2-may-2025

Level Navigation: 0

Current Level: 9

Lesson: Bonus Challenge - Multi-Page Website & Collaboration

🎯 Objective

Build multiple pages using Emmet shortcuts, publish your website with GitHub Pages, and collaborate with classmates through GitHub issues and pull requests.

🚀 Bonus Challenge: Build Multiple Pages

Step 1: Create Additional Pages

Challenge yourself to build as many pages as you can before the end of class! Here are some ideas:

About Me Page (about.html)
- Use section>article>h1+p*3 for structure
- Add your name, interests, and goals
- Include a photo using img shortcut
Projects Page (projects.html)
- Use section>article*3>h2+p+ul>li*3 for project listings
- Showcase 3 projects you’re working on
- Add links to each project
Contact Page (contact.html)
- Use section>form>input*3+textarea+button for a contact form
- Include your email and social media links
- Add a map or location info
Blog Page (blog.html)
- Use section>article*5>h2+p*2 for blog posts
- Write short posts about what you’re learning
- Add dates and categories

Step 2: Link Your Pages Together

Add navigation to each page using:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="projects.html">Projects</a>
  <a href="contact.html">Contact</a>
  <a href="blog.html">Blog</a>
</nav>

Use Emmet shortcut: nav>a*5 then add the content

Step 3: Style Your Pages

Add CSS to make your pages look professional
Use the CSS framework from Level 8 (Sakura CSS)
Create a consistent design across all pages

🌐 Publish with GitHub Pages

Step 1: Enable GitHub Pages

Go to your GitHub repository
Click on Settings tab
Scroll down to Pages section
Under Source, select Deploy from a branch
Choose main branch and /(root) folder
Click Save

Step 2: Access Your Live Website

Your website will be available at: https://yourusername.github.io/your-repo-name
It may take a few minutes to deploy
Share this URL with your classmates!

👥 Collaboration Challenge

Share your GitHub Pages URL with a partner
Ask them to review your pages and provide feedback
Look at their website and give them feedback too

Step 2: Create an Issue (Extra Bonus)

Go to your partner’s GitHub repository
Click on Issues tab
Click New Issue
Create a helpful issue with:
- Title: “Great website! Here’s some feedback”
- Description: Share what you liked and suggestions for improvement
- Be constructive and encouraging!

Step 3: Create a Pull Request (Super Bonus)

Fork your partner’s repository
Make a small improvement (fix a typo, add a link, improve styling)
Create a pull request with your changes
Include a friendly message explaining your contribution
Get help on this if your are having trouble

✅ Summary

You’ve learned how to:

Build multiple pages using Emmet shortcuts
Create a complete website structure
Publish your work with GitHub Pages
Collaborate with classmates through GitHub
Give and receive constructive feedback
Contribute to open source projects

This bonus challenge combines all your Emmet skills with real-world web development and collaboration practices!