A Not so comprehensive webdev guide by Heritier: looking at HTML, CSS, and javascript

Intro

Learning web development means you'll come across HTML, CSS, and JavaScript. The web is built with these coding languages.
You'll see them everywhere.

The majority of libraries and tools seem to revolve around HTML, CSS, and JS. So if you're aiming to be a web developer, you'd better learn them well. Many sites are built by using these languages.

What are they all and what do they do? How significant are they? In every web development tutorial and topic, you'll see them. What makes them so popular?

We're attempting to look at the basics of HTML, CSS, and JavaScript, how they make the Web work, and what they do themselves. Read on to find out.

Let's start with the Internet.

You can think of it as a network of computers that exchange data (information).
A computer on the internet can be identified and located by its IP Address.
Here's what an IP Address looks like: 196.253.296.217

So what is the Web?

It's a part of the internet. Every internet network has two parts, the browser and the server.

When the client wants some data, the server shares it. But first, they have to agree. It's called the Application Programming Interface, abbreviated API, for short.

Nonetheless, it's important to format and arrange the data so that it's easy to understand by users with all kinds of technical skills. Thats were HTML, CSS, and JavaScript comes in.

What about HTML?

It is an acronym for Hypertext Markup Language.
As a result, you can think of HTML as the language that tells you how to format and style a web page before it is rendered and shown to you.
A HTML page is organized into elements like paragraphs, sections, headings, navigation bars, etc.

Here's a simple HTML document to show you what a page looks like:

<!DOCTYPE html>
<html>
<head>
   <title>Title of the website here </title>
</head>
<body>

<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>

<p>My paragraph.</p>

<ul>
  <li>
   Bullet point Item 1 here
  </li>
  <li>
   Bullet point Item 2 here
  </li>
</ul>

<button>button content</button>

</body>
</html>

This is HTML just to make a simple document. The markup contains some tags elements like:
Level 1 h1 tags, A paragraph P tag, A Bullet points ul li tag, A button input tag, And a body tag

These elements can also have attributes, so you can identify them and target them from other places.

<!DOCTYPE html>
<html>
<head>
   <title>Title of the website here </title>
   <link rel="stylesheet" href="index.css">

</head>
<body>

<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>
<h1>My lvl 1 Heading</h1>

<p>My paragraph.</p>

<ul>
  <li>
   Bullet point Item here
  </li>
</ul>

<button>button content</button>

<span id="firstSpan">content</span>
<span id="secondSpan">content</span>
<span id="thirdSpan">content</span>
<span id="fourthSpan">content</span>
<span id="fifthSpan">content</span>

<script src="index.js"></script>
</body>
</html>

As an example, we added id attributes to the five span elements as a preview on how to label elements for targeting via javascript.

Think of it like your social media handle. It helps people find you on social media. It's also possible for others to mention you or refer to you by your name (you can get tagged in a post, etc.).
Unfortunately, this page is pretty basic. For anything else than a demonstration, you'll have to do some styling. Fortunately, CSS allows us to do just that.

So what is CSS?

CSS is a design language used to make a website look nice and presentable. HTML is a markup language used to layout a web page.

With CSS, you can improve the appearance of a website after linking it in your HTML file. You can make your page more appealing by adding thoughtful CSS styles.

If human beings were just skeletons and bare-bones, how would they look? Kinda gross. CSS acts like our skin, hair, and general looks.
CSS lets you position elements in specific places on your page.

But you have to select them first. You can choose one or more web elements, and you can specify how they look or where they are positioned.

You do this with CSS selectors.
CSS lets you control the color and background of your elements, along with the typeface, margins, spacing, padding, and more.

p {
  color: red;
  text-align: center;
}

You might remember our HTML example page, which had a bunch of pretty self-explanatory elements. Let's say I said I'd change the color of h1 to red.
To illustrate how CSS works, let me share the code that sets the background colors for the level 1 header's to red.

h1{
     background-color: red;
 }

When you apply the above style, our page will look like this:

Pretty neat, huh?
You select the elements you want to work on. Each h1 selects all level 1 headings on the page, each h2 selects the level 2 elements, etc. You can select any HTML element and modify its appearance and positioning.

So what is JavaScript?

So then, HTML is the markup language, CSS is the design language, and JavaScript is the programming language.
Consider these actions in your daily life if you don't know what programming is:
When you detect danger, you flee. You eat when you are hungry. When you're tired, you sleep. When you are cold, you seek warmth. When dealing with a busy street, you calculate the distance between you and the vehicles ahead of you.
When something happens, your brain reacts. An entire web page or individual elements can be programmed to react and act in a certain way when certain things happen.
You can program actions, conditions, calculations, network requests, and different kinds of tasks.
Any element can be accessed through the Document Object Model API (DOM), and you can change it however you like.
The Document Object Model represents pages as trees.

We can access elements on our web page with javascript methods because of the DOM.

let firstNr = document.getElementById("firstNumber");
let secondNr = document.getElementById("secondNumber");
let sumElementDisplay = document.getElementById("sum");
let btn = document.getElementById("btn");

JavaScript allows you to make your webpage more dynamic.
As you might remember from our example HTML page, I mentioned adding the two numbers you see on the page and then displaying the result. After you click the button, it automatically calculates.
You can do calculations with JavaScript like this:

let sum = firstNr.value + secondNr.value;

Do you remember HTML attributes and their uses? Look at this code.

let firstNr = document.getElementById("firstNumber");
let secondNr = document.getElementById("secondNumber");
let sumElementDisplay = document.getElementById("sum");
let btn = document.getElementById("btn");

function displaySum(){
  let ourSum =  Number(firstNr.value) + Number(secondNr.value);
  sumElementDisplay.textContent = ourSum;
}

btn.addEventListener("click",displaySum)

You can think of displaySum as a function that gets two items from the web page, converts them into numbers (with the Number method), adds them up, and passes them into another element as inner values.
In our JavaScript, we were able to access these elements since we assigned them unique attributes to help us identify them.

Hence:

  <div id="calc">
    <input id="firstNumber" type="text">
    <p>+</p>
    <input id="secondNumber" type="text">
    <hr>
    <p id="sum"></p>
   <button id="btn">calc</button>
  </div>

Lastly, once you click the button, you'll see the sum of the numbers on the newly rendered page:

Putting HTML, CSS, and Javascript Together

These three languages work together for formatting, designing, and programming the web.

Then, when you link web pages together with hyperlinks, along with their assets, like images, videos, and so on, on the server, it gets rendered as a website.

Users see what's being displayed on the front end and can interact with it.
The back end of the website is where sensitive data, like passwords, are stored. Basically, it's the part of the website that's only available on the server. The user can't see or get to it right away.

Final thoughts

Sites are made with HTML, CSS, and JavaScript.
We use JavaScript for coding, HTML for structuring, and CSS for designing and layout of the site.
Nowadays, CSS isn't just a design language. You can actually use it to create animations.

Plus, you can do some basic programming with it. Media queries are a good example of this, where you define different styles for different kinds of screens (resolutions).

And JavaScript has grown past just being a tool in the browser. Node.js lets us use it on the server.
However, HTML, CSS, and JavaScript are still the most common languages.
There you go. Simple. I hope you learned something from this. And if you have any questions, comment down below.

Blog

A Not so comprehensive webdev guide by Heritier: looking at HTML, CSS, and javascript

Heritier Akilimali

Join Our Newsletter. No Spam, Only the good stuff.

Related