codex-lv2-may-2025

Navigation

0 | 1 | 2 | 3 | 4 | 5 | Current Level: 6 | 7 | 8

---

Lesson: Explore the Editor

🎯 Objective

Practice editing files in the VSCode Editor with syntax highlighting and tab management.

---

✅ Step 6: Explore the Editor

• The middle area of VSCode is the Editor.
• When you click a file in the Explorer, it opens in the Editor.
• The editor provides syntax highlighting for easier reading of code.

Activities:

1. Write Some HTML: In index.html, type:

<h1>Hello, VSCode!</h1>
<p>This is my first file in VSCode.</p>

1. Create and Edit CSS: In style.css, add:

h1 {
    color: blue;
}

1. Practice Tab Switching: Click to open multiple files and switch between them using the tabs.

2. Open the HTML File in a Browser:

   • In the file browser window you opened earlier, double-click index.html.
   • It will open in your default web browser so you can see your webpage.

✅ Commit Reminder:

git add .
git commit -m "Practiced editing files in VSCode and viewed in browser"
git push

---

✅ Summary

You learned how to:

• Use the VSCode Editor to write and edit code
• Take advantage of syntax highlighting for better code readability
• Switch between multiple files using tabs
• Create and edit HTML and CSS files
• View your HTML files in a web browser

The Editor is where you’ll spend most of your time writing and editing code!

---

Navigation

0 | 1 | 2 | 3 | 4 | 5 | Current Level: 6 | 7 | 8