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)