HTML + CSS + Javascript - the 3 Amigos of the Web. [The Web Explained: Part 1] | HTML + CSS + Javascript - the 3 Amigos of the Web. [The Web Explained: Part 1]

🧱 HTML: The Structure of Your House

Every website you view in a browser (Firefox, Chrome, Edge) is literally served to you as a simple text file. For real. From the smallest of mom-and-pop websites to the largest imaginable infrastructure, the end result at the end of the day is a simple text file delivered to your browser in the language it learned first, HTML, which stands for HyperText Markup Language, and that's only useful to know for trivia night with the guys.

Like any of the languages we're going to cover, HTML is just a set of predefined words and symbols that do special things when read by a browser. It's been a fundamental part of the internet since the first web browser, with a primary purpose of displaying, organizing, and linking to content on the internet.

You seem pretty important, so you probably need a way for the world can hear your incredible insights on that one thing you're really into. You need your very own webpage, and to do that, you'd start with new pal HTML.

Go ahead and dink around with running this...

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World! I have a webpage!</h1>
    <p>I'm really into _____ and you should come back, as I'm going to make this thing awesome.</p>
  </body>
</html>

Whoa, look at all those <> things! Those are HTML Tags, and those are the ways we add structure to our content. The <h1> tag, is like a big, bold headline, whereas the <p> tag is smaller paragraph text. Each tag has an open and a close tag and stuff in the middle. It's like a delicious Oreo, but without all those pesky carbs. HTML is filled with tags like these, and they each serve a different semantic purpose; that is to say they help to organize a document in a way that makes sense for humans, screen readers, and search engines to read in a predictable and hierarchical fashion.

So, to keep with our <h1> tag as an example, there are similar sibling tags <h2> through <h6> — each getting progressively smaller and less important by default. When constructing an HTML page, it's often good to ensure that you're choosing the right tags to build a sensible hierarchy. Doing so gives you a fighting chance of separating your content from your styling (which we'll get to later) and, as stated above, helps to keep things organized for whatever medium is trying to consume your content. After all, on the internet, content is king.

To run an HTML file on your computer, copy the code above, paste it into a text editor (something like Notepad, not Microsoft Word) and save it as whatever.html. Open that file with your favorite web browser, and suddenly you're some kind of freakin' internet shaman, with a website displaying in a real browser.

🧠 Learn More About HTML:
> Code Academy: Learn HTML
> Mozilla: Getting Started With HTML

But how do we make it look better than this crap? Enter CSS...

💅 CSS: It really ties the room together

lebowski

So, HTML describes the content on a page. It's got all the structural elements and some basics like background and font colors, but by itself, it's quite bare when it comes to the pizazz you're used to seeing on the internet. This is where CSS comes along to really tie the room together, like a very tasteful rug that's free of stains from the darn kids who spill all the time...sorry...I digressed there for a moment...anyway...

CSS stands for cascading style sheets, and this is a reference to how you can utilize various rules to overwrite styles for different scenarios. You know when you resize your browser and the same website shifts all around and shrinks or readjusts to fit your now-smaller window? That's CSS at work, and because your browser window is now smaller, some responsive media queries have kicked in and overridden the default styles for the site.

Just like HTML, CSS has its own special way of communicating with the browser. If we wanted to style our website above in the most basic way, we could do something like this:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
        font-size: 30px;
      }

      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello World! I have a webpage!</h1>
    <p>I'm really into _____ and you should come back, as I'm going to make this thing awesome.</p>
  </body>
</html>

With the code above, any <h1> on our site will be red and 30 pixels high, whereas all <p> tags will remain their default size and be blue.

CSS is quite powerful and is not limited to just colors and font sizes. CSS is often used to control the position and size of elements on the screen, various visual states of things like form fields, and how a single HTML page can transform depending on the size of a user's browser window.

Fun fact: Each browser tends to have its own way of interpreting CSS. While this has gotten significantly better in recent years, I should note that this seemingly bespoke handling of CSS has directly contributed to new and whimsical combinations of swear words previously thought impossible. So before you really dive into CSS, make sure the kids have their earmuffs on.

🧠 Learn More About CSS:
Level Up Tutorials: CSS
Code Academy: Learn CSS

After you grasp how to make things look good on your site, you begin to notice that much like your 14-year-old beagle, it doesn't really do anything. If you want your website to have a greater degree of interactivity, you're going to need a third layer added on top. Enter the almighty Javascript...

🎛 Javascript: From Lightswitches to That Fancy Video Doorbell

Javascript (not to be confused with Java) began its complicated journey into the hearts of web developers in 1995 when the Netscape team realized that they needed to give users a way to further interact with webpages in their browser.

Using Javascript, you can respond to a cornucopia of user events like button clicks, form entries, or even mouse movements. Here's a random smattering of things that Javascript make possible:

Showing a count-down timer on the page
Animating a thing when a user scrolls it into view
A page infested with advertisements that cover up your content
Validating that a form isn't blank or that the user has entered a valid email

With that last bullet point in mind, let's add a form to our website so people can sign our guestbook and require people to fill out their name...

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1 {
				color:red;
				font-size:30px;
			}

			p {
				color:blue;
			}
		</style>
  </head>
	<body>
		<h1>Hello World! I have a webpage!</h1>
		<p>
			I'm really into _____ and you should come back,
			as I'm going to make this thing awesome.
		</p>

		<form id="guestbook-form" onsubmit="return validateForm()">
			<input type="text" placeholder="Your Name" id="name"></input>
			<button type="submit">Add your name to the guestbook!</button>
		</form>

		<script>
			function validateForm() {
				var userName = document.getElementById("name");

				if (userName.value === "") {
					alert("Name must be filled out");
					return false;
				}
			}
		</script>
	</body>
</html>

This is probably the point that I should throw up a paywall and make you pay to understand this, because we just dropped some funkiness into your life. Fortunately for you, good people like me exist in the world, and we're gonna decrypt this madness.

We added a few HTML tags to the page to add our <form>, an <input>, and a <button>. When someone clicks the button, which submits the form, we're going to call a Function, which is basically like a little piece of code that sits and waits to execute until we call it, in our case, with the onsubmit event of the form. This simple function gets the text input with an id of name and makes sure that it's not a blank string, alerting the user if it is and returning false to stop the form from submitting.

Javascript is much more powerful when compared to HTML or CSS, and as you can tell, it starts to get a little more complicated. But if you understand the interplay of HTML, CSS, and Javascript, you will be well on your way to creating incredible, engaging, and highly interactive web experiences.

🧠 Learn More About Javascript:
Wes Bos: Javascript 30
Wes Bos: Beginner Javascript

With these 3 foundational technologies, you can make a webpage, give it a nice coat of paint, then mix in some bells and whistles that respond to the whims of your user's mouse and keyboard. Do you feel cool yet, or what?!

Level complete...but you know the princess is in another castle, and the journey continues. So, go outside and get a breath of fresh air because we're going to go deeper down the rabbit hole, and you're going to realize why great engineers are lazy (and this is a good thing)...

Series

Tags

turn off the lights

Series

Tags

turn off the lights

HTML + CSS + Javascript - the 3 Amigos of the Web. [The Web Explained: Part 1]

🧱 HTML: The Structure of Your House

💅 CSS: It really ties the room together

🎛 Javascript: From Lightswitches to That Fancy Video Doorbell

More in this series

Keep going...