Issue #9 - How to use Emmet to write HTML and CSS faster
Photo by Thought Catalog on Unsplash

Issue #9 - How to use Emmet to write HTML and CSS faster

As we near the end of another year, it's hard to believe how quickly time flies. As my husband likes to say, we made it through season 3 of 2019!

Although I've missed a few newsletters recently, I wanted to make sure to get one last one out for 2022. One of the reasons I've been a bit busy is because I was working on two new-ish courses. In November, I traveled to California to record updated versions of my two oldest courses. It was great to be back in the LinkedIn Learning studio after such a long break, and I'm excited to announce that the courses will be released early 2023. Stay tuned for updates!

A collage of pictures from the LinkedIn Learning campus including the author in the recording booth an studio, and outdoor sitting area and a sunset at the hotel.
Recording on the LinkedIn Learning campus and catching a sunset at the hotel

Now let’s get into the last Decoded by Christina newsletter of 2022, shall we?

Using autocomplete with your text editor

Writing HTML and CSS involves writing code that needs to follow a specific syntax. A misplaced semi-colon or a typo can throw off a whole page! Also, there tends to be a lot of repetition. To improve my workflow, I use the autocomplete feature in my text editor. This feature uses an abbreviated syntax and the tab key to expand the abbreviations. The specifics of this feature may vary between text editors; the examples provided in this article are based on the syntax used in the VS Code editor.

Let's start with some HTML. The syntax for writing an HTML tag normally looks like this:

No alt text provided for this image

But instead of typing “bracket, element name, bracket” for the opening tag and then “bracket, slash, element name, bracket” for the closing tag, with autocomplete, you can use an abbreviated syntax to save time.

Just type only the element name, and then press the tab key to expand the abbreviation. The brackets and closing tags will be added automatically. And if the element requires an attribute, that will be added automatically as well.

No alt text provided for this image
abbreviated HTML syntax
No alt text provided for this image
Expanded HTML

[To learn more, keep on reading or watch my YouTube video here or at the end of the post.]

Intro to Emmet

To take your autocomplete functionality to the next level when writing HTML and CSS, consider using Emmet, a tool that extends these features. Emmet is pre-installed in VS Code, but can also be added as a plugin to other text editors. To learn more about how to download and use Emmet in your text editor, check out the “Download” page for more information.

No alt text provided for this image
emmet.io

Emmet and HTML

With Emmet, an abbreviated syntax can be used to add multiple HTML elements. Just type the element name, followed by an asterisk (*) and the number of elements you want to add. No brackets are needed. Then, use the tab key to expand the abbreviation and automatically generate the desired number of elements.

Here's the syntax for adding three paragraphs, along with the expanded markup:

No alt text provided for this image
Emmet HTML syntax
No alt text provided for this image
Expanded HTML

To create sibling elements, use the plus operator (+). This will allow you to add multiple elements that are at the same level in the HTML structure.

No alt text provided for this image
Emmet HTML syntax
No alt text provided for this image
Expanded HTML

To create nested elements, use the right angled bracket (>) to indicate the parent-child relationship between elements.?You can also combine different operators to create more complex structures. For example, you might use the right angled bracket (>) to add a child element, and the asterisk operator (*) to add multiples of that child element.

No alt text provided for this image
Emmet HTML syntax
No alt text provided for this image
Expanded HTML

When using the right angled bracket (>) to nest elements, any elements added after will also be nested within the parent element. To move an element back up a level, use the carat operator (^).

In the following example, “footer” follows a series of nested “section” elements. You can use the carat operator (^) to move it outside of the parent “main” element. This is a useful way to adjust the structure of your HTML and ensure that your elements are organized in the way you intended.

No alt text provided for this image
Emmet HTML syntax
No alt text provided for this image
Expanded HTML

Emmet and CSS

Emmet can also be used for writing CSS. When you start typing a property name, the abbreviation will usually expand to the full property when you press the tab key. This will also add the colon and semi-colon. If more than one property matches the abbreviation, a drop-down menu will appear with alternate options to choose from.

No alt text provided for this image
Emmet CSS syntax
No alt text provided for this image
Expanded CSS

The property and value can also be specified within the same abbreviation. If no unit is added the default will be “px” for whole numbers and “em” for decimals. The property and value can also be specified within the same abbreviation. If no unit is added the default will be “px” for whole numbers and “em” for decimals. You can also specify a specific unit by adding it to the abbreviation.

No alt text provided for this image
Emmet CSS syntax
No alt text provided for this image
Expanded CSS

For multi-word properties, use the first letters of each word, followed by the value.

No alt text provided for this image
Emmet CSS syntax
No alt text provided for this image
Expanded CSS

Using the tab autocompletion features in your editor may take some getting used to, but it can help increase your productivity in the long run. By using this abbreviated syntax, you can save time and streamline your HTML and CSS writing process.

To learn more about Emmet and see these examples in action, check out my YouTube video for more tips and tricks. And that’s all folks! See you in 2023!

Ray Villalobos

Generative AI, Prompt Engineering and Full Stack Development. LinkedIn Top Voice. Senior Staff Instructor at LinkedIn, Instructor at Stanford University.

2 年

I love Emmett, can’t work without it.

要查看或添加评论,请登录

Christina Truong的更多文章

  • Back to School Means Free Courses!

    Back to School Means Free Courses!

    [Cross-posted on my Substack] My birthday is coming up soon and I always look forward to it because, as someone who…

    6 条评论
  • Issue #15 - Git up Git out and Git Something!

    Issue #15 - Git up Git out and Git Something!

    [cross-posted from my Substack] When I'm working on a project, one of my biggest fears is losing my work. So, I'm…

    6 条评论
  • Issue #14 - “Success and failure; they’re not as far apart as people think.”

    Issue #14 - “Success and failure; they’re not as far apart as people think.”

    [Also cross-posted on my Substack] In 2015, I finally made the jump to go freelance full-time. I also started a…

    6 条评论
  • Issue #13 - New-ish Course Release: CSS Essential Training

    Issue #13 - New-ish Course Release: CSS Essential Training

    My CSS Essential Training course has been updated for 2023 and is now live! So, what's new? The course project has been…

    9 条评论
  • Issue #12 - VS Code: Customizing Settings and Adding Extensions

    Issue #12 - VS Code: Customizing Settings and Adding Extensions

    [Cross posted from my Substack.] Hey all! Welcome to another edition of the Decoded by Christina newsletter.

  • Issue #11 - Getting Your Website Online

    Issue #11 - Getting Your Website Online

    I'm back from my newsletter hiatus! I've been diligently working on another LinkedIn Learning course, and I was in…

    2 条评论
  • Issue #10 - Web Development Tools

    Issue #10 - Web Development Tools

    When learning web development, we start by learning a specific language such as HTML, CSS, and JavaScript. But as you…

    2 条评论
  • Issue #8 - Colour Picking Tools for Web Design

    Issue #8 - Colour Picking Tools for Web Design

    There are two things I can spend all day looking at: fonts and colour palettes. There are so many to choose from! But…

    11 条评论
  • Issue #7 - On Self Promotion

    Issue #7 - On Self Promotion

    Since I started in web development in 2006, I’ve done some freelancing. The client I had for my class project ended up…

    7 条评论
  • Issue #6 - CSS Selectors

    Issue #6 - CSS Selectors

    Writing CSS is basically selecting an HTML element and applying a style to it. When starting out, you’re probably using…

    9 条评论

社区洞察

其他会员也浏览了