Skip to main content

⚙️ Setting Up Your Environment

To set up for programming your personal website, you need to download two apps. VSCode will be the app you will use to write your code and Git will be used to document the work you do. To download VSCode, click on the link. This should take you to a page that shows multiple download buttons, click the one that is most similar to your device. Afterwards, run the installer file and install VSCode.

If you're on Windows you'll need to install Git. If you're on a Mac, you should already have Git installed.

For my fellow Windows users, head over to the Git Installer Page and press the "Click here to download" button at the top of the page to start installing. Follow the instructions on screen to complete the install.

To make a GitHub account, go to GitHub's website. Once there, there will be a button on the top right of the screen that says sign up. Click on it, and make your account using your preferred method. After this, open up VSCode and sign into your new account. Here's a short tutorial that walks your through signing into your new account in VSCode.

Account Login in VSCode w/GitHub

Next, you will need to download several extensions for VSCode. To do this, open VSCode, and click the following icon on the left sidebar:

Extensions Icon

Once you press this icon, type the following extension names into the search bar and install each of them.

  • HTML CSS Support
  • IntelliSense for CSS class names in HTML
  • TODO Highlight
  • Live Server

The "Live Server" extension that you downloaded will be used to view your changes as you go. Once it's installed you should see a small icon in the bottom-right corner, something like this:

Live Server Icon

While you're at it, install some themes to make your VSCode look nice! You can search for themes in the extensions tab as shown above!

Theme Snippet

To change your theme, go to your Settings page and then search for "theme". I personally use GitHub Dark, but it's up to you! If you want to try it out, install "GitHub Theme" from the extensions tab and set it as your theme!

Next, you will begin to code your own personal website!