DEV Community

Ciara Cloud
Ciara Cloud

Posted on

Easy Way to Make a Div in HTML (using VS Code)

Although I am new to web development, I can 100% appreciate a shortcut for writing code.

While I was watching a tutorial video, I saw someone use this shortcut for making a div with a class name or id name in VS code. It blew my mind and I just had to share!

Instead of writing out the complete div tag plus the class or id name, write the class name with a period in front of it, or the id name with a pound symbol in front of it. Press enter and you're done.

To make a div with a class name:

Image description

press enter

Image description

To make a div with an id name:

Image description

press enter

Image description

P.S. I hate to admit it, but I feel 10x cooler when I make my divs this way!

Top comments (13)

Collapse
 
peerreynders profile image
peerreynders

Emmet snippets and expansion are built right into VS Code (but is supported in many different editors/IDEs) and provides many more HTML shortcuts: Cheat sheet

Collapse
 
ciaracloud profile image
Ciara Cloud

Awesome! Thank you for sharing!!

Collapse
 
robsonmuniz16 profile image
Robson Muniz

This is Emmet, it helps a lot I use it all the time...
After creating those you can learn how to easily center them.

dev.to/robsonmuniz16/3-ways-to-cen...

Collapse
 
ciaracloud profile image
Ciara Cloud

Nice! Love your blog post!

Collapse
 
curiousdev profile image
CuriousDev

Thanks for this! This surely can be useful.

Collapse
 
jareichert profile image
JAReichert

I have used this over and over again since you shared this tip. Thank you!

Collapse
 
ciaracloud profile image
Ciara Cloud

Yay! :)

Collapse
 
caseyspaulding profile image
Casey Spaulding

Thanks

Collapse
 
mccurcio profile image
Matt Curcio

I have also just started using VS Code and I am amazed and blown away by all the features it has.
Thanks for your tip! ;)

Collapse
 
ciaracloud profile image
Ciara Cloud

I am as well!!

Collapse
 
ciaracloud profile image
Ciara Cloud

So cool!

Collapse
 
bth profile image
BT-H

this is great! after messing around a bit there's also a shorter way.
.div will create a div class and #div will create a div ID

Collapse
 
ascentr profile image
Ascentrick

I felt cool making my divs this way too buddy but then I tried to super-customize vscode and somehow it does not do it anymore !