Table of contents
Download the software
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. ๐