Knowing HTML & CSS is helpful but not necessary until much later, it is essential with DOM (Document object Module).
1.Web browser: You will need a web browser (Chrome, Firefox, internet explorer, Microsoft edge), I will recommend that you use the latest versions of chrome and Firefox.
2.Text Editor: You can use
replit.com (an online text editor or
notepad but I will recommend vs code.
To download visual studio code, you can head to this urlDownload Visual Studio Code and download the latest stable version for your operating system, you can download for MacOS, Windows and Linux.
After downloading the visual Studio code and installing I will recommend you download the
live server extension. What live Server does is that every time you save your js file, it will update your current web browser right away to reflex any changes, it is a very helpful development tools.
Now you have to create two more files, that is index.html and style.css in the same folder.
We will be needing the html skeleton code to work with, so within our html file you can press
shift+1(!) to get you sample html skeleton to create a webpage.
To link your html and CSS you can use the link tag (
<link rel="stylesheet" href="style.css">) placed within your head tag
<script></script> within the body tag
<body></body> and set the source attribute within the
<script> to index.js, this is what I mean
<script src="index.js"></script>. Then make sure to save everything.
To open with live server, you can right click and select the live server extension which will open in your window.
To access your console which we are going to use to display our output, you can right while in your web browser and select inspect at the bottom.
you can either use
"", it is optional to add a
; at the end of the sentence but in nearly all programming languages you need a
; to terminate a line of code, and now when you save your code it will update your browser and you have the following output in your console.
and you will still have the output.
Now to create and
window.alert("I love programming");
and alert will create a popup.
//This is a comment
Usually, comments are used as a note for yourself or for other developers who would like to read your code.
Also, you can create a multi-line comment by using
This is a multi-line comment.
Also, I would like to add these tips I got from (ref:Fady GA)
Two words, THE BASICS
And the below steps really sums it up for me.
1- Learn your basics.
2- Progress slowly.
And avoid those pitfalls:
1- Learn a lot in a short time.
2- Bury what you don't understand.
3- Don't apply what you learn.
So again, don't rush it 😵💫. You can learn ANYTHING 😎! And learning is marathon not a sprint 🏃!