In website development, you’ll typically be dealing with three main programming languages: HTML, CSS and JavaScript. Of course, there are many more than that, but these are the three basics at the core of any site.
1. HTML
HTML stands for “HyperText Markup Language,” and it’s the building block of the web. It’s a markup language that allows you to create and structure all the pages of your site. For instance, it allows you to insert certain elements, such as headers, paragraphs and columns, in whatever layout you want.
There are a few basic pieces of code every HTML document has to have—then the rest of the coding is up to you based on what you want your site to look like. At the top of a document, you’ll want to include . This signifies to a browser that the website is coded in HTML. Other essential codes include,and.
To get a better idea of what the HTML would look like for a simple one-page web page, here’s a code snippet.
This webpage would render very plainly, with a generic white background and black text, as that’s the default styling. To make it prettier, you need CSS.
2. CSS
CSS stands for “cascading style sheets.” It’s a language that lets you set a design framework for your entire website (or sites) in one master style sheet. In this sheet, you’ll assign each HTML element with particular attributes. For instance, you can control the background size, font color, color, padding and more.
Let’s consider an example. Say you wanted to make every H2 header on your site have a red background, white font, bolded text and size 14-point font. You would insert a code that looks like this into your style sheet:
The selector you’re assigning attributes to always comes first in the code. Then, it’s followed by curly brackets. Inside these are the declarations you want to make, each with a corresponding value set off by a colon. Each one is then separated by a semicolon.
Typically, a style sheet will have many of these rules—ideally, one for each element of your site.
3. JavaScript
HTML is the building block of a site while CSS styles it. So, where does JavaScript come into play? It’s a language that’s adept at making calculations and manipulating both HTML and CSS code depending on certain variables. This results in more interactive and dynamic features on a webpage, such as interactive buttons, form validation, dropdown menus and image sliders.
All JavaScript code goes directly into an HTML file and starts with the tag to indicate the sequence is complete.
Functions are key to JavaScript. These are bits of code that you assign a name to. Then, whenever you use that function name in the rest of your code, it pulls in the saved code automatically so that you don’t have to retype it over and over.
If this all sounds a bit confusing to you, that’s because it is. JavaScript can be more complicated as compared to HTML and CSS as it has more advanced functions that at times can be difficult to code. But here’s a very easy example of JavaScript code and HTML that pops new text onto the page when you click on a button.