learntheweb

Menu
Sign Up
Log In

Lesson Content

Setting up a Code Editor

Introduction

If you want to learn skateboarding, you can’t just watch other people do it. You have to get on a skateboard and give it a try yourself. The same is true for programming. In this lesson, we’ll help you set up a code editor so you can start writing code on your own. The more you practice, the better you’ll become. So don’t be afraid to get your hands dirty and give it a shot!

Overview

By the end of this lesson, you should be able to:
    • Understand how to use a code editor of choice to write code
    • Understand how to open a website/live server to view code

Code Editors

In today’s lesson, we will go over how to setup two code editors that allow us to write HTML in it. If you already have a code editor setup that can run HTML and preview coede on the web, you can skip this lesson!

Anyways, here are the two code editors that we will be setting up today:

    • VSCode
    • Replit

So what is the difference between them?

Visual Studio Code (VSCode) is a popular choice among developers because it has a wealth of features that make coding more efficient. However, it does require downloading, which may not be feasible for everyone. If you have a computer with limited resources, you may find that running a code editor like VSCode is not possible.

Repl.it is a great code editor that is widely used by developers due to its extensive set of features that make coding easier. One of the benefits of Repl.it is that it can be used entirely in the browser, so there’s no need to download anything. This can be especially useful if you don’t have a computer with the resources to run a full-featured code editor like Visual Studio Code.

You don’t need to setup both of them as they serve the same purpose.

Setting up VSCode

      1. Go to the VSCode website (https://code.visualstudio.com/) and click the “Download” button.

      2. Once the download is complete, double-click the installer file to begin the installation process.

      3. Follow the prompts to install VSCode on your computer. This may include selecting the installation location and agreeing to the terms of use.

      4. Once the installation is complete, you can launch VSCode by double-clicking the icon on your desktop or finding it in your start menu (on Windows) or applications folder (on macOS).

      5. On your desktop, go ahead and create an empty folder. It can be named anything, but make sure you are able to recognize it. Example Name: HTML Course Folder

      6. With VSCode open, there should be an option to “open folder”. Click that and open the folder you created in Step 5. If you can’t find the “open folder” button, follow these steps:
          1. Click “file” on the top left of the VSCode screen
          2. Click on “open folder”
          3. And open your folder that you made in step 5.

      7. Go ahead and add a file in your newly created folder called “index.html”

      8. For the final step in the setup, right click on your “index.html” file in VSCode. It should be empty.

To open a live server that serves your project to the web using VSCode, you will need to install the Live Server extension. Here’s how:

      1. In VSCode, click on the “Extensions” icon in the left sidebar or press Ctrl+Shift+X (on Windows) or Cmd+Shift+X (on macOS).

      2. In the search bar, type “Live Server” and press Enter.

      3. Click the “Install” button next to the extension to install it.

      4. Once the extension is installed, open the project folder that you want to serve to the web.

      5. Right-click the index.html file and select “Open with Live Server” from the context menu. This will open a new browser window with your project served by a live server.

Now, we just need to setup our auto-refresh settings and we’re done!

      1. Click the gear icon on the bottom left in VScode and click “settings”

      2. Search up “auto save” in the search bar.

      3. In the first drop-down, make sure it is set to “After Delay”

      4. In the box where it asks for auto-refresh milliseconds, set it to 600 milliseconds.

That’s it! With auto-refresh enabled, any changes you make to your code will be automatically reflected in the browser when you save the file.

If the live-server steps are confusing, you can follow this video which will go over how to setup the live-server and auto-refresh parts.

Setting up Repl.it

  1. Go to Repl.it (https://repl.it/) and click the “Sign up” button in the top right corner to create an account, or log in if you already have one.

  2. Once you are logged in, click the “New Repl” button in the top left corner.

  3. In the “Create a new repl” window, select “HTML” from the list of languages on the left.

  4. Give your repl a name (optional) and click the “Create repl” button.

  5. Your HTML repl will open in the online code editor. You can start writing code in the main.html file.

All Done!

Great! Now that you have your code editor set up, it’s time to start writing code. It doesn’t matter which code editor you choose, the output will be the same. In the next lesson, we’ll delve into the basics of HTML by exploring HTML tags. These are the building blocks of any HTML document, and they provide structure and meaning to your content. So let’s get started!

Last Lesson
Course Page
Next Lesson