Link Search Menu Expand Document
HTML&CSS

Visual Studio Code + Writing HTML & CSS Locally

Class Agenda

  1. Introduction
  2. Applications, Files, and Folders
  3. Setting Up VSCode
  4. Creating a Folder for this Class
  5. Creating Files in Your Folder
  6. Introducing the <!DOCTYPE html>, <html>, <head>. and <body> Tags
  7. Linking HTML and CSS files together
  8. Viewing Your New Page

Introduction

So far in this class, we’ve used CodePen to write and share our HTML and CSS code. CodePen is a great way to get started quickly writing HTML and CSS, but it has some limitations!

The biggest limitation is that you can only have one “page” at a time. Most websites have many pages - a homepage, an about page, articles, videos, and much more.

This means the people who develop those websites (that’s you!) need to be able to write code for many different pages at the same time.

To do that, developers use a text editor like Visual Studio Code, or VSCode for short.

Today, we’re going to move from using CodePen to write and store our HTML and CSS to using VSCode. To get started, let’s learn about applications, files, and folders.

Applications, Files, and Folders

Applications

What is an application? You’ve probably heard the term “app” or “application” for the things you install and use on your phones. Gmail, WhatsApp, Ebay Kleinanzeigen, Spotify - these are all applications you can install on your phone.

The work “application” can also refer to things you install on a laptop. The web browser (like Chrome, FireFox, Edge, or Safari) you use to access course materials and visit CodePen is an example of an application on your laptop. Slack is another application you may have already installed.

VSCode is an example of a type of application called a text editor or code editor. It’s designed for just that: editing code. You can use it to edit HTML, CSS, JavaScript, Ruby, Python, and many other coding languages.

But what code are you editing? To understand that, we need to understand files.

Files

What is a file? It’s simply a way of storing information. Everything stored on a computer is in a file. For example, if you download a PDF sent to you in an email, you are storing a file on your computer.

And files have types! A PDF is one type of file (PDF stands for “portable document format”). A .mp3, which is the most common file type for songs, is another one. And there are two file types that are especially important for us: .html and .css!

To interact with files, we usually use applications. You can use an application to open a particular file. Most applications are designed to open only certain types of applications. For example, if you wanted to edit a picture, you would open it with a photo editing application.

One file can be opened by many different applications. In our case, we will open our .html and .css with VSCode to edit them, and we will open them with a web browser to view them.

For more on files, see this helpful guide.

Organizing files

Files are organized by being stored in folders. A folder is just a way of grouping files. To create a multi-page website, you might need dozens or even hundreds of files. It’s important to keep those files organized so that you can find them easily in the future!

You can also have folders inside folders. This can be useful in keeping your files organized. For example, you may want to have a folder for this class, and additional folders for each class session inside it.

For more on folders, see this helpful guide.

Setting Up VSCode

Now that we understand applications, files, and folders, let’s download an application and use it to edit some files!

To begin, download VSCode here: https://code.visualstudio.com/Download

Follow the steps on your screen to install it. If you get stuck, try this guide for Windows. I couldn’t find a guide for Mac, but ask a teacher if you need help.

Creating a Folder for this Class

It’s a good idea to have a folder where you will keep all of the work for this class.

To create one, right click on your desktop. You will see slightly different options depending on whether you are using Mac or Windows. Either click the option for “New Folder” (on Mac) or “New” and then “Folder” on Windows:

The menu that appears when you right click on the desktop on a Mac computer, with 'New Folder' circled
The menu that appears when you right click on the desktop on a Windows computer, with 'Folder' circled

Name your folder ReDI HTML and CSS.

Creating Files in Your Folder

There are many different ways to create new files - let’s practice using VSCode to do so.

First, open VSCode. If you have trouble finding it, use your computer’s search function (in the bar along the bottom of your screen on Windows, or the magnifying glass icon 🔍 in the top right corner on Mac).

Next, click “open”:

Screenshot of a VSCode window with the open file button circled

Then, find your ReDI HTML and CSS folder in the menu. If you can’t find it, look for the folder called Desktop - ReDI HTML and CSS should be inside it.

Double click on that folder or click “open” to open it.

Now let’s create some new files in your folder!

First, click on the “file explorer” icon:

Screenshot of a VSCode window with the file explorer button circled

Next, click on the “new file” icon:

Screenshot of a VSCode window with the new file button circled

Type a name for your file. Two VERY IMPORTANT NOTES:

  1. Your file name should not have any spaces. Use hyphens (-) or underscores (_) instead of spaces in the file name.
  2. Your file name must end with .html (for HTML files) or .css (for CSS files)

For example, you could name your file new_project.html or recipe-website.html or blog.html or lesson-11.html.

You should now have a blank file in front of you. Nice work!

Introducing the <!DOCTYPE html>, <html>, <head>, and <body> Tags

Every HTML file is a complete webpage. When we’ve written in CodePen, we’ve essentially been writing only the content of the webpage, but there are actually more things that go into an HTML file than CodePen allows us to write.

There are 4 key pieces to every HTML document:

  • <!DOCTYPE html>: always put this at the top of your HTML document, before anything else. There is no corresponding closing tag. For now, don’t worry about why. It just needs to be there.
  • <html></html>: this will be the parent element for everything else in your HTML.
  • <head></head>: this goes inside the <html> tag and comes before any other tags. This is for things that are not visible content on the page, but that may impact it in other ways (like linking to a CSS file for your site!).
  • <body></body>: this goes inside the <html> tag after the </head> closing tag. It contains all the visible content on the page. Everything we have written on CodePen has been treated as if it were inside a <body> tag.

So here is what a blank HTML document should always look like, before you add any other content:

Screenshot of an HTML file with DOCTYPE, html, head, and body tags

And we can start writing HTML in our <body> tag:

Screenshot of an HTML file with an h1 tag in the body

Linking HTML and CSS files together

So now we’ve got an HTML file - what if we want to add CSS? We need to have a separate CSS file!

We can go through the same steps we went through to create an HTML file.

First, click on the “new file” icon to create a new file in this folder:

Creating a new CSS file step 1

Next, name your file with a .css file extension: Creating a new CSS file step 2

Next, write some CSS styles: Creating a new CSS file step 3

Last, we have to tell our HTML file where to find our new CSS file. To do so, we have to add a <link> tag to our <head> tag.

Our <link> tag has two important attributes: rel (short for “relationship”) and href. rel will always be set to "stylesheet" when our link is to a stylesheet. We’re telling the HTML file, “here is where you can find a CSS file that we should use to add styles to our page.”

href will be set to the location of our CSS file. If they are both in the same folder AND your file is called lesson-11-styles.css, it should just be href="lesson-11-styles.css". The final product would look like this: Creating a new CSS file step 4

Viewing Your New Page

OK, so we’ve created an HTML and CSS file and linked them together - but how do we view the result?

We need to open our HTML file using a web browser!

On your desktop, double-click your ReDI HTML and CSS folder to open it.

Viewing an HTML file step 1

Inside the folder, you should see the HTML and CSS files you saved: Viewing an HTML file step 2

Double click the HTML file, or right click and select “open”: Viewing an HTML file step 3

The file should open in your web browser! Viewing an HTML file step 4

To make changes to your HTML and view them, follow these steps:

  1. Update your HTML in VSCode
  2. Save your changes
  3. Refresh your browser

That’s it!

Exercise

  • Change your theme
  • Install the Prettier extension for automatic code formatting
  • Create a second set of HTML + CSS files and link them
  • Can you link multiple CSS stylesheets to one HTML file? Try it!
  • Can you link multiple HTML files to one stylesheet? Try it!
  • Can you download an image and display it locally? Try it!

Homework

  1. Make sure you are comfortable creating files and folders on your computer. Watch Computer Skills Course: File Management, Part 1 and Computer Skills Course: File Management, Part 2 if you are unsure or would like to review. Note that you can turn on subtitles if you’re having a hard time understanding him or hear some new words you’re not familiar with!
  2. Watch this YouTube video on file paths and write down notes/questions. If you prefer reading to watching, read this article. Or do both! It’s OK if this does not fully make sense yet! We’ll practice in class next week, and it takes time. Just get a start!

Slides