"Hello, World!" in HTML / CSS / JS

Welcome to the Information Age:
A new era of the human civilization powered mostly by the web technologies!

Web Development is a vibrant and powerful field of computer science.
Any software engineer should have the basics of HTML / CSS / JS in their skill toolbox.

This article will drive you towards a very simple hello world in HTML / CSS / JS which we'll end up publishing on the web, for anyone to consume!

This tutorial is intended at total beginners. If this article ends up popular, I may write more so please encourage me in the comments!

HTML

HTML is the backbone and the starting point of the web trifecta. Let's create our HTML hello world:

1. Create a folder named hello-world
2. Inside this folder, create a text file named index.html
3. Open this file in a text editor and paste the following content: Hello, World!

Your file editor may look like that: (if using VS Code)

Save and double-click on the file from your file explorer, it should open in your default web browser:

Well done!

You may wonder "Is that code? That doesn't look like a programming language!"

Yes it is! HTML is a declarative language while you may be used to imperative languages like Python or Java.
Also, HTML is very permissive and will try to make the most out of what you give.

The HTML code Hello, World! can also be understood as: browser, this is a document with the text "Hello, World!".

The Web browser reads this code and renders visually the document.

CSS

CSS is used to add some "style" to the document. Yes, I mean style like 👨‍🎤 💅!

Our current hello world is very bland and neutral (but also very readable and clean). Let's add some personality to it!
Go back to your index.html file and turn it into this:

Hello, World!

<style>
    html {
        font-family: sans-serif;
        background-color: #f6f0d6;
    }
</style>

Save the file. Go back to your browser and click the "reload" button (or press the F5 key or press ⌘ + R)

After reload, your page should now look like this:

Nicer, isn't it?

Now let's break down a little the code we just added:

<style>
    html {
        font-family: sans-serif;
        background-color: #f6f0d6;
    }
</style>

1. the <style>…</style> is called an "html tag". Yes, it's HTML, a bit more advanced.
2. <style> is the *opening tag* and </style> is the closing tag. Did you spot the difference? (hint: /)
3. HTML tags always go in a pair, a beginning and a closing (unless exceptions)
4. yes, it's similar to parenthesis () or brackets {} or []
5. yes, it's also similar to XML in case you know this format! (but HTML is not pure XML)
6. the <style> tag is used to embedd CSS into our HTML. As said previously, CSS is for styling HTML, this makes sense.

Now let's break down the CSS:

html {
    font-family: sans-serif;
    background-color: #f6f0d6;
}

1. we are styling our html
2. to this html we are applying some *CSS properties*:
   • font-family controls the font, we set it to sans-serif, a more modern look
   • background-color controls (obviously) the background color of the container. We set it to #f6f0d6 (RGB notation) which is a light yellow

There are many many other CSS properties and HTML tags, we barely scratched the surface!

JS

JS (aka. "JavaScript") adds interactivity to a document. With JS, an HTML document can become a powerful "web app" like gmail or facebook!

Turn your index.html into this:

Hello, World!

<style>
    html {
        font-family: sans-serif;
        background-color: #f6f0d6;
    }
</style>

<script>
    console.log('Hello, JS!');
</script>

And reload the page again:

No visual change! That's normal!

Now let's break down the new additions:

<script>
    console.log('Hello, JS!');
</script>

1. the <script>…</script> is another "html tag", similar to <style>…</style>
2. as you may have guessed, the <script> tag is used to embedd JS into our HTML
3. console.log('Hello, JS!'); is to print to the console, in other languages it could be print "hello, world!" or System.out.println("Hello, world!")
4. Now the question is: Where was it displayed??

Let's discover the dev tools! Right click anywhere on the document and select the command named "Inspect" or "inspect element":

The dev tools should open, on a tab called "Elements" or "Inspector". Click on the "console" tab that should be next to it:

Here is displayed the hello, JS! triggered by the JS code console.log('Hello, JS!')! (You may see errors and warnings as well, ignore them for now.)

The "dev tools" are super useful! You may want to keep them open while you create a web document, for they'll alert you of some errors.

Back to HTML

Now that we have a basic understanding of HTML, CSS and JS, let's turn our document into something a bit more worthy of being shared with the world:

<h1>Hello, World!</h1>

<p>
    What I'd really like to share is:
    <strong>(replace this with a powerful or interesting message you want to share with the world)</strong>
</p>
<small>(date & time)</small>

<style>
    html {
        font-family: sans-serif;
        background-color: #f6f0d6;
    }
</style>

<script>
    console.log('Hello, JS!');
</script>

Note that you have to come up with your own message!

Let's reload the page again:

Note how the "hello world" is bigger now!

let's break down the new additions:

<h1>Hello, World!</h1>

<p>
    What I'd really like to share is:
    <strong>(replace this with a powerful or interesting message you want to share with the world)</strong>
</p>
<small>(date & time)</small>

1. We're introducing new HTML tags:
   1. <h1> is for a title or header, that's how it ended up big!
   2. <p> is for paragraph = a block of text
   3. <strong> is for something more important = it ended up bolder
   4. Similarly, <small> is for something less important = it ended up smaller
   5. note: in theory, browsers are free to express <strong> and <small> however they want!
   6. Notice how we are imbricating the HTML tags together!
2. You may wonder about (date & time), we'll get to it later.

Interactivity with JS

Now let's dynamically replace (date & time) with the actual date & time thanks to JS:

<h1>Hello, World!</h1>

<p>
    What I'd really like to share is:
    <strong>(replace this with a powerful message you want to share with the world)</strong>
</p>
<small>(date & time)</small>

<style>
    html {
        font-family: sans-serif;
        background-color: #f6f0d6;
    }
</style>

<script>
    console.log('Hello, JS!');

    const dateTimeElement = document.getElementsByTagName('small')[0];

    function updateTime() {
        dateTimeElement.innerText = new Date().toLocaleString();
    }

    updateTime();
    setInterval(updateTime, 1000);
</script>

Let's reload the page again:

We now display the current date and time, updating automatically!

let's break down the new additions:

const dateTimeElement = document.getElementsByTagName('small')[0];

function updateTime() {
    dateTimeElement.innerText = new Date().toLocaleString();
}

updateTime();
setInterval(updateTime, 1000);

1.

Publishing!

Right now, our HTML file is sitting on our hard drive.
To share it with the world in the old way, we would have to share the files with recipients, ask them to download it (erk!) then to double-click on it (arg!).
That's completely outdated in our days and age!

Let's serve our web document! We'll use Netlify, a nice company that'll host our document for free!
Head to https://app.netlify.com/drop. You should see something like that:

Now it's time to drag and drop your folder, which should look like that:

Drag and drop the folder to the drop area. After a few seconds, it should turn to something like this:

stalwart-gaufre-8eb150
https://stalwart-gaufre-8eb150.netlify.app

Click on the link: It should work!
Well done!

• You created something and contributed to the web!
• You shipped something, it's not sitting in a corner of your hard drive!
• You can now easily share this link with your family and friends, they'll be able to access your document in 1 click, - no download needed - no install needed - regardless of whether they're using a Mac, a PC, a smartphone, a smart TV,...

How do you like it? This is the power of the web!

Comments

[Eckehard]

For quick tests I like to use flems.io. Unlike other Platforms (like codepen) it does not need any external storage, as all data are stored in the URL! (cool, isn´t it?)

To get a working example, just copy the URL and you are ready to go:

EXAMPLE

[Offirmo]

Looks nice!
Thanks for sharing! I may use it in the future!

[Philip J. Dolo]

Congratulations, Sir! I am super-excited to come across this article of programming knowledge. I hope to receive more tutorials from you, Sir. Thank you!

[Offirmo]

@devengrdolo you're too kind :)

[Offirmo]

In case it helps, here is the code in CodePen codepen.io/Offirmo/pen/qBGEQYv