Get Started in Web Development

Get started on web development in just a few steps:

Get a Computer or Laptop
If you are browsing this page in a smartphone or tablet, you need to turn on your computer or laptop.
Open your Browser (Chrome, Firefox or Safari) and Visit jsitor (an online text editor)
Select the HTML Tab You’re going to see three tabs on the top-left side of your screen which should display JavaScript, HTML, and CSS. Then, click on the HTML tab.

Copy and paste the following code to the HTML Text Editor

<html>
    <head></head>
    <body>
        <!-- Your code goes below this comments -->

        <!-- Your code goes above this comments -->
    </body>
</html>

In the blank line between the comments, Type:
```
<h1>Hey Universe!</h1>
```
Tip: You can change that (Hey Universe) text to whatever you want!
Check the browser window at the right of the page, it should display the text you just input on the last step
Select the CSS Tab
Take a look at the same three tabs on the top-left side of your screen which should display JavaScript, HTML, and CSS. Then, click on the CSS tab.
Copy and paste or type the following code to the CSS Text Editor
```
p {
    color: red;
    text-align: center;
}
```
The text color should change to red and it is now center aligned
Lastly, select the JavaScript
Take a look at the same three tabs on the top-left side of your screen which should display JavaScript, HTML, and CSS. Then, click on the JavaScript tab.
Copy and paste or type the following code to the JavaScript Text Editor
```
document.body.innerHTML += 'I got it!';
```
A text saying ‘I got it!’ should appear after the ‘Hey Universe’
Congratulations! You wrote your first complete website with all the languages that comprises any modern website!

But you might be thinking, this is too much!

Don’t worry, we will go over each language slowly making sure you understand and you’re fluent in that language so that we can go to the next one. Web Development is just like LEGO you building an amazing landscape by building one block after the other. So don’t worry, as we going to start with the simplest one HTML.

You can check the posts about HTML and learn more about it from here. Thank you very much for reading until here and I will see you in the next lesson!

by Thiago Montezuma

Created on Mar 3, 2021