codex-lv2-may-2025
| Level Navigation: 0 | 1 | Current Level: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
Lesson: Simple HTML Elements
🎯 Objective
Practice creating paragraphs, headings, images, and links with Emmet shortcuts.
✅ Step 4: Add Paragraph and Heading
- Type:
p + [TAB]
- Then:
h1 + [TAB]
What happened? Click to see.
Click to see what happened
The `p` created a paragraph element `
`, and `h1` created a heading element ``. Emmet automatically adds the opening and closing tags for you!✅ Commit Reminder:
git add .
git commit -m "Add paragraph and heading with Emmet"
git push
🔄 Workflow Reminder: Remember to save (
Ctrl + S) and refresh (Ctrl + R) as you make changes!
✅ Step 5: Add an Image
- Type:
img + [TAB]
What happened? Click to see.
Click to see what happened
This created a self-closing image tag ``. Notice how Emmet automatically added the `src` and `alt` attributes that images typically need!
✅ Commit Reminder:
git add .
git commit -m "Add image element with Emmet"
git push
🔄 Workflow Reminder: Remember to save (
Ctrl + S) and refresh (Ctrl + R) as you make changes!
✅ Step 6: Add a Link
- Type:
a + [TAB]
What happened? Click to see.
Click to see what happened
✅ Commit Reminder:
git add .
git commit -m "Add link element with Emmet"
git push
🔄 Workflow Reminder: Remember to save (
Ctrl + S) and refresh (Ctrl + R) as you make changes!
✅ Summary
You learned how to:
- Create paragraph elements with
p - Create heading elements with
h1 - Generate image tags with
img(including src and alt attributes) - Create link elements with
a(including href attribute) - Understand how Emmet automatically adds necessary attributes
These are the foundation shortcuts for creating basic HTML elements!
| Level Navigation: 0 | 1 | Current Level: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |