Front-End Coding Languages

Front-end languages are what make websites come to life. They control what you see, how it looks, and how it reacts when you click, scroll, or type. The three main front-end coding languages are HTML, CSS, and JavaScript.

HTML (HyperText Markup Language)

HTML is the foundation of every webpage. It provides the structure — like the walls and framework of a house.

HTML (HyperText Markup Language)

HTML uses tags to organize content into headings, paragraphs, images, lists, links, and more. For example, a "h1" makes a headline, and "p" creates a paragraph.

CSS (Cascading Style Sheets)

If HTML builds the walls, CSS paints them. CSS controls the look and layout of a website — things like colors, fonts, spacing, and animations.

CSS (Cascading Style Sheets)

It allows designers to create consistent styles across multiple pages by applying reusable rules. For example, you can use CSS to make all your headings the same color, or to center an image on the screen.

JavaScript (JS)

JavaScript brings everything to life. It’s the programming language that lets your website respond to user actions — like clicking a button, filling out a form, or loading new content without refreshing the page.

JavaScript (JS)

From simple slideshows to interactive games and apps, JavaScript powers the functionality that makes websites feel dynamic and modern.

Together They Build the Web

HTML

				
					<!DOCTYPE html>
<html>
<head>
  <title>The Bee's Knees</title>
</head>
<body>
  <h1>Welcome to The Bee's Knees</h1>
  <p>This page is all about bees, knees, and great design!</p>
  <img decoding="async" src="bee.jpg" alt="A happy bee">
  <h2>Fun Facts</h2>
  <ul>
    <li>Bees can actually recognize human faces.</li>
    <li>Knees are the largest joints in the body.</li>
    <li>Together, they’re unstoppable.</li>
  </ul>
  <p>Thanks for visiting!</p>
</body>
</html>

CSS

				
					body {
  background-color: #fff8dc;
  font-family: Arial, sans-serif;
  color: #333;
}
h1 {
  color: #ffb300;
  text-align: center;
}
ul {
  list-style-type: square;
}
img {
  width: 200px;
  display: block;
  margin: 0 auto;
}
p {
  text-align: center;
}

JavaScript

				
					document.addEventListener("DOMContentLoaded", function() {
  const button = document.createElement("button");
  button.textContent = "Click for a Bee Fact";
  document.body.appendChild(button);

  button.addEventListener("click", function() {
    const facts = [
      "Bees communicate by dancing!",
      "There are over 20,000 species of bees.",
      "Bees can fly about 15 miles per hour."
    ];
    const randomFact = facts[Math.floor(Math.random() * facts.length)];
    alert(randomFact);
  });
});