DotNet-100-PreWork-GitBook
  • DotNet PreWork
  • Part 0: Intro
    • 1.0: Installation
    • 2.0: Getting Started
    • 3.0: Configuration
  • Part 1: HTML Fundamentals
    • Basic Tags
    • H & P Tags
    • Lists
    • Links
    • Images
    • Tables
    • Divs
    • Inputs
    • Forms
    • Sections
    • Articles & Headers
    • Footers
    • Navs
    • iFrames
  • Part 2: CSS Fundamentals
    • CSS Set Up
    • Classes
    • Ids
    • Margins & Padding
    • Fonts
    • Backgrounds
    • Widths & Heights
    • Borders
    • Positions
  • Part 3: C# Fundamentals
    • 1.0: Hello World
    • 2.0: Variables
    • 3.0: Basic Types
    • 3.0a: Types Challenges
    • 3.0b: Types Challenges Answers
    • 4.0: Operators
    • 5.0: Strings
    • 6.0: Booleans
      • 6.0a: Boolean Challenge
      • 6.0b: Challenge Answers
    • 7.0: Conditionals
      • 7.1: Switch Case
      • 7.2: If Statements
      • 7.3: Ternary Expressions
    • 8.0: Numbers
    • 9.0: Loops
      • 9.0a: Loop Challenges
      • 9.0b: Challenge Answers
    • 10.0: Classes and Objects
    • 11.0: Properties
    • 12.0: Useful-Links
Powered by GitBook
On this page
  • Open HTML files with Chrome
  • Helpful Tip
  1. Part 0: Intro

3.0: Configuration

Previous2.0: Getting StartedNextPart 1: HTML Fundamentals

Last updated 6 years ago

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:

  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:

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:

Here is a saved file:

unsaved
Open in browser
HTML Test
unsaved