Setting up a Web Development Environment Copy

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, 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 Profile 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 misspelled words, either inside your code or plain text content:

Code spell checker

Code spell checker

Live Server Extension Set Up

At this point you should be familiar with VSCode, be able to install and uninstall Extensions, configure various aspects and features of the application and work with code files. Also, you should have the Live Server extension installed on VSCode.

Take a look at the next video, in order to understand how you can work with the Live Server extension as we are going to use this setup a lot in the following lessons.

Duration: 2 minutes

Tip: If you are looking for a quick and easy way to position your application windows next to each other, for example having VSCode taking up the left 50% of your screen and the Browser taking up the other right half 50%, you can use some of the shortcuts presented in the videos below (Windows 10).

Launching from the command line (Mac)

Read the following guide on how to setup launching VSCode from the command line on a Mac.

Additional Resources

Troubleshooting

For resolving issues regarding the Live Server, you can start your search from the repository’s issues page

QUESTION: The point of the extension "Live Server" in the VSCode is not for us to refresh the webpage everytime we make changes, right?

Live Server refreshes the page automatically after each save.

TIP: If you select "Autosave" from the "File" menu, you can just code and VSCode will automatically save the file as you type while Live Server will automatically refresh the browser for you.

QUESTION: I save my changes in my code but then I have to refresh the webpage in order to see the changes and from the video tutorial I got the idea that it refreshes automatically. I created a folder inside the folder. The file from the first folder can be updated automatically, but the file in the second folder, the folder that belongs to the first one, cannot be updated.

the essay.html changes automatically and belongs to the initial folder "ASSIGN" . the file.html doesn’t and belongs to the folder "new"

SOLUTION:

The problem was the file that was created in a folder within the vscode, in my case that folder was "NEW". The folder "ASSIGN" was created in my desktop and then I added it to vscode workspace and the files inside work fine.

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 and Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Back to Lesson