How To Create A Simple Webpage Using Html And Css

Faster HTML And CSS Creation with Emmet

Emmet is a tool designed to help developers save time while writing HTML and CSS. Emmet includes abbreviations for every HTML tag and includes CSS abbreviations. The tool is already built into some of the most used text editors, if your favorite text editor doesn't come with it, you can also download it as a plugin and check for specific instructions from their website. You can also chain abbreviations with a CSS look-alike syntax, with the help of the "! " shortcut.

Vlad Luna San Hacker Noon profile picture

Emmet is a tool designed to help developers save time while writing HTML and CSS by encapsulating pieces of code and loading them with the help of easy shortcuts, here's an example:

Lets say you are beginning a new HTML project, the first thing you do is create an index.html file, with the help of Emmet you can instantly have at your disposition an HTML boilerplate with the " ! " shortcut:

Then we press the TAB key to expand the code and voila!

                                  <!DOCTYPE html>                  <html                    lang="en">                  <head>                  <meta                    charset="UTF-8">                  <meta                    name="viewport"                    content="width=device-width, initial-scale=1.0">                  <meta                    http-equiv="X-UA-Compatible"                    content="ie=edge">                  <title>Document</title>                  </head>                  <body>                  </body>                  </html>

Emmet includes abbreviations for every HTML tag:

                div expands to                  <div>                  </div>                  a   expands to                  <a                    href="">                  </a>                  br  expands to                  <br                    />

Emmet comes pre-equipped with CSS abbreviations as well, here are a few examples:

                pos  = position bg   = background m    = margin c    = color fl:l = float-left fl:r = float-right

Chain Abbreviations

You can also chain abbreviations with a CSS look-alike syntax,

Lets imagine we are going to create a form with an email as input:

                form:post#sample-form>label[for=email]+input#email+button:s

This creates a

                  form

with

                  method="post"

and

                  id="sample-form"

, we pass the

character to create child elements, the first one is a label, then we add an

                  input

with

                  id="email"

and a

                  button

with

                  type="submit"

                                  <form                    action=""                    method="post"                    id="sample-form">                  <label                    for="email">                  </label>                  <input                    type="text"                    id="email">                  <button                    type="submit">                  </button>                  </form>

Creating an enumerated list with this chained abbreviations

                #wrapper>ul#sample-list>li.item-$*3>{Item $}

Here

                  #wrapper

creates a div element with

                  id="wrapper"

then we pass the

character to reference

                  #wrapper

children elements, then we create an unordered list or

ul

element with

                  id="sample-list"

and then we pass the

character again to create list-item or

li

elements inside the

ul

, to end things we give every li element a

                  class="item-(1,2,3)"

where

becomes

                  (1,2,3)

respectively:

                                  <div                    id="wrapper">                  <ul                    id="sample-list">                  <li                    class="item-1">Item 1</li>                  <li                    class="item-2">Item 2</li>                  <li                    class="item-3">Item 3</li>                  </ul>                  </div>

Setup / Installation

Fortunately Emmet is already built into some of the most used text editors, if your favorite text editor doesn't come with it, you can also download it as a plugin and check for specific instructions from their website.

Links

Emmet Download https://emmet.io/download/
Emmet Documentation https://docs.emmet.io/
Cheat Sheet https://docs.emmet.io/cheat-sheet/

If you made it this far i hope this article helped you in one way or another, thanks for reading!