Step 0: Setting Up Your Development Environment
April 30, 2021
console.log(2 + 2); to the console and pressing enter. We would see the result of this calculation getting displayed. This is a neat feature but is not extremely useful for our purposes since the console only allows for a single line of code to be executed at a time.
Here we have a code snippet written in the HTML language. HTML language consists of tags used to describe the elements of a document. Here we have an
h1 tag that represents the main title in a document. Then we have a
p tag that describes a paragraph. Inside the
p tag, we have a
strong tag that indicates that the content it wraps is important. These tags help the web browser make sense of the document that we are providing.
Let's first create an HTML file to be loaded by the web browser.
We have added more tags into this HTML code to make it a valid HTML document. We can now drag this file into a web browser or type the full file path into the address bar. The browser will open and render this file.
main.js. We can add these two lines of code inside the
console.log("Hello World"); console.log(2 + 2);
We have added a new tag called
script. We can use
A couple of services that I use and like are codepen.io, jsbin.com, and codesandbox.io. There are many other services, but these three are the ones that I use the most. We can use all of them to write HTML and JS code inside the browser without creating any files on our computer. They are excellent environments for learning how to code and for prototyping ideas.
Codesandbox has excellent features, and it is an incredible tool if you want to prototype a relatively complex idea. It has very advanced features that make it extremely capable as an online editor.
- Writing it directly inside the browser.
- Writing it inside a
.jsfile and loading that file through an HTML file.
- Using an online editor.
The last option that we learned about is an online editor. Online editors are incredibly convenient because we don't have to manage any files on our computers. We just visit a web page, and we are good to go. They are great environments for learning and experimentation.
Find me on Social Media