back to blog

HTML, CSS, and Javascript 101

Ever wondered how those tech-wizards do their trickery?

You’ve been browsing the web, hopping from one site to another, admiring the sleek designs, cool animations, and interactive features. You might have asked yourself:

How do they make all this happen?

Well, sit back, relax, and get ready for a fun ride through the magic of HTML, CSS, and JavaScript—the three building blocks that power the entire worldwide web.

Take a deep breath

To someone who's never coded before, the concept of building a website can seem really intimidating—and that's totally normal. You’re diving into a world where there’s so much to learn: strange symbols, cryptic words, and mysterious code. It can feel like trying to read a new language, and to be honest, it kind of is.

Learning HTML, CSS, and JavaScript takes time and patience. You’ll spend a lot of your initial hours scratching your head, Googling things (trust me, even seasoned coders do this daily), and wrestling with bugs. But here's the key: that's okay :D

Just like any new skill, it’s a process. Remember the first time you tried to ride a bike or bake a cake? The first attempts probably didn’t go super smoothly either, but with practice, it became second nature. The same goes for coding—you have to give yourself time to learn. So grab a drink, eat something, and buckle your seatbelt.

What is HTML

HTML stands for HyperText Markup Language, and it's like the skeleton of a web page. It provides structure to your content and tells the browser how to display it. The key to HTML is its tags—those little pieces of code that tell the browser what each part of the content is supposed to do and where each part goes.

HTML is at the core of every web page. No matter how advanced or complex a website or web app might seem, they all revolve around HTML. It's an essential thing to master for any web developer. But don't worry—it's surprisingly easy to learn!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>This is a Title</title>
</head>
<body>
    <h1>This is a heading 1 in HTML!</h1>
    <p>This is a paragraph in HTML!</p>
</body>
</html>

Let's break it down

See? The syntax within HTML is rather simple and readable, and you'll start recognizing patterns in no time. As you delve deeper, you’ll encounter more elements to experiment with, such as:

There's so much more to explore, don't rush. With each new element you learn, you're building a bigger toolbox for creating amazing things online.

CSS is awesome

Alright, now that you've got a handle on HTML, let's move to the more exciting part—CSS.

CSS stands for Cascading Style Sheets, and it's used to control the presentation, layout, and design of your web page. While HTML is responsible for the structure of a page, CSS is responsible for how it looks.

Think of CSS as the designer that gives life to the skeleton (HTML). It determines things like colors, fonts, layout, spacing, and positioning.

How to add CSS

CSS works by targeting either a class, id, attribute, or an element as a whole and applying styles to them. Let’s break this down further so you can really understand the versatility and power of CSS when it comes to making a web page look polished and professional.

Targeting elements

When you target an HTML element directly, like a heading (<h1>), a paragraph (<p>), or even a button (<button>), you’re applying styles to all instances of that element on the page.

p {
  color: darkblue;
  font-size: 18px;
  line-height: 1.6;
}

This will give every paragraph a dark blue color, 18px font size, and some extra space between the lines of text.

Pro tip: You can also target more than one element by separating them with commas.

h1, h2, p {
  font-family: 'Helvetica', sans-serif;
}

Targeting classes

Classes are one of the most powerful tools in your CSS toolkit. A class allows you to apply a specific style to a group of elements, regardless of their type. You create a class in HTML using the class attribute and style it in CSS with a period (.) before the class name.

<p class="hello-world">Hello, World!</p>
<p>Also hello, World!</p>

In the CSS, you define them like the code below.

.hello-world {
  color: orange;
  font-weight: bold;
  background-color: #f9f9f9;
}

From the example above, only the first <p> element is styled.

Classes are super flexible because you can apply them to as many elements as you like, even if they’re completely different types of elements.

Targeting attributes

Sometimes you need to get really specific with how you style elements based on their attributes. For example, let’s say you have a form with a lot of buttons and you want the one that submits the form to have a different style from the rest of the buttons.

input[type="submit"] {
  background-color: green;
  color: white;
}

Combining CSS selectors

One of the coolest features of CSS is how you can combine selectors to apply styles in really specific ways. For instance, let’s say you want to style paragraphs inside a particular div, but not the ones outside.

div.container p {
  color: purple;
}

This only targets paragraphs (<p>) that are inside a div with the class container. It’s a great way to avoid over-applying styles when you need to be selective about which elements get which design.

Make it interactive

Want your website to feel dynamic and responsive to users’ actions? Enter pseudo-classes and pseudo-elements. These special selectors allow you to apply styles based on the state of an element or target specific parts of an element.

button:hover {
  background-color: gold;
}

li:nth-child(2) {
  color: red;
}

h1::before {
  content: "🌟";
  color: yellow;
}

Make it responsive

In today’s world, your site isn’t just going to be viewed on a desktop—it’ll show up on smartphones, tablets, and everything in between. This is where responsive design comes in. With CSS, you can use media queries to adapt your site’s layout based on the screen size or device type.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

CSS gives you the keys to unlock the full visual potential of your web page. By targeting elements, classes, IDs, and attributes, you can create detailed, polished layouts. Experimenting with pseudo-classes and responsive design will take your site to the next level, making it interactive and accessible across all devices.

Finally, Javascript

JavaScript is a powerful, logic-driven programming language that enables websites to interact with users and respond dynamically to their actions. You’ll often see JavaScript used to create things like pop-up confirmation boxes, trigger calls-to-action, or even update content on the page without needing to refresh it.

At its core, JavaScript allows you to control how elements behave. You can show or hide elements, change text, update images, or even trigger animations based on what users do. Think about the last time you clicked a button and saw a menu expand, or when you hovered over an image, and it somehow changed.

Event listeners

One of JavaScript’s superpowers is its ability to respond to user actions using event listeners. These listeners “listen” for a specific action, like a click or a keypress, and then trigger a piece of code when that action happens.

<button id="changeColorButton">Change Background Color</button>

<script>
  document.getElementById("changeColorButton").addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
  });
</script>

Manipulate the DOM

The Document Object Model (DOM) is essentially the structure of your webpage, and JavaScript lets you manipulate it in real-time. Imagine having the ability to change any part of the webpage, from the text in a paragraph to the styles of individual elements – all based on user interaction.

<p id="welcomeText">Welcome to my website!</p>
<button id="changeTextButton">Change Text</button>

<script>
  document.getElementById("changeTextButton").addEventListener("click", function() {
    document.getElementById("welcomeText").innerHTML = "Thanks for visiting!";
  });
</script>

When the button is clicked, JavaScript grabs the element with the ID welcomeText and changes its inner HTML to say "Thanks for visiting!" This is what we call DOM manipulation.

Variables and logic

JavaScript wouldn’t be much of a programming language without variables and logic. You can store values in variables (like user input or page data) and then use conditional logic (if-else statements) to control what happens under different circumstances.

<input type="text" id="username" placeholder="Enter your name">
<button id="greetButton">Greet Me!</button>
<p id="greetingText"></p>

<script>
  document.getElementById("greetButton").addEventListener("click", function() {
    let name = document.getElementById("username").value;
    if (name) {
      document.getElementById("greetingText").innerHTML = "Hello, " + name + "!";
    } else {
      document.getElementById("greetingText").innerHTML = "Please enter your name.";
    }
  });
</script>

In this case, when the user clicks the button, the script checks if they’ve entered a name. If they have, it displays a personalized greeting; if they haven’t, it prompts them to enter their name. This is where Javascript really shines—allowing you to make decisions and craft responses based on what users do.

The dynamic trio

Together, HTML, CSS, and JavaScript form the core of web development. Each has its unique role, but when combined, they bring your web pages to life.

Mastering these three technologies is like holding the keys to your very own web-creation toolkit. Start small, practice often, and before you know it, you’ll be crafting interactive, stylish, and fully functional websites.

Web development frameworks

As you dive deeper into web development, you might encounter web development frameworks—powerful tools that can significantly enhance your coding experience. Here’s why they’re a game-changer.

As you become comfortable with HTML, CSS, and JavaScript, exploring frameworks like React, Vue, Laravel, or Angular can elevate your web development skills to the next level.

Last updated on 8/10/24