| Level Navigation: 0 |
1 |
2 |
3 |
4 |
Current Level: 5 |
6 |
7 |
8 |
9 |
Lesson: Creating Lists
🎯 Objective
Build ordered and unordered lists with multiple items using Emmet multiplication.
✅ Step 9: Create a List
What happened? Click to see.
Click to see what happened
This created an unordered list with three list items! The `>` symbol creates a parent-child relationship, and `*3` creates three `
` elements inside the ``.</p>
</div>
</details>
✅ **Commit Reminder:**
```bash
git add .
git commit -m "Create list with Emmet"
git push
```
> 🔄 **Workflow Reminder:** Remember to save (`Ctrl + S`) and refresh (`Ctrl + R`) as you make changes!
---
## ✅ Step 10: Numbered Items
* Type:
```
ul>li{item}*3 + [TAB]
```
What happened? Click to see.
Click to see what happened
This created an unordered list with three list items, each containing the text "item". The `{item}` part adds the text content to each list item automatically!
✅ **Commit Reminder:**
```bash
git add .
git commit -m "Add numbered list items 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 lists using the `>` parent-child operator
* Generate multiple list items using `*` multiplication
* Add text content to list items using `{}`
* Build both ordered (`ol`) and unordered (`ul`) lists efficiently
The `>` operator is key for creating nested HTML structures!
---
---
---
---
Level Navigation: [0](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv0.html) | [1](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv1.html) | [2](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv2.html) | [3](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv3.html) | [4](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv4.html) | **Current Level:** 5 | [6](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv6.html) | [7](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv7.html) | [8](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv8.html) | [9](/codex-lv2-may-2025/guides/week2-vscode/lesson-3-emmet-intro/emmet-intro-lv9.html)