codex-lv2-may-2025

Level Navigation: Current Level: 0

Lesson: Setup and Repository Creation

🎯 Objective

Set up your development environment and create a local git repository with starter files for practicing Emmet shortcuts.

✅ Step 1: Create Your Repo and Starter Files

In the terminal, navigate to your desired folder.
Create a new repository on GitHub.
In the terminal, create a local git repo first:

mkdir emmet-practice
cd emmet-practice
git init
touch index.html style.css
git add .
git commit -m "Create index.html and style.css"

Now add the remote and push. First, create a repo on GitHub without a README, and follow the instructions there. The commands will look something like this:

git remote add origin <repo-url>
git branch -M main
git push -u origin main

✅ Commit Reminder: You’ve already committed here — good start!

✅ Step 2: Open the Repo in VSCode

Open the folder you just created in VSCode.

⚠️ Important: Keep your index.html file completely blank for now. Don’t add any content yet - we’ll start adding HTML in the next level!

✅ Commit Reminder: No code changes yet, so no commit needed.

✅ Step 3: Set Up Your Browser for Live Preview

Double-click on your index.html file to open it in your web browser
Arrange your windows so you can see both VSCode and your browser side by side
- On Windows/Linux: Use Windows key + Arrow keys to snap windows
- On Mac: Use Control + Up arrow then drag to arrange windows
Keep both windows visible - this will let you see your changes instantly!

💡 Pro Tip: Remember these keyboard shortcuts:

Save in VSCode: Ctrl + S (Windows/Linux) or Cmd + S (Mac)

Refresh browser: Ctrl + R (Windows/Linux) or Cmd + R (Mac)

✅ Commit Reminder: No code changes yet, so no commit needed.

🔄 Workflow Reminder: Remember to save (Ctrl + S) and refresh (Ctrl + R) as you make changes in the upcoming lessons!

✅ Summary

You’ve successfully:

Created a local git repository
Set up starter HTML and CSS files
Connected your local repo to GitHub
Opened the project in VSCode

You’re now ready to start learning Emmet shortcuts!

Level Navigation: Current Level: 0