Trick to write CSS & HTML 100x Faster

Subscribe to my newsletter and never miss my upcoming articles

Hello and Welcome

What if I told you there is a way to write CSS & HTML 100x Faster !
trust me this is wizardry.

Web-designers are constantly on the hunt for tools to help reduce the time . One of the most time-consuming aspects of writing clean web interface has always been writing CSS & HTML. While pre-coded templates can save time during the development process, how can web-designers code more efficiently from scratch?

If you're an SEO or a Front End Web Developer or even a Full Stack Developer, or someone who wants to learn HTML, CSS and implement it quick...
here I present to you the art of Emmet

So what is Emmet ?

Emmet is a free add-on for your text editor that allows you to type shortcuts that are then expanded into full pieces of code. By using Emmet, web-designers type less, saving both keystrokes and time when building a websites . Also, relying on Emmet’s autocompletion means fewer typos and missing tags, leading to more robust websites.

Emmet is available for a variety of text editors and is built right into Visual Studio Code & Vim, and can be downloaded as a plugin for Atom, Sublime, Eclipse e.t.c.

Let’s stop the litany and learn in practice.

Note : For this tutorial, we’re going to be using VS Code, since Emmet is already built right in. If you want to follow along in another supported IDE, check out the Emmet downloads page to install it.

1. Boilerplate HTML structure (!)

Just write an exclamation (!) in your file and hit ENTER.

!

Output :

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

</body>
</html>

oh.... no need to thank me.

2. Building Elements (>)

Simply type in the tag name or tag names seperated by greater-than (>) sign.

#Single tag
div

#Nested tags
div>ul>li

Output :

#Single tag
<div> </div>

#Nested tags
<div>
    <ul>
        <li></li>
    </ul>
</div>

I have a feeling you've mastered it already just by looking at this code snippet.

3. Siblings (+)

To add tags one followed by the other use plus (+) sign.

div+p+bq

Output :

<div></div>
<p></p>
<blockquote></blockquote>

4. Climb Up (^)

Enables climbing of tags above tags, use caret (^) symbol.

div+div>p>span+em^bq

Output :

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

fun fact caret (not carrot ) is also known as circumflex symbol.

5. Multiplication (*)

Let's get your skills multiplied.

Multiply any element / tag by using asterisk (*) followed by the number of times you want to replicate it.

ul>li*5

Output :

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

6. Grouping (())

Group specific tags using braces ( ) .

div>(header>ul>li*2)

Output :

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
</div>

7. ID (#) & Classes (.)

Period ( . ) sign indicates class while Pound ( # ) represents id.

div#header+div.page

Output :

<div id="header"></div>
<div class="page"></div>

8. Custom attributes ([ ])

Place an attribute within square braces ([attribute = ]) to build custom attributes.

td[title="You're Awesome"]

Output :

<td title="You're Awesome"></td>

9. Item Numbering ($)

Item name followed by a dollar sign ($) represents a single item.

ul>li.someitem$*5

Output :

<ul>
    <li class="someitem1"></li>
    <li class="someitem2"></li>
    <li class="someitem3"></li>
    <li class="someitem4"></li>
    <li class="someitem5"></li>
</ul>

10. Generating a “Lorem Ipsum”

For times when you are lost.

To generate random text use lorem followed by the number of words you wish to add.

div>p>h4>lorem10

Output :

<div>
    <p>
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, fugiat?</h4>
    </p>
</div>

Let's mix & match :

Example:

article.fun>img.fun-img+h3.fun-title{title text}+h4.fun-quote>lorem8

Output :

<article class="fun">
    <img src="" alt="" class="fun-img">
    <h3 class="fun-title">title text</h3>
    <h4 class="fun-quote">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4>
</article>

BONUS

  • for all the CSS beasts
m10margin:10px;
p10padding:10px;
d:fdisplay:flex;
ai:calign-items:center;
jc:cjustify-content:center;
w:awidth:auto;
h:aheight:auto;

If you have made it so far, you're Awesome; hope this helps you in your coding journey.

Support me by hitting the subscribe button on my YouTube channel CodeBeast

Keep Coding , Keep Slaying.

For some cool Digital portraits & art checkout my IG .

Francisco Quintero's photo

Nice! I had forgotten about Emmet. I currently don't write so much HTML but next time I'll try to remember :)

Nice article.

Maryann Agofure's photo

This is amazing. Thanks for sharing. I'd definitely be using this now

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

my pleasure, and thank you for taking the time to read.

Osinachi Chukwujama 's photo

I always used emnet, but didn't bother learning it in-depth

For React devs, use you jsx files instead of js files to be able to use emnet.

Anita Charles's photo

Thanks for writing 👏🏾👏🏾👏🏾👏🏾

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

You're welcome, and thank you for taking the time to read.

Brainiac-M's photo

Nice work man... Thanks for sharing. This is just amazing 😎💯

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

You're welcome.

Code_ Quinn's photo

Awesome

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

Thank you for taking the time to read.

Shehu Ibrahim Muhammad's photo

Wow this is amazing, thanks for sharing

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

My pleasure, thank you for taking the time to read.

Daniel Oladimeji's photo

This is very nice.. Thanks for sharing 👍

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

My pleasure, & thank you for taking the time to read.

Edidiong Asikpo's photo

These are AMAZING Bhagesh Hunakunti. Thank you for sharing this.

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

Thank you, for taking the time to read.

Efereyan Karen Simisola's photo

Omg. This is so cool. Ive been using these tricks forever. It never even occurred to me to write about it. I used to think all developers knew sha. Thanks for sharing the wizardry with us Bhagesh

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

You're welcome, thank you for taking the time to read.

Syed Fazle Rahman's photo

This is a great list. Thanks for sharing. I knew a few, but turns out there are a lot of new shortcuts I wasn't aware of.

As a frontend developer/designer, these shortcuts are crucial. Bhagesh Hunakunti

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

You're welcome, & thank you for taking the time to read my article.

Luiz Filipe da Silva's photo

Super helpful tips! I was using some of them, but now I know the complete set :)

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

Awesome 👌

Emmanuela Azubuike's photo

Wow! Definitely trying this out. Thanks for sharing

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

you're welcome.😊

Faith Gaiciumia's photo

Wooooooh. 😂 I couldn't stop exclaiming. This is awesome. Thanks

Bhagesh Hunakunti's photo

Data Science & Bioinformatics

You're welcome. Thank you for taking the time to read.

Frank Benady's photo

Thanks!

  1. “ Pound (#) sign indicates class while period ( . ) represents id.” I think you meant the opposite
Bhagesh Hunakunti's photo

Data Science & Bioinformatics

Yes you're right, thank you for the correction. I've made the changes.