3.0: Configuration

In this module we'll have you configure a few things in Visual Studio Code so that you can optimize your build experience.

Open HTML files with Chrome

For the prework, it will be easiest for us to use Visual Studio Code(blue icon) for running HTML & CSS. We're going to install a package just for opening raw HTML.

  1. Go to the extensions on the left side of VS Code.

  2. Search for open-in-browser. The package looks like this:

    Open in browser

  3. Install the package.

  4. Go into 00-setup.html in VS Code.

      DotNetProjects
     └── HTMLCSSPreWork
         └── 1-HTML-Basics
             └── 00-setup.html

  5. Add the following snippet:

    <html>
  <h1>Hello World</h1>
</html>

  6. Save your file by pressing ctrl + s.

  7. On a Windows machine, click on the .html file and press ctrl + alt + o.

  8. You should be given a list of browsers. Choose Chrome.

  9. You should see some text in a browser window:

    HTML Test

Helpful Tip

Just a note on saving: VS Code has given us an easy to use tool for identifying unsaved files. The X which normally closes a tab will change to a solid circle or "bubble". It is very important that you adopt the habit of saving files before attempting to execute them.

Here is an unsaved file: unsaved

Here is a saved file: unsaved

Previous2.0: Getting StartedNextPart 1: HTML Fundamentals

Last updated