How to get your computer ready to write code

Download the software

Google Chrome - Windows / Mac

We need a browser to view the web pages we will build.

Get VS Code ready

Install Prettier - Code formatter

This plugin helps format the code we write and make it look prettier. So it is easier to see when there is an error.

After installing the plugin, go to the menu Code > Settings > Settings.

And in the search field, type format on save and check the checkbox. Now VS Code will run the formatter every time when we save the file.

Then search for default formatter and select prettier in the option.

At last, search for autosave and select onFocusChange in the option. This tells VS Code to save our code automatically when we leave the window.

Now, let's create our first page. Firstly create a folder on your desktop and drag the folder into VS Code window.

Then click the button in the red box in the picture below.

Create a new file named index.html.

Press "Enter" and now you have your first HTML file.

Copy the following code below and paste it there. And press cmd + s if you are on macOS or ctrl + s if you are on Windows, and you should see the format change and it should look nice and clean now.

<!DOCTYPE html>
<html><head>
<title>My First Web Page</title></head>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p></body></html>

Install Live Server

Click the link to install the plugin live server, now with you index.html open, on the bottom right of your editor you should see "Go Live", click on it.

And you will see the page we just created on the browser.

That's it, you made it! Now you are ready to learn coding, well done. ๐Ÿ˜ƒ

ย