A designer
with an eye for creating
aesthetically pleasing and intuitive
user interfaces and exemplary
user experiences

Kia ora! 👋🏽

Most people clearly understand HTML, CSS and JavaScript, and I’m sure many of you know that these three together form the base of any website. But have you, as an IT person ever found it hard to explain what each these means to your family, loved ones or friends who aren’t very tech savvy? Fear no more! This article’s got you covered.

Today we will be likening a website to a car. So strap yourself as we dive into HTML, CSS and JavaScript.

HTML

We all know HTML stands for HyperText Markup Language! To both, tech savvy and non-tech savvy people, this is a language, and it’s CORRECT!

You as an IT person however, know even more about HTML, but you might have trouble explaining it to others. So here’s a simple way to go about it.

Now I for one love cars, and I am particularly fond of the Audi R8. Having said this, I would never look at an R8 if it looked like in the image below.

So similar to the skeleton of a car acting as its base, HTML is the base, the foundation, or simply the skeleton of a website.

So there you go! HTML is simply the backbone or structure.

CSS

CSS simply stands for Cascading StyleSheet. The words are self-explanatory; CSS is used for adding styles to the base in a cascading, or top-to-bottom hierarchy.

Getting back to our super awesome Audi R8 example, CSS can be associated directly to the door panels, the wheels, the wipers, the paint colour, the headlights and rear lights, and more… just everything that makes the car look stunning! 🤩

THIS is what I mean by the above paragraph:

TADAA!! Pretty darn sexy ain’t it? 😍 It’s the exact same feeling that anyone gets when you’ve combined CSS, with your base, or in the case of websites, your HTML.

So now your website looks fab, but you can go even further and really make your website stand out!

JavaScript (JS)

If there’s anything that can take the bling in your website to the next level; it’ll be JavaScript. Now JavaScript or JS is used to add functionality.

If we take a look at our super-duper Audi R8, it looks fantastic! However, if the Audi can’t do anything, we’d still not tend to buy it, right? I mean, the sole purpose OF A CAR is act as a method of transporting someone from point A to point B, isn’t it? If it can’t do just that, then what’s the point of owning a car?

That’s where JS comes in, or in the case of the Audi, the engine and its wiring happens. The engine IS after all the soul of the car. Without the engine in the Audi R8, it will never roar as it should.

Switching the tail lights, wipers, engine, entertainment on/off are some of the functions in an Audi R8. This is achieved by wiring up the car to do these tasks.

Similarly, JavaScript or JS is used to add functionality to websites. When combined with HTML and CSS, JavaScript makes your website magical. Some examples of using JS in a website can be to navigate between the pages in your website or validate any inputs, etc.

Conclusion

So the next time you want to explain HTML, CSS and JavaScript to a non-tech savvy person, think of YOUR favourite car. Use that to tell your story in an easy way to comprehend.

Ngā mihi. 👋🏽