In Coding 101

At Savvy Coders, we believe two things:  that everyone deserves a chance, and that anyone can learn to code. Unfortunately, many people become discouraged from taking that first step by the sheer intimidation that a wall of code presents. It’s a fair concern.

With that in mind, we’re presenting Coding 101: short, simple guides through core concepts behind programming. These are meant to give you a grasp on what coding is, to help slice through that intimidation blocking you from starting your coding journey.
If you’re looking to learn the fundamentals, come by one of our free Class Previews!


If you’ve followed Savvy Coders, you’ve likely seen us mention the combination of HTML, CSS, & Javascript quite a bit.

Why do we focus so much on these languages, and how do they work together?
It may be easiest to think of it as answering three questions:

HTML

What is its structure?

CSS

What’s it look like?

JavaScript

What does it do?

Looking here at the HTML, you can see the basics of what makes up this page: an area in which we write “Hello World!”, and a button stating “Click me for a hello!”

In the CSS, you can see where we’ve given rules on how to style these parts.  Our body’s background is blue, the “Hello World!” is white and 20 pixels tall.

In Javascript, you’ll see instructions regarding what’s going on: there’s an alert stating “hello!”, on the second line, as well as mention of our button.
It’s a bit more intimidating to see at first, but you can still see hints of these instructions:

“If someone presses the button, create a pop-up displaying the word, ‘hello!'”

Now let’s check out the Result tab below, to see what all of this code produces together!

CSS, HTML, & Javascript working together is as simple as that!

At this point, you may be asking yourself how the code itself is written. We now know what role each language plays, but how are they written?

Next time on Coding 101, we’ll take a closer look at the syntax – or the writing format – of each language. See you then!