A Beginner’s Guide – Forbes Advisor

May 23, 2024

18 2 minutes read

Untitled design6 — Website Development.jpg

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 website. For example, it allows you to insert certain elements, such as headers, paragraphs and even columns, in whatever layout you’d like.

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 <!DOCTYPE html>. This signifies to a browser that the website is coded in HTML. Other essential codes include <html>, <head> and <body>.

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 design parameters for your entire site (or sites) in one master style sheet. In this sheet, you’ll assign each HTML element with specific attributes. For example, you can control the background color, size, font 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 dynamic and interactive features on a webpage, such as form validation, interactive buttons, image sliders and dropdown menus.

All JavaScript code goes directly into an HTML file and starts with the <script> tag. Once you’re finished coding, you’ll close off the code with the </script> 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, that’s because it is. JavaScript can be more complicated than HTML and CSS as it has more advanced functions that can sometimes be difficult to code. But here’s a very simple example of HTML and JavaScript code that pops new text onto the page when you click a button.