Visual Studio Code is extremely simple to use Source Code Editor by Microsoft. Creating web pages on it is fast. If you are looking for starting your Web Development career and trying to find the best Code Editor then go for Visual Studio Code. It carries an add-on feature to make tasks easy. It has an in-built Live server that lets you test pages on the go. I am going to share more amazing tips and tricks on Visual Studio Code in the coming time. Till then here is how to instantly create an HTML page structure or template using Visual Studio Code.
HTML Structure Tips – VS Code
Launch VS Code and create a New File. You can do this by clicking on File > New file or by pressing Ctrl + N. Now save the file by pressing Ctrl + S. Name it as “Sample” and from the below tab next to Save as type: select HTML. Save the file, our blank HTML file is ready. Now here is how to instantly add an HTML structure to this file. The structure plays a vital role in coding, without this you cannot code a web 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></body></html>
Press ! and hit Enter on the keyboard. VS Code will give you a default HTML Template where you can start making web pages. Also, it auto-completes and auto-corrects HTML Tags. This is a huge time saver. Your blank HTML file will look like what is showing above. Under /head tags you can insert the CSS, Meta’s, and Title Tag.
Under /body, you can write down your page’s code and build anything from scratch. This is how you can use VS Code to create a basic HTML template without worrying about major codes. The blank template also holds codes for Mobile Optimization, which auto-adjust the page size on the small screen.