We will describe how to install the VSCode application on Windows, and how to create your first simple webpage. Windows is straight forward. We will also describe the pros and cons of using VSCode as opposed to Dreamweaver or BlueGriffon.
Why use Visual Studio Code application? I started off using Dreamweaver in the early 2000's. I liked it, but CSS was barely an idea then. Today, HTML5 use is required and it requires CSS to make a webpage. I have tried using the WYSIWYG editor BlueGriffon. But as another author said, the front end is clunky (it has many bugs). I have not tried recent Dreamweaver releases. But they cost money, have bugs, and do not give you the flexibility in design. In addition, if you do have a problem, you still have to have knowledge of HTML & CSS. In other words, if you are going to design web pages you need to know HTML & CSS. If you are using HTML & CSS you need an editor such as VSCode. It will probably take about a couple of hours a day for a month to be comfortable using HTML & CSS to design pages.
I will describe installation for the Windows operating system. Search Google for Visual Studio Code and click on Download. This will bring you to the download page. Your computer is probably 64 bit. Click on Windows to start download. Click on Open File. (Double click on VSCode User Setupxxxx.exe) Visual Studio Code should install. Open VSCode. You may want to disable the following under File > Preferences > Settings: telemetry, crash reporting, and auto-updates. Search for the appropriate term at the top of the Settings page and make the change. Also under Settings, you should turn Editor Word Wrap on. For more information see FAQ in the Visual Studio Code website.
You are now ready to create a folder, and file page for your website. I prefer creating the folder in the File Explorer portion of the operating system. You should be comfortable doing this because you must back up your work each day. You must know where the folders and files are located. In your Documents folder create the folder Test-Html-CSS by right clicking and selecting New > Folder. Open VSCode. Goto File > Open Folder. Navigate to Documents > Test-Html-CSS and click Select Folder. The VS Code window will open. Look for a down arrow in front of Test-Html-CSS. Hover over the folder name and click on New File icon. Enter the filename index.html. Press Enter. You are ready to enter code.
I suggest always opening folders, to keep track of the files you are working on. Click on File > Open Folder. From the File Explorer window select Test-Html-CSS and click on OK to Open. The folder name Test-Html-CSS will appear, with the index.html file beneath it. You never have to close the folder in VSCode editor. But always File > Save your work. When you want to work on a new folder, select File > Open Folder and select the new folder to work on. The old folder will be closed and the new folder will appear in VSCode editor.
We are now ready to type, or copy and paste into index.html. Click on index.html to open it in the VSCode editor. Enter the following code for a simple webpage that says Hello World!. Important: You must use File > Save each time you enter code or make a code change for the change to be visible in your browser. Refresh your browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello World!
</body>
</html>
Go to File Explorer. Navigate to Test-Html-CSS and open the folder. Double click on index.html. If you have entered the code correctly, you will see the words Hello World! in the browser. Every webpage starts with these steps. REMEMBER: Refresh you browser after updating and saving a html file.
If you suspect a problem with the code, press Ctrl-Shift-m in VSCode editor, to open a code problem window.
When you double click on index.html in File Explorer, you will open the page in a web browser. If you want to see the HTML-CSS in index.html, you must open the file in the Text Editor. Right click on the file name (index.html) and select Open With > Text Editor. This is good to remember, even though most of your editing will be completed in VSCode editor.
This concludes our introduction to Visual Studio Code editor.
I save my work in three places. In the Google cloud (called Google Drive), on my Windows computer, and to a flash drive stick. The minimum is to save to your work computer and the cloud. Google cloud allows 15 Gig of free storage. To sign up for Google cloud storage search Google for Creating a Google account. Follow the instructions. Briefly, just go to www.google.com and click on Sign in in the upper right corner. Click on Create account.
After creating an account, search Google for Google Drive, click on Drive. On the Google Drive webpage click on Go to Drive and sign in. You are ready to upload a folder to Google Drive. To upload a folder, click on My Drive. Click on Upload folder. Select your folder from File Explorer and click on Open or Upload. The folder will upload to the cloud.
To download a folder from the cloud to your Linux computer, open Google Drive in the computer you want to download to. Right click on the folder you want to download, and select Download. A message box will appear saying the folder was downloaded as a zipped file. In the message box click Save file. You will see your folder in the Downloads folder of your computer. Right click on the folder, and select Extract To. You can extract the folder to where ever you like on your computer.
We all use the editors a little differently. If you want another perspective on using Visual Basic Code editor go the the YouTube video HTML5 & CSS Development: Learn How to Build a Professional Website.
Home Page
Visual Studio Code
Simple Webpage
Website Structure
Webpage Layout
HTML Escape
Web Hosting
FTP
Using Paint 3D
Printer Friendly
