Before we can continue, we need to set up a development environment.
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.
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.
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:
- Open up a new terminal window in VSCode, either by going to
Terminal > New Terminalfrom the top menu or by pressing
- Open the terminal selector (can be found in the top right corner of the terminal), click on
Select Default Profileand 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.
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
Code Spell Checker extensions makes it easy to spot misspelled words, either inside your code or plain text content:
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).
Read the following guide on how to setup launching VSCode from the command line on a Mac.
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"
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.
Watch the next video and learn how to set up an efficient and distract-free VSCode environment.
Duration: 8 minutes
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:
If everything completed successfully, you will be seeing the version of Node.JS displayed on your terminal/console window.
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
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.
- Saves disk space & bandwidth by compressing images without losing quality.