Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lists: Add guide text on using Emmet for efficient list creation #28620

Closed
wants to merge 2 commits into from
Closed

Lists: Add guide text on using Emmet for efficient list creation #28620

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71a434e
Lists: Add guide text on using Emmett for efficient list creation
youssef-el-atmani Aug 12, 2024
d5cf8ce
Edit to fix a linting error
youssef-el-atmani Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions foundations/html_css/html-foundations/lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="powjajd" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/powjajd">
html-unordred-list</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)

Check failure on line 25 in foundations/html_css/html-foundations/lists.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Proper names should have the correct capitalization 

foundations/html_css/html-foundations/lists.md:25:3 MD044/proper-names Proper names should have the correct capitalization [Expected: HTML; Actual: html] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md044.md
on <a href="https://codepen.io">CodePen</a>.</span>

</p>
Expand All @@ -38,13 +38,25 @@
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="yLXYvYp" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/yLXYvYp">
html-ordered-list</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)

Check failure on line 41 in foundations/html_css/html-foundations/lists.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Proper names should have the correct capitalization 

foundations/html_css/html-foundations/lists.md:41:3 MD044/proper-names Proper names should have the correct capitalization [Expected: HTML; Actual: html] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md044.md
on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Quick Tip

Imagine if you have multiple lists to type; you might find yourself typing `<li></li>` repeatedly, or you might type it once and *copy/paste* it until you're done. However, there is a more efficient way using **Emmet Abbreviation**, something you might have already experienced with the `!` character to quickly generate the full HTML boilerplate.

Now, we will show you how to use Emmet to create lists more efficiently. Imagine you need to write an unordered list with 11 items. To do this using Emmet, simply type `ul>li*11` and hit `Enter` or `Tab`.

`ul>li*11` tells Emmet to create an unordered list `<ul>` with eleven nested list items `<li>`, all in one go.

It's worth noting that you can use this with `<ol>` as well, and you can obviously replace the number `11` with any other number you need.

Note that Emmet Abbreviations will be covered in depth later in the curriculum, and you're not required to know about them now.

### Assignment

<div class="lesson-content__panel" markdown="1">
Expand Down Expand Up @@ -74,3 +86,3 @@
- [MDN documentation on the ordered list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
- [Shay Howe's HTML lists tutorial](https://learn.shayhowe.com/html-css/creating-lists/)

Loading