VSCode HTML Tags Shortcuts

Zahrea F — Wed, 20 Jan 2021 07:56:59 +0000

Howdy!

If you're here, it's one of the following reasons:

1.) You have no idea what VSCode is and would like to know

2.) You are considering using it but wanted to learn a bit more before you dive in.

3.) You like me, use VSCode as your code editor and need to learn some shortcuts.

If you identify with the first option, VSCode, which stands for Visual Studio Code is a free-source editor for coding. It helps you to write programs in a variety of languages and it has helpful features like pointing out syntax errors by line numbers, auto completion of code snippets and even add-on extensions that allow theme customization (hey night-mode 😏) and tons of other cool features.

If you have been considering it but wanted to know what sets it apart from the others you've heard about, here's a few points to consider:

Visual Studio Code is FREE
VSCode was created by Microsoft, so it's trustworthy as well as compatible on Windows, MacOS and Linux.
It has a built-in terminal as well as built-in Git support
It's good at handling larger projects.

In addition to the main points outlined there's a lot more that you can do with VSCode to help make coding easier and more productive.

One of these features is Emmet. This is a built-in extension that allows you to skip the step of manually typing out HTML tags. By using keyboard shortcuts, the tags are automatically created. Some of the most useful shortcuts are:

.class
//<div class="class"></div>

.title
//<div class="title"></div>

a{Click me}
//<a href="">Click me</a>

link:css
//<link rel="stylesheet" href="style.css" />

ul>li*5 //replace 5 with the amount of items in your list
/*
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> */

p[title="Hello world"]
// <p title="Hello world"></p>

script:src
// <script src=""></script>

#header
// <div id="header"></div>

img
//<img src="" alt="" />

div+p+bq
/*
<div></div>
<p></p>
<blockquote></blockquote>
*/

!
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>
*/

These are just a few of the plethora of shortcuts that are possible when creating an HTML file in VSCode, however, I find myself using these mostly since most HTML files use these tags. To find more of the shortcuts there's a document on the official VSCode website that you can browse through.

Comment below if you know any more shortcuts that you think are helpful in VSCode while coding in HTML.

Just another "Hello World!"

Zahrea F — Tue, 22 Dec 2020 10:23:06 +0000

Hi there! Thanks for stopping by. I've decided to start writing blog posts to keep track of my development as a front end developer and as well as my revelations with technologies I use (or will use along the way).

So since I already have you here. I should start with an introduction. To make it easier, I'll do the intro in list form so here goes:

I'm Zahrea. A Caribbean raised, Cali-based girl in tech.
I am pursuing a Bachelor of Science in Computer Science at Sacramento State.
Interested in full stack web development.
Currently codes in: HTML, CSS, JS and Java.
Currently learning: React, Node.js & Python 🐍

That's all for now. Thanks for reading! See you in my next post (hopefully) 😄

If you'd like to keep track of my progress, follow me on Github

zahreafranklin / zahreafranklin

Hello World! I'm Zahrea F

HELLO WORLD! I'M ZAHREA FRANKLIN 👋🏽

ABOUT ME 👩🏽

🎓 Gained a Bachelors of Science in Computer Science from California State University, Sacramento.
🔭 Looking for new opportunities to use my knowledge in tech.
📓 Learning more about full-stack development and software engineering.
👯 Member of: Rewriting the Code.
🖤 Enjoys fashion blogging in my spare time

DEV Community: Zahrea F

VSCode HTML Tags Shortcuts

Just another "Hello World!"

zahreafranklin / zahreafranklin

Hello World! I'm Zahrea F

HELLO WORLD! I'M ZAHREA FRANKLIN 👋🏽

ABOUT ME 👩🏽

SKILLS 🔧 ⚙️

Programming Languages:

Frameworks:

Stats 📈