Like in any other programming language course, it's usually a common habit to always start by showing the text
For now, and to get started as quickly as possible, we will do that in the browser developer tools ( I recommend using Google Chrome browser ) and later switch to our code editor.
There are three ways ( Known to me 😄 ) in which we can open up the Chrome developer tools :
Cmd + Option + J on Mac and Ctrl + Alt + J ( or Ctrl + Shift + I ) on Windows
Right-click anywhere in your browser and select inspect, which will bring you to the Elements tab and from there, you can go to the Console tab.
The third way is to click on the three vertical ellipses at the top right section of your browser, select More tools, and click on Developer Tools.
'Hello World!' then hit return or enter.
Let's break down this definition to at least make some sense out of it :
It's a lot to take in now, I know, but don't worry you will learn all about these concepts in the upcoming lectures. This is literally a high level overview. Hoping it made at least some sense so far.
HTML handles everything that has to do with content, .i.e, text, buttons etc.
CSS takes care of the presentation and styling of elements on a web page.
One can use the analogy of nouns, adjectives, and verbs to clearly distinguish these 3 core technologies as shown in the image below :
Enough of this theory. Let's finally get started 🔥
On your computer, create a folder and inside that folder create an
index.html file. Open the folder with your favourite code editor. I use VSCode. Inside your
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>
The first way ( not recommended ), is by using the
script tag either in the
body tag or in the
head section of our HTML page.
<script/>tags just before the closing
</body>tag rather than in the
<head>section of your HTML.
You can find more details in the article.
Let's continue! Add a
script tag before the closing
</body> tag. In between the opening and closing
. . <body> <script> alert('Hello World!'); </script> </body> . .
To execute this code, all you have to do is open up the
So, back in your folder, open up your
index.html file with your favourite browser ( I personnaly use Google Chrome ) and you should see an alert saying
'Hello World'. Click on the
ok button to stop the execution.
. . <body> <script> alert('Hello World!'); 20 + 22 </script> </body> . .
console.log(). So we will change the previous code snippet to this :
. . <body> <script> alert('Hello World!'); console.log(20 + 22) </script> </body> . .
In your root folder, create another file as mentionned before; name it as you like ( I named mine
script.js. Kind of a standard. ) and paste the code inside.
alert('Hello World!'); console.log(20 + 22);
Back in the HTML file, our file looks great and we have a better seperation of concerns between presentation and logic. Making it easier to maintain code in the long run.
To do the connection, we aren't going to put any code inside the
script element but instead we are going to specify an attribute in the
script tag called
src, and it's value will be the name of the script and it's location as shown in the code snippet below.
. . <body> <script src='script.js'></script></body> . .