Web Design 101: How HTML, CSS, and JavaScript Work

shape
shape
shape
shape
shape
shape
shape
shape
Web Design 101 How HTML

Web Design 101: How HTML, CSS, and JavaScript Work: Ever wondered how computer programming works, but haven’t done anything more complicated on the web than upload a photo to Facebook?

Then you’re in the right place.

To someone who’s never coded before, the concept of creating a website from scratch — layout, design, and all — can seem really intimidating. You might be picturing Harvard students from the movie, The Social Network, sitting at their computers with gigantic headphones on and hammering out code, and think to yourself, ‘I could never do that.’

Actually, you can.

Anyone can learn to code, just like anyone can learn a new language. In fact, programming is kind of like speaking a foreign language — which is exactly why they’re called programming languages. Each one has its own rules and syntax that need to be learned step by step. Those rules are ways to tell your computer what to do. More specifically, in web programming, they’re ways of telling your browsers what to do.

The goal of this post is to, in plain English, teach you with the basics of HTML, CSS, and one of the most common programming languages, JavaScript. But before we begin, let’s get an idea of what programming languages actually are.

What Is a Programming Language?

Programming, or coding, is like solving a puzzle. Consider a human language, like English or French. We use these languages to turn thoughts and ideas into actions and behavior. In programming, the goal of the puzzle is exactly the same — you’re just driving different kinds of behavior, and the source of that behavior isn’t a human. It’s a computer.

A programming language is our way of communicating with software. The people who use programming languages are often called programmers or developers. The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page move if the human user takes a certain action.

Programming in Web Development

So, when a web designer is given an end goal like “create a webpage that has this header, this font, these colors, these pictures, and an animated unicorn walking across the screen when users click on this button,” the web designer’s job is to take that big idea and break it apart into tiny pieces, and then translate these pieces into instructions that the computer can understand — including putting all these instructions in the correct order or syntax.

Read more: How to Hire a Freelance Web Developer(Opens in a new browser tab)

Every page on the web that you visit is built using a sequence of separate instructions, one after another. Your browser (Chrome, Firefox, Safari, and so on) is a big actor in translating code into something we can see on our screens and even interact with. It can be easy to forget that code without a browser is just a text file — it’s when you put that text file into a browser that the magic happens. When you open a web page, your browser fetches the HTML and other programming languages involved and interprets it.

HTML and CSS are actually not technically programming languages; they’re just page structure and style information. But before moving on to JavaScript and other true languages, you need to know the basics of HTML and CSS, as they are on the front end of every web page and application.

In the very early 1990s, HTML was the only language available on the web. Web developers had to painstakingly code static sites, page by page. A lot’s changed since then: Now there are many computer programming languages available.

In this post, I’ll talk about HTML, CSS, and one of the most common programming languages: JavaScript.

Web Design 101: How HTML, CSS, and JavaScript Work

HTML, CSS, & JavaScript: A Tutorial

An overview:

  • HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
  • CSS is used to control presentation, formatting, and layout.
  • JavaScript is used to control the behavior of different elements.

Now, let’s go over each one individually to help you understand the roles each plays on a website and then we’ll cover how they fit together. Let’s start with good owl’ HTML.

HTML

HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It’s an essential skill for any web professional. It’s the starting point for anyone learning how to create content for the web. And, luckily for us, it’s surprisingly easy to learn.

How does HTML work?

HTML stands for Hypertext Markup Language. “Markup language” means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage.

Let me show you what I mean. Take a look at the article below. If I were to ask you to label the types of content on the page, you’d probably do pretty well: There’s the header at the top, then a sub header below it, the body text, and some images at the bottom followed by a few more bits of text.

Markup languages work in the same way as you just did when you labeled those content types, except they use code to do it — specifically, they use HTML tags, also known as “elements.” These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.

Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is “wrapped” in, i.e. surrounded by, HTML tags.

Read more: How to Hire a Freelance Web Developer(Opens in a new browser tab)

CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page.

HTML vs CSS

HTML provides the raw tools needed to structure content on a website. CSS, on the other hand, helps to style this content so it appears to the user the way it was intended to be seen. These languages are kept separate to ensure websites are built correctly before they’re reformatted.

Whereas HTML was the basic structure of your website, CSS is what gives your entire website its style. Those slick colors, interesting fonts, and background images? All thanks to CSS. This language affects the entire mood and tone of a web page, making it an incredibly powerful tool — and an important skill for web developers to learn. It’s also what allows websites to adapt to different screen sizes and device types.

To show you what CSS does to a website, look at the following two screenshots. The first screenshot is my colleague’s blog post, but shown in Basic HTML, and the second screenshot is that same blog post with HTML and CSS.

JavaScript

JavaScript is a more complicated language than HTML or CSS, and it wasn’t released in beta form until 1995. Nowadays, JavaScript is supported by all modern web browsers and is used on almost every site on the web for more powerful and complex functionality.

What is JavaScript used for?

JavaScript is a logic-based programming language that can be used to modify website content and make it behave in different ways in response to a user’s actions. Common uses for JavaScript include confirmation boxes, calls-to-action, and adding new identities to existing information.

In short, JavaScript is a programming language that lets web developers design interactive sites. Most of the dynamic behavior you’ll see on a web page is thanks to JavaScript, which augments a browser’s default controls and behaviors.

Facebook | Instagram | LinkedIn

Our Email: info@MrGeek.pk
Our Contact: +923214811842

Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat
How may I help you?