GDG PUP HTML & CSS Study Jam 1

Welcome to the HTML & CSS Workshop by GDG on Campus PUP! 🚀

This repository contains the materials and activities for our study jam. Whether you're a beginner or looking to refresh your skills, this repo will guide you through building your first portfolio website.

📂 Repository Structure

Explore the contents of this repository below. Click on the folder names to navigate!

1. Live Project

This folder contains the Finished Code we used during the live coding session.

• Use this if: You want to review what we built during the event or start your portfolio from the base template.
• Contains: index.html, styles.css, and a guide on how to customize it.

2. Post-Jam Activity

This is your Challenge! 🎯

• Use this if: You are ready to apply what you learned and extend the portfolio.
• The Mission: Add 2 new sections of your to the portfolio.
• Contains: A modified boilerplate with instructions for the activity.

3. Assets

Contains images and resources used in the guides and tutorials.

Note: You can ignore the .github folder. It contains configuration files for the repository template and isn't part of the workshop.

---

🌟 Getting Started

Follow these simple steps to get your own copy of the project!

Step 1: Fork the Repository

First, we need to make a copy of this project into your own GitHub account.

1. Look for the Fork button at the top-right corner of this page.
2. Click it!

(Image Description: The 'Fork' button located at the top right of the GitHub page, between 'Watch' and 'Star'.)

Step 2: Create Your Fork

1. If asked "How are you planning to use this fork?", select For my own purposes.
2. You will see a page to name your fork. You can leave the name as is.
3. Click the green Create fork button.

(Image Description: The 'Create a new fork' page. If prompted, select 'For my own purposes' before clicking the green 'Create fork' button.)

Step 3: Open with GitHub Desktop

Now that you have your own copy, let's put it on your computer.

1. On your new repository page, click the green Code button.
2. Select Open with GitHub Desktop.

(Image Description: The dropdown menu that appears after clicking the green 'Code' button, highlighting the 'Open with GitHub Desktop' option.)

Step 4: Clone to Your Computer

1. GitHub Desktop will open up.
2. Choose a folder on your computer where you want to save the project.
3. Click Clone.

(Image Description: The GitHub Desktop popup window showing the 'Local Path' selection and the blue 'Clone' button.)

Step 5: Open in VS Code

1. Once the download finishes, you will see buttons in GitHub Desktop.
2. Click Open in Visual Studio Code.

(Image Description: The main view of GitHub Desktop showing the 'Open in Visual Studio Code' button in the right panel.)

Step 6: Start Coding!

1. In VS Code, look at the file explorer on the left.
2. Open the Post-Jam Activity folder.
3. Right-click index.html and choose Open with Live Server.

(Image Description: The VS Code context menu showing the 'Open with Live Server' option.)

---

📅 Submission

Submit your completed Post-Jam Activity via Google Classroom.

• Check the Google Classroom for the assignment link and deadline.
• You will likely need to submit the link to your GitHub repository and a screenshot of your site.

🎉 Happy Coding!

We’re excited to see your creativity! Remember, every line of code you write brings you one step closer to mastering web development.

Built with ❤️ by GDG on Campus PUP