Introduction to Web

You probably already know what a webpage is... when you type a URL and press enter, a bunch of content shows up. That's a webpage. But how is a webpage made?

A Web page is code written in JavaScript, HTML, and CSS. Let's think about that code like a document written in a foreign language. If you were looking at a document written in German, you wouldn't know what it said in English... just like when you look at a page of HTML/CSS/JS you won't really know what the web page is going to look like. (Look at the picture of HTML below -- do you have any idea what that will turn into? Probably not!)

Picture

Luckily, just like you can use Google Translate to input a foreign language and get english in return, a browser takes the document full of code and turns it into the kind of webpage you're used to seeing.

The code above is actually the code for the New York Times website. Not even a professional programmer could have figured that out just by looking that that snippet of code -- that's what we have browsers for.

So what are HTML, CSS, and JavaScript?

HTML, CSS, and JS are three different coding languages that do different things. They are the three, and only three, different programming languages that our browser knows how to turn into a web page. Most web pages that you see online use all three of them. Let's break it down:

HTML

HTML is everything on the page that you see, including words, images, links, and embedded content. The following page uses only HTML:

CSS

CSS controls how the HTML looks by changing the fonts, the text or background color, the alignment, etc. Here is the same webpage as before with CSS to make it prettier:

Did you notice anything different? (Hint: background color, content was centered, text color, font.) All of these changes were done using CSS.

JavaScript

JavaScript makes things happen. A webpage will remain exactly the same unless you use JavaScript. JavaScript also allows the user to interact with the webpage, by allowing you to trigger events. Here is the same page that has JS added:

Do you see how the background of the page is changing colors? That wouldn't be possible without JavaScript, because HTML/CSS can't change on their own. Also, did you try clicking on the icon? The title changes size because we told it in JavaScript that if the picture was clicked the title should grow.

How do you start coding?At this point you have a pretty good idea of how the web works and the differences between HTML, CSS, and JavaScript. Now, let's start coding in HTML.