Visual Studio Code
What is Visual Studio Code?
- Visual Studio Code is text editor designed for coding. It offers a range of helpful tools that to make writing HTML, CSS and JavaScript easy and efficient.
- Microsoft Word prepares text for the printed page; Visual Studio Code prepares text for the web.
A text editor is simply a program you use to write your code. Whereas a photo editor like Photoshop may have helpful tools to help you enhance your photo and graphics; text editors have helpful tools to help you write code. For instance, text editors like Visual Studio Code will highlight your syntax in different colors, display multiple tabs, and in the same way that your phone may auto-suggest words to you, Visual Studio Code will suggest options to complete your code. Visual Studio Code also has a marketplace of extensions, which we’ll dive into a little later.
Other text editors you may have heard of include Adobe Dreamweaver, Sublime Text, Notepad++. There’s hundreds out there!
Creating HTML files in Visual Studio Code
- Open Visual Studio Code. (No, really! Open Visual Studio Code and try this out now!)
- File > New File. Save the file as test.html in Dropbox.
That file extension, .html, is necessary. The reason we save a file before typing in anything is that Visual Studio Code does not know what type of file it is until that file extension (.html) is added. - Once you’ve saved your file, type in html in the blank workspace.
A few options should generate automatically. Select the one that looks like: html:5. Once you select it, your document will look like:
<!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> </body> </html>
This is often referred to as the HTML boilerplate.
Whenever you’re instructed to create HTML files (we’ll be creating many in this course!) you can either follow the above instructions, copy and paste the HTML boilerplate, or once you’ve done several, type it in from memory.
If Visual Studio Code doesn’t recognize your file type, you’ll be able to tell instantly. Your code will be one solid, flat color.
HTML Boilerplate explained
Back to the auto-generated HTML boilerplate.
<!DOCTYPE html>
The line that says <!DOCTYPE html> is saying, “What’s up browser! This is a HTML5 file.” HTML5 is the most recent iteration of HTML.
<html lang="en">
This sets the primary language for the document; in this case, we’re selecting English, but you could pick any number of languages depending on your primary audience.
<head>
The first <head> tag to the closing head tag, </head>, contains information specific to this page, such as the page title (<title></title>) and other metadata. None of this information is visible on the website (unless you know where to look!)
<meta charset="utf-8">
This line provides the browser with information on character encoding and is standard with html5.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This bit of meta data helps the browser understand the dimensions of the webpage and scaling. The width of the screen will equal the width of the device and the initial zoom level will be set to one.
<title>
The <title> tag controls the name of the webpage in the browser (and helps search engines). For example, the title tag on uga.edu says University of Georgia. The title tag on this workbook says Web Development. It’s always important to title your pages. Keep in mind that this title is NOT visible to someone viewing the site; it’s just another piece of metadata.
<body>
The <body> tags are where, you guessed it, the body of our webpage goes. The <body> section is where the majority of your content resides. Basically, everything we want someone to see when they view the site.