Emmet

Learn about Emmet and how it speeds up the coding process.

Before we wrap up this chapter, let’s use the opportunity to take a look at another concept, Emmet.

What is Emmet?

Emmet is a way for a web developer to produce some common HTML and CSS code quickly. For example, if you open a brand new project, we’ll initially see that all coding areas are empty:

    html
    css
    javascript
    Emptry web page preview

    We don’t have a web page preview in the preview pane because we haven’t added any code.

    Let’s change that by adding some boilerplate HTML code.

    We’ll type one exclamation mark inside the HTML code area, !.

    This exclamation mark is an example of an Emmet abbreviation.

    To quickly add code to our page, we need to expand Emmet abbreviations.

    To expand any Emmet abbreviation, we usually press the “TAB” key. You need to ensure that the cursor is active and placed just to the immediate right of the abbreviation, without any space characters.

    After ...

    Access this course and 1400+ top-rated courses and projects.