` element so your website has a unique and meaningful title. This title will appear in the browser tab when someone visits your site. --- ### Step-by-Step Instructions 1. 🔍 **Find the file tree** - Look to the **left side of your codespace** and find the list of project files and folders. 2. **Open the `index.html` file** - 📂 Inside the file tree, **click on `index.html`** to open it. 3. 🔍 **Locate the `<title>` element inside the `<head>` element** 4. **Update the text inside `<title>`** - **Replace** the text that says `CHANGE ME` with a creative name for your website. Your updated code should look like this: ```html <head> <title>My Awesome Website

` element**.

## **TODO 4: Add Content** 🎯 **Goal:** Add your name and position to the content section inside the `

` element. --- ### Step-by-Step Instructions 1. 🔍 **Find the `

` element** - Look for this part of the code: ```html

``` 2. **Add an `

` element inside the `
` element. The `
` element should contain your name. 3. Add a `
` element inside the `
` element under the `
` element. The `
` element should contain your position or job title (like `Student at Unicorn High` or `Editor Extraordinaire at DHS Yearbook`). - Your updated code should look like this: ```html

Halle Bot

Mascot at Operation Spark

``` ---

💡 Why Add Your Name and Position?

This personal touch makes your website feel more professional and unique. It also gives visitors insight into who you are.

---
### ✅ Check Your Work! - Preview your site using Live Server. - Verify that your basic page looks like the image below before moving on.

## TODO 5: Add More Content – Interests 🎯 Goal: Add a list of your interests to personalize your site and practice using HTML lists. --- ### Step-by-Step Instructions 1. 🔍 Find the `
` element - Look for this section in your code: ```html

``` 2. Create a new `
` for the Interests section - Inside the `
` element, add a new `
` element with an `id="interests"` attribute: ```html

``` 3. Add a heading inside the Interests div - Inside the `
` element, add an `
` element with the text `Interests`: ```html
Interests
``` 4. Create an unordered list for your interests - Below the `
` tag, add a `
` element: ```html

``` 5. Add three list items for your interests - Inside the `
` element, add three `
` elements to list your interests. - Inside each of the `
` elements, include one of your interests, such as `Coding`, `Football`, or `Sleeping`. After completing this TODO, your updated `
` element should look like this: ```html

Halle Bot

Mascot at Operation Spark

Interests

Coding

Running

Baking Cupcakes

``` ---

💡 Why Use Lists?

Lists help organize information neatly on your website. You’ll often use lists in web development for things like navigation menus, to-do lists, and item descriptions.

---
### ✅ Check Your Work! - Ensure the `
` section is inside the `
` element. - Preview your site using Live Server. You should see a list of interests below your name and title.

🎯 You're halfway there! Keep it up!

## TODO 6: Add an Image 🎯 Goal: Add a personal or meaningful image to the sidebar section. --- ### Step-by-Step Instructions 1. 🔍 Find the `
` element - Look for this part of the code inside the `
` element: ```html

``` 2. Add an `` tag inside the `
` element - Remember that `` elements do not need closing tags! 3. Add a `class="sidebar-img"` attribute and `src="CHANGE_ME"` attribute to your `` element - Your updated code should look like this: ```html

``` 4. Get a good image URL from Google - Open Google Images and search for an image that fits your website. - Right-click the image you want to use, then select "Copy image address."

5. Paste the copied URL into the `src` attribute of the `` tag. - Example: ```html

``` ---

💡 Why Add an Image?

Images make your website more engaging. They also help practice using the `<img>` tag and working with attributes like `src`.

---
### ✅ Check Your Work! - Ensure the image is inside the `
` element. - Preview your site using Live Server. If the image doesn’t load, try checking the URL or replacing it with a different link. - Check that your site looks like the image below before moving on.

## TODO 7: Add a Site Title and Navigation 🎯 Goal: Give your site a title and create a navigation menu to help visitors move between pages. --- ### Step-by-Step Instructions 1. 🔍 Find the `
` element inside `index.html` - Look for the following section in your code: ```html

``` 2. Add a title inside the `
` element - Place an `
` element inside `
`. Between the opening and closing `
` tags, type the title of your website: ```html
Your Name's Amazing Website
``` 3. Create an unordered list for your navigation menu - Below the `
` element, add a `
` element: ```html

``` 4. Add two list items for the menu - Inside the `
` element, add the following two `
` elements: 1. One to link to your home page ```html
Home
``` 2. Another to link to your portfolio page ```html
Portfolio
``` After completing this TODO, your `
` section should look like this: ```html

Your Name's Amazing Website

Home

Portfolio

``` ---

💡 Why Add a Navigation Menu?

A navigation menu makes it easy for visitors to move between different parts of your site. It’s also a great way to learn how to link pages together using anchor tags (`<a>`).

---
### ✅ Check Your Work! - Make sure the `
` and `
` elements are inside the `
` element. - Preview your site using Live Server to ensure your title and menu appear on the site.

## TODO 8: Make It Pretty with CSS 🎯 Goal: Add a CSS stylesheet to style your website. --- ### Step-by-Step Instructions 1. 🔍 Find the `` element inside `index.html` 2. Add a `` tag inside the `` element - Note that the link tag does not require a closing tag 3. Add a `rel="stylesheet"` attribute and `href="style.css"` attribute inside the `` tag - Your code should now look like this: ```html Your Name's Website ``` 4. Open the `style.css` file** and add the following CSS rules: ```CSS body { background: rgb(125, 198, 205); color: rgb(45, 45, 45); padding: 10px; font-family: Arial, sans-serif; } #all-contents { max-width: 800px; margin: auto; } /* navigation menu / nav { background: rgb(239, 80, 41); margin: 0 auto; display: flex; padding: 10px; } h1 { display: flex; align-items: center; color: white; flex: 1; margin: 0; } #nav-ul { list-style-type: none; margin: 0; padding: 0; display: flex; } .nav-li { display: inline-block; padding: 0 10px; } a { text-decoration: none; color: #fff; } / main container area beneath menu / main { background: rgb(245, 238, 219); display: flex; margin-top: 20px; } .sidebar { margin-right: 25px; padding: 10px; } .sidebar-img { width: 200px; } .content { flex: 1; padding: 15px; } / interests section styles */ #interests { border: 4px silver ridge; padding: 8px; margin-top: 20px; } h2, h3 { margin: 0px; } ``` ---

💡 Why add CSS to a website?

Adding CSS makes your website look unique and reflects your personal style. It also helps you explore how small changes in CSS can dramatically alter the appearance of a page.

--- ### ✅ Check Your Work! - Preview your site using Live Server to see your new styles in action.

## TODO 9: Customize CSS 🎯 Goal: Add personal touches to your CSS to make the website uniquely yours. --- ### Step-by-Step Instructions 1. 🔍 Find the `nav` CSS selector inside `style.css` - Look for this code snippet: ```css nav { background: rgb(239, 80, 41); margin: 0 auto; display: flex; padding: 10px; } ``` 2. Add a `margin-bottom: 20px` property to create space below the menu - Your updated CSS should look like this: ```css nav { background: rgb(239, 80, 41); margin: 0 auto; display: flex; padding: 10px; margin-bottom: 20px; } ``` 3. Experiment with colors - Update the colors throughout the CSS file to match your style. For example: ```css body { background: #2a2a2a; color: #ddd; } nav { background: #333; } a { color: #ffa500; } ``` ---

💡 Why Customize CSS?

Customizing CSS makes your website look unique and reflects your personal style. It also helps you explore how small changes in CSS can dramatically alter the appearance of a page.

---
### ✅ Check Your Work! - Preview your site using Live Server to see your new styles in action.

## TODO 10: Go Live 🎯 Goal: Host your website online using GitHub Pages. --- ### Step-by-Step Instructions 1. Open the terminal in your codespace - If the terminal isn’t visible, click the Hamburger Menu > Terminal > New Terminal. 2. Enter the following commands one by one in the terminal, pressing enter after each command to run it: ```bash git add . git commit -m "add index.html and css files" git push ``` 3. Wait a few minutes for the changes to go live at your-username.github.io.

💡 What Is GitHub Pages?

GitHub Pages allows you to publish websites directly from your GitHub repositories. It’s a great way to share your projects online without needing any special hosting services.

### ✅ Check Your Work! - Visit the site `your-github-username.github.io` to see your website live on the internet. If it doesn’t appear immediately, wait a few minutes and try refreshing your page. - Make sure to replace the text `"your-github-username"` with your actual github username when entering the URL in your browser.

## Bonus: Upgrade with Tailwind CSS (Optional Enhancement) 🎯 Goal: Replace your custom CSS with Tailwind CSS to create a more modern, responsive website with utility-first styling. --- ### Step-by-Step Instructions 1. Comment out or remove the CSS link - In your `index.html` file, find the `` tag in the `` section: ```html ``` - Comment it out by wrapping it in ``: ```html ``` 2. Add the Tailwind CSS CDN - In the `` section, add the Tailwind CSS script tag: ```html Your Name's Website ``` 3. Update your body classes - Replace your `` tag with Tailwind utility classes: ```html ``` 4. Update the main container - Update your `
` to use Tailwind classes: ```html
``` 5. Modernize your navigation - Replace your `
` section with this Tailwind-styled version: ```html

Your Name's Amazing Website

Home

Portfolio

``` 6. Update your main content area - Replace your `
` section with this responsive layout: ```html

Your Name

Your Position

My Interests

Interest 1

Interest 2

Interest 3

``` ---

💡 Why Use Tailwind CSS?

Tailwind CSS makes styling websites faster and easier. Instead of writing custom CSS, you use simple classes like `bg-blue-500` for blue backgrounds. It automatically works on phones, tablets, and computers too!

--- ### ✅ Check Your Work! - Preview your site to see your modern Tailwind-styled website. - Your site should now look cleaner with rounded corners and shadows. --- ## 🎨 Want to Add More Cool Stuff? Now you can easily add professional components to your website! Here are free resources: ### 1. Tailwind UI Components (Free) - Website: [https://tailwindui.com/components](https://tailwindui.com/components) - What it offers: Ready-to-use buttons, cards, and menus - No signup needed for free components ### 2. Tailwind CSS Documentation - Website: [https://tailwindcss.com/docs](https://tailwindcss.com/docs) - What it offers: Official examples for every style - Great for learning how classes work ### 3. Free Component Libraries - HyperUI: [https://www.hyperui.dev/](https://www.hyperui.dev/) - Tailblocks: [https://tailblocks.cc/](https://tailblocks.cc/) These sites have free components like hero sections, cards, forms, and photo galleries. Just copy the code and paste it into your website! ---

🚀 Quick Tip

Start simple! Get your basic layout working first, then add one cool component at a time. This way you can see what each piece does.

--- ### Quick Example: Add a Photo Gallery Want to try something cool? Here's how to add a photo gallery that automatically adjusts to different screen sizes: ```html

My Photo Gallery

``` This uses flexbox (`flex flex-wrap`) to automatically arrange photos in rows. The photos wrap to new lines when there's no space, making it work perfectly on phones and computers! --- ### ✅ What to Do Next 1. Get Tailwind working first (follow steps above) 2. Try the photo gallery to see flexbox in action 3. Replace the example photos with your own image URLs 4. Browse the free sites for more components you like 5. Copy and paste components one at a time ### 🎉🎉🎉 Congratulations! You are LIVE ON THE INTERNET! 🎉🎉🎉 ### 🚀 Bonus: You've also learned how to use Tailwind CSS to make your website even more amazing!