Install and use a text editor

Download and Setup Visual Studio Code

Visual Studio Code (aka VS Code) is a free text editor created by Microsoft. It is one of the most popular text editors with computer programmers and web developers. It has built-in syntax highlighting and a third party extension called Live Server for running a local web server to use while developing web applications.

Download

Download and install VS Code for free from: code.visualstudio.com/download

User Interface

User Interface diagram

From left to right:
A) Activity bar: Has icons to use VS Code features. The default is the file Explorer that lists you project's folder and files. The search Icon lets you search for text or files. The extensions icon lets you add third party extensions to VS Code.
B) Side Bar: This is the display for the feature you select on the activity bar. For instance the file Explorer will display the file tree.
C) Editor / Editor Groups - This is where you write your code.
D) Panel: You can launch your Terminal application right in VS Code. Click the terminal menu > New Terminal.
E) Status bar (on bottom): Provides information about the status of your app.

Setup for Web Development

Color Theme:

There are several color themes you can choose from.

To change color theme:

Click the file menu on Window or Code menu on Mac > select Preferences > select Theme > select Color Theme > Select a color theme

Light (Visual Studio) is the standard light theme.
Dark (Visual Studio) is the standard dark theme.

Change Settings:

You may want to change some of the default settings.

To change Settings:

Click the Windows File or Mac Code menu > Preferences > Settings or click Manage icon > Settings
Type in settings property name in the search box.

Change Settings examples:

Tab size change from 4 spaces to 2: Search for Tab Size > value: 2

Word wrap turn on: Search for Word wrap > value: on
Minimap disable: Search for minimap > uncheck Minimap: Enabled.
Enable Preview uncheck: Search for enable preview > uncheck Editor: Enable Preview.
Vertical Rulers at 80 and 100 characters: Search for rulers > click Edit in settings.json > set "editor.rulers" to "editor.rulers": [80, 100], > Save the file.
Optionally, disable popup hints/suggestions and breadcrumbs:

Quick suggestions: Search for quick suggestions > "other" value off.
Hover (shows hints when hovering over your code): Search for hover > uncheck Hover: Enabled.
Parameter hints: Search for parameter hints > uncheck Parameter Hints: Enabled.
Suggest on trigger characters: Search for Suggest on trigger characters > uncheck Editor: Suggest on trigger characters.
Breadcrumbs: Search for breadcrumbs > uncheck Breadcrumbs: Enabled.

Extensions:

There are a number of third-party extensions you can add to VS Code.

Extension Examples:

Live Server:

Find and install the Live Server extension. This allows you to run a web server that automatically reloads every time you save a file in your web project:

Click the Extensions icon on the Activity Bar > type "Live Server" in the search box > click Install

To use Live Server: Open an HTML document in VS Code > Right click in the Editor > select "Open with Live Server". The HTML page will automatically open in your default web browser.

How to use VS Code

Open a project in VS Code, and add files and folders

Create an example project directory called web-project in Microsoft Explorer or Mac Finder.

Or from the command line: mkdir web-project

Open VS Code.
Open the web-project folder: File menu > Open Folder > navigate to web-project

or on Mac you can drag the directory from Finder to VS Code on your Dock.

Add Files:

Click the Explorer icon in the Activity Bar. This will place the project's File tree on the Side Bar.
Click the New File icon to add a file named index.html (or new folder icon to add a folder).
Click New File icon and create a file named myjs.js.

Find File:

In projects with many files you can use a keyboard shortcut to open the file:
Mac: Command+P > type the file name: index.html
Windows: Control+P > type the file name: index.html

Code Snippets

Code snippets can save you a lot of typing of commonly used code statements.
There are HTML, JavaScript and other language snippets built into VS Code.

Built-in HTML code snippets

With the editor open to the index.html page.

!→ In the empty page, type Exclamation mark then press the tab key. This will generate a skeleton HTML document.
h1→ Below the body tag, type h1 then the tab key. This generate tags <h1></h1> , then add heading text between the tags. Save the changes.
To see it, you can Launch Live Server. Right click in the editor > select "Launch with Live Server". It will open the page in the browser at url: http://127.0.0.1:5500/index.html. You should see the header text in header format (bold with larger text).
p#first-para→ Below the header, enter p for a paragraph element followed by a pound sign to add an element ID. Then the id text, the press tab. This will create tags: <p id="first-para"></p>
lorem→ To generate lorem ipsum placeholder text between the p tags, enter lorem then press tab.
p.some-class→ Below the first paragraph, enter p for another paragraph element, followed by a period to add a class, followed by the class name, then press tab. This will create tags: <p class="some-class"></p>
lorem→ Add more lorem ipsum placeholder text in the second paragraph by entering lorem then pressing tab.
Save the changes, then go back to the browser to see the changes. Live Server uses hot reloading so the web page is automatically reloaded every time you save the file.
Add an opening third paragraph tag without closing it, and some text. Paste this after the second paragraph: <p>Some text.

To close an open tag, just enter </ and the rest will automatically be filled in.

Now you will have the below HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Some Heading</h1>
  <p id="first-para">Lorem ipsum...</p>
  <p class="some-class">Lorem ipsum...</p>
  <p>Some text.</p>
</body>
</html>

Keyboard Shortcuts

There are a number of built-in keyboard shortcuts.
They are mostly the same between Mac and Windows except Mac shortcuts start with the Command Key while Windows shortcuts start with the Control Key.

Going back in the myjs.js file, practice using the below shortcuts:
As explanation, to cut text, select it.
If you are on Mac: press the Command key and lower case x at the same time.
If you are on Windows: press the Control key and lower case x at the same time.

Action	Mac	Windows
Full list	MacOS.pdf	Windows.pdf
Cut	`Cmd+X`	`Ctrl+X`
Copy	`Cmd+C`	`Ctrl+C`
Paste	`Cmd+V`	`Ctrl+V`
Undo	`Cmd+Z`	`Ctrl+Z`
Redo	`Cmd+Shift+Z`	`Ctrl+Y`
Indent	`Tab`	`Tab`
Unindent	`Shift+Tab`	`Shift+Tab`
Toggle comment	`Cmd+/`	`Ctrl+/`
Toggle block comment	`Shift+Alt+A`	`Shift+Alt+A`
Scroll to bottom	`Cmd+DownArrow`	`Ctrl+DownArrow`
Scroll to top	`Cmd+UpArrow`	`Ctrl+UpArrow`
Move line down	`Alt+DownArrow`	`Alt+DownArrow`
Move line up	`Alt+UpArrow`	`Alt+UpArrow`
Copy line down	`Shift+Alt+DownArrow`	`Shift+Alt+DownArrow`
Copy line up	`Shift+Alt+UpArrow`	`Shift+Alt+UpArrow`
Find	`Cmd+F`	`Ctrl+F`
Find and Replace	`Cmd+Alt+F`	`Ctrl+H`
Search all files in project	`Shift+Cmd+F`	`Shift+Ctrl+F`
Quick Open, Go to File…	`Cmd+P`	`Ctrl+P`
Toggle sidebar visibility	`Cmd+B`	`Ctrl+B`
Collapses selected file list	`LeftArrow`	`LeftArrow`
Collapse all file lists	`Cmd+LeftArrow`	`Ctrl+LeftArrow`

Customize Keyboard Shortcuts

To modify an existing keyboard shortcut
Code menu > select Preferences > Keyboard Shortcuts > Search Box: Type in command
or click Manage icon > Keyboard Shortcuts > Search Box: Type in command

For example on Mac to change the Redo shortcut from Cmd+Shift+Z to Cmd+Y
click Manage icon > Keyboard Shortcuts > Search Box: Type in Redo
Click the edit icon (looks like a pencil)
Enter the key combination you want to use: Cmd+Y
Press Return to set the shortcut, or press Esc to cancel.