Visual Studio Code: Difference between revisions
VKranendonk (talk | contribs) No edit summary |
VKranendonk (talk | contribs) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 4: | Line 4: | ||
The following will be instructions on installing Visual Studio Code and additional extensions. | The following will be instructions on installing Visual Studio Code and additional extensions. | ||
== Download and install == | |||
Download Visual Studio Code from https://code.visualstudio.com and install the software. | Download Visual Studio Code from https://code.visualstudio.com and install the software. | ||
== Live Server extension == | |||
After opening Visual Studio Code, click on the Extensions icon. Left side of the window. | After opening Visual Studio Code, click on the Extensions icon. Left side of the window. | ||
| Line 18: | Line 22: | ||
[[File:Visual Studio Code Live Server Install.png]] | [[File:Visual Studio Code Live Server Install.png]] | ||
== File explorer == | |||
Click on the Explorer icon to go back to the file explorer. | Click on the Explorer icon to go back to the file explorer. | ||
| Line 30: | Line 36: | ||
[[File:Visual Studio Code Create Folder.png]] | [[File:Visual Studio Code Create Folder.png]] | ||
== First HTML file == | |||
Press the "new file" icon. | Press the "new file" icon. | ||
| Line 47: | Line 55: | ||
[[File:Visual Studio Code Write In Body.png]] | [[File:Visual Studio Code Write In Body.png]] | ||
Press "Go Live". This should open your website 🥳. | == Start Server == | ||
Press "Go Live" in the right bottom corner. This should open your website 🥳. | |||
[[File:Visual Studio Code Go Live.png]] | [[File:Visual Studio Code Go Live.png]] | ||
Latest revision as of 10:06, 5 September 2022
Visual Studio Code is a code editor created by Microsoft and freely available.
The following will be instructions on installing Visual Studio Code and additional extensions.
Download and install
[edit]Download Visual Studio Code from https://code.visualstudio.com and install the software.
Live Server extension
[edit]After opening Visual Studio Code, click on the Extensions icon. Left side of the window.
Search for the extension Live Server.
Click on Live Server and press "install".
File explorer
[edit]Click on the Explorer icon to go back to the file explorer.
Press the "Open Folder" button.
Always create a new empty folder to start with.
First HTML file
[edit]Press the "new file" icon.
Type "index.html" and press enter.
Type "!" exclamation mark and press "tab"
Write "hello" in the <body> element
Start Server
[edit]Press "Go Live" in the right bottom corner. This should open your website 🥳.
