You are going to write your first program in this section. It is going to be a simple program that prints out a simple message that says “Hello, World!”.
A “Hello, World!” program generally is a computer program that outputs or displays the message “Hello, World!”. Such a program is very simple in most programming languages, and is often used to illustrate the basic syntax of a programming language. It is often the first program written by people learning to code. It can also be used as a sanity test to make sure that a computer language is correctly installed, and that the operator understands how to use it.
— Wikipedia, read more about “Hello, World!” programs
Let’s open VS Code editor and get into it.
Create a new file
The first thing we need to do is to create a new file. Click on “New file” button to do that.
You should see something like this.
Let’s save the file and give it a name. Press Cmd+S (for Mac) or Control+S (for Windows). Then select or create a folder where do you want to keep your code. I have created a folder “programming”. Then type the name of the file
hello-world.html and click on Save button.
Write the code
Let’s write code, that prints out “Hello, World!” text, into
hello-world.html file. Once you are done with typing, hit Cmd+S (for Mac) or Control+S (for Windows) to save the file.
Watch the video for convenience.
Run the code
We are going to run the code inside a web browser. Open Chrome and then open the developer tools by pressing Cmd+Option+J (on Mac). Here is a tutorial on how to enable developer tools in case nothing opens in Chrome after pressing Cmd+Option+J on your keyboard.
Make sure you saved your
hello-world.htmlfile after doing the changes. If you don’t save the file, you won’t see anything in the Chrome console.
Watch the video to help you with this task.
If you see error, double check the code. It has to be exactly this and every missing letter can cause malfunctions:
Change the code, run it and observe changes
Let’s try to modify the code in this section. We are going to change “Hello, World!” to “Hello, World! I did it!”
Open the editor and update the code to the following.
console.log("Hello, World! I did it!");
Once done, save the file, go to Chrome, click on the refresh button in Chrome and observe the changes. Here is the video showing the whole process.
Congrats, you made it to the end! Try to play with the code, change the text any text you want to, and observe the changes. You can also try to put two lines with
console.log() and see what happens.
Here is something to try out.
console.log("What is going to happen with this?");
console.log("Can you print numbers?", 123);