Setting up a Web Development Environment (v1)

Introduction

Before we can continue, we need to set up a development environment.

Browsers

Throughout this course, we will mainly be using the Google Chrome browser and its Developer Tools.

Apart from Chrome you should also install at least two other browsers (we suggest Mozilla FireFox and Microsoft Edge) as one of the most important aspects of Frontend development is to ensure that our websites look and behave good across all browsers.

If you are on a Mac (lucky you!), you might also want to check your code in Safari browser too.

Install Git and GitBash

Go to the official site, download and install Git (version control software). If you are a Windows user, you will get GitBash terminal installed along with Git.

Download VSCode

Visual Studio Code is a popular code editor created by Microsoft and one of the best code editors out there!

Go to the official site, download and install the latest version.

Task: Once you’ve installed VSCode, make sure to set GitBash as your default terminal:

If you are a Mac/Linux user, you can skip the following steps, as you’ve already have the Bash terminal running on your system.

  • Open up a new terminal window in VSCode, either by going to Terminal > New Terminal from the top menu or by pressing Ctrl+J.
  • Open the terminal selector (can be found in the top right corner of the terminal), click on Select Default Shell and from the available options select GitBash. Make sure to kill the terminal by clicking the trash bin icon, and also closing and re-opening VSCode.

Select Default Shell

Getting familiar with VSCode

Watch the next video by James Q Quick and start getting familiar with VSCode.

Duration: 8 minutes

Learn how to browse, manage, install and uninstall Extensions for VSCode

Install the following VSCode Extensions

The Code Spell Checker extensions makes it easy to spot mispelled words, either inside your code or plain text content:

Code spell checker

Code spell checker

The Bracket Pair Colorizer extension makes it easy to spot where a bracket pair opens and closes:

Bracket Pair Colorizer

Set up GitBash as your default terminal in VSCode

Visit this StackOverflow post and follow the instructions to set GitBash as the default integrated terminal.

Setting up and configuring VSCode for efficiency and productivity

Watch the next video and learn how to set up an efficient and distract-free VSCode environment.

Duration: 8 minutes

Download and Install Node.JS

Go to nodejs.org, download the LTS version and follow the default steps.

To check that everything has been correctly set up, open the terminal/console and run the following command:

node --version

If everything completed successfully, you will be seeing the version of Node.JS displayed on your terminal/console window.

node --version

Learn about the Markdown format

Since you’ll be using the Markdown format a lot, as a developer, you must learn about what it is, its basic syntax and use an online Markdown editor to get a feeling of this really useful and handy format.

  • What is Markdown?

Duration: 8 minutes

Additional Tools

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 22.12.2020

  • [22.12.2020] Added notice for Mac/Linux users about Git Bash.

Leave a Reply