Maybe you're starting out or at least considering embarking on the path of a web designer or developer. Or perhaps you're just curious as to what goes on behind the scenes of the websites you visit.

As you start on your web development or coding journey, you'll find that there are three core technologies you must learn to create websites. These are HTML, CSS, and JavaScript. These three languages are the building blocks of creating just about any site out there.

Once you get a handle on the basics, you can practice and eventually try your hand at other development technologies.

So without further ado, let's dive into it:

HTML: HYPERTEXT MARKUP LANGUAGE

HTML is used to define the structure of a website's content.

"Hypertext" refers to linking pages within or between websites. This is how we have the network of interconnecting resources called the "Web."

"Markup Language" means that as such, HTML uses elements wrapped in tags to present and format the content in certain ways.

For example, if you wanted to write the sentence "This is an example of HTML." and you wanted the HTML part bolded and underlined, the code would look like this:

<p>This is an example of <b><u>HTML.</u></b></p>

And this will be the output:

In this example, the tags are <p>, <u>, and <b>. Respectively, they stand for paragraph, underline, and bold.

There are many other tags and other things such as elements and attributes that make up the HTML syntax. All of your code is put together in what is called an HTML document.

HTML is typically the first of the big three you'll cover, and for good reason. It's the easiest of them to learn, pretty straightforward, and it's good to know how to set up the layout of a site before anything else.

CSS: CASCADING STYLE SHEETS

While HTML is the structure, CSS dictates how the HTML is to be displayed. It helps create the appearance and feel of the site or page. It can also make the content behave in certain ways such as basic animation, transitions, rotations, or how to respond to different viewport sizes.

Let's go back to our previous example. Let's say that I want to make it dark green and change the font size. In CSS this is how it'd look:

 p{
   color: darkgreen;
   font-size: 32px;
}

And this is the result:

While HTML uses tags, CSS uses selectors. In this case, the selector is p{}, indicating that for every paragraph element, the color will be dark green and the font size will be 32 pixels.

The "Cascading" part—without getting into too much detail—means that the origin of the style sheet and rule order determine how the content will be displayed. In the case of rule order for a specific element, the last rule defined for it will take precedence.

Using the same example again, but there was another rule set in place for the paragraph color to be purple:

 p{
   color: darkgreen;
   font-size: 32px;
}

 p{
   color: purple;
   font-size: 32px;
}

This will be the output:

As you can see since purple was the last color declaration, the sentence is now purple.

In the case of stylesheet origin for any site you visit, whatever stylesheet it uses would override your browser's default.

I'm sure you've had the experience of ditching a site simply because it wasn't visually appealing. If you were to write a webpage in just plain ol' HTML, not only would it look seriously outdated—it'd just be boring. An attractive site is part of the user experience, and it needs to leave a good enough first impression to keep visitors around to peruse the site.

CSS is usually the next stop on your developer journey since it has a lot more rules to cover—which makes sense, as there can be many different ways to style a webpage. Once you get the layout and content set up with the HTML, the CSS will have something to style and you can get to the fun stuff-actually dressing your little piece of the Internet up.

JAVASCRIPT(JS)

While HTML provides the structure and CSS the appearance, JavaScript is responsible for the functionality and interactivity of the site. Pretty much all major browsers run JavaScript. Without it, the site or page would just sit there all static, looking pretty—and not do much else.

With JavaScript, you can do some pretty neat things like having different types of media and features such as video, pop-ups, and advanced animations run on the page. You can also add interactive elements such as forms, buttons, and games, as well as store and update data.

For example, though you can make and style forms in HTML and CSS respectively, you'd need JavaScript to actually do anything with any data input for the form.

Aside from interactivity, it's also good for browser security. Since each tab in a browser is a self-contained environment, JS makes it harder for hackers to steal info.

As you can see, JavaScript is a very powerful language that can do (almost) anything you want your site to do.

CONCLUSION

As a recap, HTML provides structure and content for a site, CSS the style, and JavaScript the functionality and interactivity.

There's one more thing to remember: out of all three, JavaScript is the only one that's a programming language. As stated in the name, HTML is a markup language, and CSS is a spreadsheet language. JS is a programming language because that's the one that's used to make the site more dynamic and perform and behave a certain way.

So that's the breakdown of the three main web technologies. Hopefully, this will help you along your journey and develop a little more appreciation for what goes on behind the scenes of the websites you visit.

So tell me! Was this helpful? Do you have any feedback? Please feel free to reach out and let me know!