HackerYou College of Technology Red Square LogoHackerYou College of Technology Red Square Logo
HackerYou College of Technology Wordmark

What is Coding? HTML, CSS, & JavaScript Explained

Blog and News_

< Back to Blog

What is Coding? HTML, CSS, & JavaScript Explained

< Back to Blog

So you’re thinking about learning to code, but before you invest in a course or workshop, you need to understand what coding even means.

Most people hear the word code and think of a dark basement with blacked out windows and a person hunched over a keyboard, surrounded by a bunch of monitors. While this certainly is what coding looks like for some people, in most cases this is just a stereotype. TV shows and movies feature edgy hackers hunkered in seedy rooms illegally stealing information, or young tech cops typing furiously on the keyboard to find out a person’s background, their location and who they murdered all within five seconds. This is what most people picture when they hear the word coder but in reality - coding is so much more.

At HackerYou, teaching people to code is our priority, and making sure they have fun doing it is our goal. And we promise - there aren't any basements involved. In fact, HackerYou is in a bright, open space in the heart of Toronto. So now that we've exposed the stereotypes, let’s talk about what coding really is.


What is Coding?

Coding in general is the practice of writing instructions in a language that a computer can understand. There are many different coding languages available, depending on what you want the computer to do and for what purpose. Just like English, French, and Russian are languages people use to communicate all around the world, HTML, CSS, and JavaScript are languages of the web.

When someone is writing code, they are writing it in a particular language, with the goal of creating a website or application that serves a certain purpose. There are simple websites that have been created with just HTML and CSS to serve basic purposes like showing off someone’s portfolio or sharing their personal blog. But, there are also complicated sites like Google or Amazon, that compile millions of different pieces of information, and use many more languages to create the functionality that such a powerful applications require.

At HackerYou, we focus on front-end coding languages in particular like HTML, CSS, and JavaScript. These are coding languages that allow a user to create websites that have meaning, are nice looking, and can perform certain functionality like searching, storing information, and returning results.

What is HTML?

HTML, or Hypertext Markup Language, is the front end language that is the foundation of all websites on the internet. If you think about a website like a building, HTML is the structure, like the foundation and the walls. HTML is used to define the content on a website. In a program like Google Docs, things like headings, paragraphs and lists can be input with the click of a button, but then when you copy and paste that content into a different program, maybe Microsoft Word or Notes, that content might look a little different. On the web, we want our content to be the same for everyone no matter what browser they're using, so we separate these different elements from one another using code - a global language that every computer can understand. For example, if I wanted to make the heading of my page ‘Hello World!’ followed by a paragraph of text, I would write it like this:

<h1>Hello World! </h1>
<p>Here is a paragraph of text on my page.</p>

That is HTML, and the code surrounding the text is what the computer needs in order to understand that this is a heading followed by a paragraph. When I visit my website, I would see this.

What is Coding - HTML Only

By default, there are also some styles applied to HTML which you can see in the image above. Headings are larger than paragraph text, there is a bit of room between the content and the edge of the page, and text is black on a white background. But, in most cases, you do not want to use HTML on its own because it’s not styled, so you have no control over how it looks. When you see pages that look like the image above it’s likely that the page has broken and you are seeing HTML on its own without any styling.

What is CSS?

To take the content of a website that we have written using HTML and apply styles to it, we use another language called CSS, or Cascading Style Sheets. If we think back to the house, with HTML being the structure of the house, the CSS is the decoration, like the tiles on the floor and the paint on the walls. Again in a program like Google docs, if you highlighted some text yellow, or made some text bold, when you copied this content and pasted it into another program it might not look the same. That’s why we use CSS, a universal coding language, to ensure that the styles we choose can be seen the same by everyone. For example, if I wanted to make my heading red, and my paragraph bold, I would write it like this:

h1 { color: red; }
p {font-weight: bold;}

That is CSS, and tells the computer that the h1, which we wrote above in HTML, should be red, and that the paragraph we wrote should be bold. Once you add this CSS to the HTML we previously wrote, you would see this when viewing your site.

What is Coding - HTML & CSS

Using CSS you can override and add on to the default styles that are applied to the HTML. With CSS you can do much more than just changing the colour of some text, you can do almost anything you can think of. Things like changing the colour of a background, adjusting the layout of your page, and adding effects to an element when you hover over it are all possible with CSS. When we combine HTML and CSS together (as any good website does) we are able to create beautiful content for users to interact with. In our part-time Web Development courses and our Web Development Immersive Bootcamp, students are required to build websites using HTML and CSS for their first projects. You can check out a demo website built using HTML and CSS by Bootcamp grad Sally Siu here.

Sally Siu Bootcamp PSD Conversion

What is JavaScript?

Once we have a website with HTML content and CSS styles applied to it, the next step is to add JavaScript. Though websites can be complete and beautiful without JavaScript, this language adds another layer of advanced functionality to a website or application. If we think back to the house again, with HTML being the structure of the house, and CSS being the decoration, JavaScript is the function of the house, like the running water and electricity. Though the house can exist on its own without these luxuries, it’s more impressive if it does have these amenities. Similarly, a website can exist and function well with just HTML and CSS, but JavaScript takes it to the next level. Though writing JavaScript is a bit more advanced than HTML and CSS, if I wanted to make it so that my heading was a variable, which I could later change out for something else, I would write it like this:

const greeting = “hello, world!”

That is some simple JavaScript, which would allow us to change out the text of our heading later on, or maybe make it so that every time someone reloads the page, a different greeting loads. In this way, you can see how the page can function on it’s own without JavaScript, but this added coding language allows us to add on more complex functionality. In our part-time JavaScript courses and our Web Development Immersive Bootcamp, students are required to build websites using JavaScript for their projects. You can check out a demo website built using JavaScript by Bootcamp grad David Tran here.

David Tran Animal Matching Project 3

If we were coding a real website, we wouldn’t stop here. We’d use HTML to add on some more content and images, CSS to style the entire page and arrange the layout, and maybe some JavaScript to make the page interactive. Though this was a very simple example, you now have the basic understanding of what coding is! This means you’re ready to move on to something like a Free Web Development Basics Workshop. We offer these workshops at HackerYou on a regular basis to give absolute beginners a taste of coding in a hands-on risk-free classroom environment. In this workshop you'll learn the basics of HTML and CSS, and use that knowledge to build the beautiful website pictured below. If you’re interested in learning more and signing up for a free workshop, click to see a list of upcoming workshop dates.

Free Web Development Basics Workshop