HTML, CSS, & JavaScript

The building blocks to your software engineering career

"Programming isn't about what you know; it's about what you can figure out.” - Chris Pine

In this post, we will break down the absolute fundamentals of software engineering - HTML, CSS, and JavaScript.

HTML:

First, we’ll go over HTML and show examples of how it is used throughout a website.

HTML stands for Hypertext Markup Language and it defines the structure of web pages.

You can think of HTML as the skeleton of your website.

HTML is one of the most basic building blocks of every website, so it is crucial for your development as a software engineer.

Using HTML, you can create all sorts of structures such as headings, ordered and unordered lists, embedding images or videos, inserting links, tables, and much more

For example, here is a screenshot of a quick website that I built using strictly HTML.

You can see how by utilizing HTML structures, I am able to format a potential website and show how it would look on the internet!

Below, is the actual code that I used:

Although I was able to format this website, it alone is not enough to make a web page look good or be interactive. 

So I’ll use assisted technologies such as CSS and JavaScript to make the HTML styled and interactive.

CSS:

With CSS (Cascading Style Sheet), you can design your website exactly how you envision it!

For example, here is a screenshot of the website I showed before with CSS styling.

Now I changed the font, was able to change the background of the list and was able to move the position of the bottom paragraph to the right!

Below, is the actual code that I used:

If you have found this post valuable so far, you can buy me a coffee at the link right below - all support is greatly appreciated🙌🏻

JavaScript:

It is said that Javascript runs roughly 90% of the internet, so it is absolutely vital that it is one of your tools in your software engineering toolkit.

JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications.

You can code a ton of different projects with pure vanilla JavaScript 

for example, here is a project I coded a calculator utilizing HTML, CSS, and Javascript to enable the application to perform the requested math expressions!

You can view a full demo of this calculator app here.

Later on, I will go over the inner workings of JavaScript, but going over the actual code that went behind making this application responsive would be outside of the scope of this blog.

At a high-level remember that JavaScript creates dynamic and interactive web pages and mobile applications.

Closing thoughts:

I covered the absolute basics of each of these languages and this is really just the tip of the iceberg.

HTML, CSS, and Javascript are the absolute fundamentals for every software engineer, so take the time to thoroughly understand the design patterns of each language.