HTML is my favorite language for programming website documents but writing it by hand ✍️ is no fun if you want to go fast there's a tool called EMMET that's built into VS Code and is like snippets on steroids 💪 !Tab and we've got a basic html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>line 10</p>
</body>
</html>
ctrl+g go to line 10 :10 type the name of any element followed by a period to add a class or a hash to add an id like this 👉 nav.cool#awesome then hit tab to expand
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="cool" id="awesome"></nav>
</body>
</html>
don't touch the mouse yet hit ctrl+enter for a new line this time I want a header plus a sibling article element in that article I want an unordered list that contains a list item, no 5 list items and I want to put some dummy text in each one like this 👉 header+article>ul>li*5>lorem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="cool" id="awesome"></nav>
<header></header>
<article>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>Sed ut perspiciatis unde omnis iste natus error</li>
<li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
<li>Duis aute irure dolor in reprehenderit in voluptate</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt</li>
</ul>
</article>
</body>
</html>
amazing but oh no I forgot something I'll just use the balance outward command > to select the next parent element then use wrap with abbreviation to include the element that I forgot 👏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="cool" id="awesome"></nav>
<header></header>
<main>👈
<article>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>Sed ut perspiciatis unde omnis iste natus error</li>
<li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
<li>Duis aute irure dolor in reprehenderit in voluptate</li>
<li>Excepteur sint occaecat cupidatat non proident, sun</li>
</ul>
</article>
</main>
</body>
</html>
Top comments (0)