Last updated:
2 min read
Amazing Emmet shortcuts for HTML and CSS to code faster
Rakesh Potnuru
Author
0%
SHARE

Amazing Emmet shortcuts for HTML and CSS to code faster

Emmet is one of the most useful extensions which are used to write lines of code with a single shortcut. Here are some top Emmet shortcuts to save your time ⏳.

Prerequisites

  1. Make sure you have Emmet extension installed in your code editor.
  1. Knowledge on HTML, CSS

Let's get started

Let's get started

1. Sibling - +

main+section+footer

1<main></main> 2<section></section> 3<footer></footer>

2. Child - >

html>body>main>h1

1<html> 2<body> 3 <main> 4 <h1></h1> 5 </main> 6</body> 7</html>

3. Climb-up - ^

Each ^ makes the element separate from previous element by one level.

div+div>p>span+em^^bq

1<div></div> 2<div> 3 <p><span></span><em></em></p> 4</div> 5<blockquote></blockquote>

4. Multiplication - *

select>option*3

1<select name="" id=""> 2 <option value=""></option> 3 <option value=""></option> 4 <option value=""></option> 5</select>

5. Item numbering - $

h$[title=item$]{Header $}*3

1<h1 title="item1">Header 1</h1> 2<h2 title="item2">Header 2</h2> 3<h3 title="item3">Header 3</h3>

Reverse

h$@-*3

1<h3></h3> 2<h2></h2> 3<h1></h1>

Start from

h$@3*5

1<h3></h3> 2<h4></h4> 3<h5></h5> 4<h6></h6> 5<h7></h7>

6. Grouping - ()

You can't do something like this main>h1+footer. These is where grouping helps.

(main>h1)+footer

1<main> 2 <h1></h1> 3</main> 4<footer></footer>

7. ID and CLASS attributes - #,.

form#search.wide

1<form id="search" class="wide"></form>

div.class1.class2

1<div class="class1 class2"></div>

8. Custom attributes

input[type="password" name="password"]

1<input type="password" name="password">

9. Text - {}

button{Click me}

1<button>Click me</button>

10. Implicit tag names

table>.row>.col

1<table> 2 <tr class="row"> 3 <td class="col"></td> 4 </tr> 5</table>

Now see some CSS 🥶

pos:f

1position:fixed;

d:if

1display:inline-flex;

d:tbclg

1display:table-column-group;

mb:a

1margin-bottom:auto;

bxsh

1box-shadow:inset hoff voff blur color;

ff:ss

1font-family:sans-serif;

whs:nw

1white-space:nowrap;

bgc:t

1background-color:transparent;

bd+

1border:1px solid #000;

trf:t3

1transform: translate3d(tx, ty, tz);

anim-

1animation:name duration timing-function delay iteration-count 2direction fill-mode;

@kf

1@-webkit-keyframes identifier { 2 from { } 3 to { } 4} 5@-o-keyframes identifier { 6 from { } 7 to { } 8} 9@-moz-keyframes identifier { 10 from { } 11 to { } 12} 13@keyframes identifier { 14 from { } 15 to { } 16}

That's it

That's it for today


Thanks for reading!


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

All types of POST Requests with API Tester mobile app

    6 min read

    sponsored

All types of POST Requests with API Tester mobile app

Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.

How to write tests in full-stack MERN web application

    9 min read

How to write tests in full-stack MERN web application

Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...