Prerequisites: Tools You'll Need

Before starting this activity, ensure you have the following installed on your machine.

This is a web page written in HTML, the language of the web. You'll learn more about how it works, but first explore it by using the Inspector Tool.

Part 1: File Setup & Organization

Step 1: Create Your Folder Structure

Set up an organized workspace for all your course files:

1. Navigate to your User folder
   • On Mac: /Users/[your-name]/
   • On Windows: C:\Users\[your-name]\
2. Create your main course folder
   • Name it: desn368-s26
3. Inside your course folder, create:
   • A folder named: week-2
4. Inside the week-1 folder, create:
   • A folder named: view-source

Your folder structure should look like this:

Step 2: Download and Save the File

1. Download the file: view-source-activity.html
2. Move or save the file into your view-source folder
3. Rename the file to: view-source-[your-last-name].html
   • Example: view-source-masingale.html

Part 2: Open the File in Your Browser

Step 3: View in Firefox

1. Right-click on your view-source-[your-initials].html file
2. Select "Open with" → Firefox
3. The webpage should open in your browser

Keep this browser window open — you'll need it for the next steps.

Part 3: Explore with Developer Tools

Step 4: Open Firefox Dev Tools

1. With your HTML file open in Firefox, go to the menu bar
2. Click: Tools → Browser Tools → Web Developer Tools
   • Shortcut: F12 (Windows) or Cmd + Option + I (Mac)
3. The Developer Tools panel should appear at the bottom or side of your browser

Step 5: Use the Page Inspector

1. Look for the Inspector tab in the Developer Tools panel
   
2. In the Inspector, you'll see HTML code with tags like <>
3. Hover your mouse over different HTML tags in the Inspector
4. Watch what happens in the browser window above

Question to answer: What happens in the browser when you roll over the respective tags in the Inspector?

Step 6: Use the Element Picker

1. Look for the Element Picker button in the top-left of the Developer Tools
   • It looks like a cursor/arrow pointing at a box:
     
2. Click the Element Picker button
   • It will turn blue when active
3. Now, hover over anything in the browser window
   • The corresponding code will be highlighted in the Inspector
   • You'll see colored boxes around different page elements

Step 7: Investigate HTML Tags

Use the Element Picker tool to find answers to these questions:

Question 1: What HTML tag (code inside < >) makes the text bigger and bolder?

Question 2: What HTML tag creates a list of items?

Question 3: What HTML tag makes text appear on separate lines (line breaks)?

Question 4: Can you find a piece of HTML code that doesn't appear to create any visible effect on the screen? What might it be for?

Part 4: View Code in VS Code

Step 8: Open the File in Visual Studio Code

1. Open Visual Studio Code
2. Go to: File → Open Folder...
3. Navigate to and select your desn368-[initials]-f25 folder
4. In the VS Code sidebar, expand the folders to find your file:
   • week-1 → view-source → view-source-[initials].html
5. Click the file to open it in the editor
   Hint — you can just drag the folder onto VSCode and it will open!

Step 9: Install Live Preview Extension (Recommended)

To view your HTML file directly in VS Code:

1. Click the Extensions icon in the left sidebar (looks like building blocks)
2. Search for: "Live Preview" by Microsoft
3. Click Install
4. Once installed, right-click your HTML file in VS Code
5. Select "Show Preview"

Now you can view your code and the rendered webpage side by side!

Part 5: Document Your Findings

Step 10: Add Your Answers to the HTML File

1. In VS Code, scroll to the bottom of your HTML file
2. You'll see a section with questions (or add one if it's not there)
3. Type your answers directly in the HTML file as comments

Use this format for your answers:

4. Save your file (Ctrl+S or Cmd+S)

Part 6: Submit Your Work

Step 11: Submit to Canvas

1. Go to Canvas and find this assignment
2. Upload your view-source-[your-initials].html file
3. Make sure:
   • ✅ File is renamed with your initials
   • ✅ Your answers are included in the file
   • ✅ File is saved in your organized folder structure