Shortcuts for HTML/CSS in Visual Studio Code

Let’s get started with web development using Visual Studio Code.

Shortcuts for HTML/CSS in Visual Studio Code

1. Add HTML template:
   Type html:5 to generate the basic HTML template structure.

2. Save the file:
   Type Ctrl+S on Windows to save the file.

3. Link CSS:
   Add a blank line, type link, and press Enter. This will add the following line to your HTML file:

   <link rel="stylesheet" href="">
   

4. Preview:
   Right-click html file, and select Open In Default Browser

5. Inspect Webpage/Open developer tools
   Press F12

6. Reload the Webpage
   Press F5

7. Link Javascript
   On a new line before the closing element, enter script:src, and then select Enter. The opening and closing tags for a script are added to your code.

Some Notices

1. Scripts Elements
   The script element could be placed in the head or elsewhere in the body. However, putting script element at the end of the body section enables all the page content to display on the screen first, and then load the script.

2. :root
   The :root selector represents the html element in the HTML page.For this kind of task, a best practice is to define a set of global CSS variables in a CSS rule with the :root selector.

3. Fault Tolerance
   Add a noscript element after the closing /script tag, which can be used to show a message if JavaScript is deactivated.

4. Set Strict Mode
   Switch to strict mode to get more useful errors when you make mistakes.In VS Code, open the app.js file, and enter the following.
   ‘use strict’