Skip to content
Shop

CommunityJoin Our PatreonDonate

Sponsored Ads

Sponsored Ads

HTML, CSS, Javascript

You will learn how websites work.

The Foundations of Web Development: HTML, CSS, and JavaScript

When it comes to building websites, three core technologies form the foundation of web development: HTML, CSS, and JavaScript. Each plays a crucial role in creating dynamic, interactive, and visually appealing web pages. In this blog post, we will explore these technologies, explain their roles, and provide simple examples to help you get started.

HTML: The Structure

HTML (HyperText Markup Language) is the backbone of any web page. It defines the structure and content of a web page using elements like headings, paragraphs, links, images, and more.

Key Features of HTML:

  • Elements and Tags: HTML uses tags (e.g., <p>, <a>, <img>) to create elements that structure the content.
  • Attributes: Tags can have attributes that provide additional information (e.g., <a href="https://example.com">).

Example of HTML:

Here’s a basic HTML document structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://example.com">Visit Example.com</a>
</body>
</html>

In this example:

  • <h1> defines a heading.
  • <p> defines a paragraph.
  • <a> defines a hyperlink.

While these three are the core building blocks, modern websites often incorporate additional elements:

  • Images and Videos: Enhance the visual appeal and provide additional information.
  • Fonts: Add variety and enhance visual hierarchy.
  • Frameworks and Libraries: Pre-written code that simplifies development and adds functionality.

Semantic and Non Semantic Elements

Semantic

html
<div></div>
html
<main></main>
html
<section></section>

Non Semantic

html
<p>Paragraph</p>
html
<b>Bold</b>
html
<nav>Navigation</nav>
html
<aside>Sidebar</aside>
html
<footer>Footer Text</footer>
html
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>
html
<ol>
    </li>First</li>
    </li>Second</li>
    </li>Third</li>
</ol>
html
<select>
    <option>1</option>
</select>
html
<button>Press Me</button>

Attributes

Attributes can be added to elements to adjust their behavior or functionality.

html
<html>
    <head>
        <title>Welcome</title>
        <link rel='stylesheet' href='style.css'>
        <script src='script.js'></script>
    </head>
    <body>
        <input id="personal-phone" class="phone-number" value="1234567890" type="tel"/>
        <button onclick="alert('Hello')">Call Me</button>
    </body>
</html>
javascript

CSS: The Style

CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It allows you to apply styles like colors, fonts, spacing, and positioning to HTML elements.

Key Features of CSS:

  • Selectors: Select elements to apply styles to (e.g., h1, .class, #id).
  • Properties and Values: Define styles using properties (e.g., color, font-size) and their values (e.g., red, 16px).

Example of CSS:

Here’s an example of CSS to style the HTML from above:

css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 20px;
}

h1 {
    color: #333;
}

p {
    color: #666;
    font-size: 14px;
}

a {
    color: #0066cc;
    text-decoration: none;
}

In this example:

  • The body selector styles the entire page with a font, background color, and margin.
  • The h1 selector changes the color of the heading.
  • The p selector adjusts the color and font size of paragraphs.
  • The a selector changes the color of links and removes the underline.

JavaScript: The Interactivity

JavaScript is a programming language that adds interactivity and dynamic behavior to web pages. It allows you to manipulate HTML and CSS, respond to user actions, and create complex web applications.

Key Features of JavaScript:

  • DOM Manipulation: Change the content and style of HTML elements.
  • Event Handling: Respond to user actions like clicks and keyboard inputs.
  • Logic and Computation: Perform calculations, make decisions, and control the flow of a program.

Example of JavaScript:

Here’s a simple example of JavaScript to add interactivity:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        #message {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Click the Button!</h1>
    <button onclick="displayMessage()">Click Me</button>
    <p id="message"></p>

    <script>
        function displayMessage() {
            document.getElementById('message').innerText = 'Hello, world!';
        }
    </script>
</body>
</html>

In this example:

  • An HTML button is created with an onclick attribute that calls the displayMessage function when clicked.
  • The displayMessage function uses JavaScript to change the text of the paragraph with the ID message.

Add two numbers together when a button is clicked

html
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <button onclick="add(3,4)">My CSS will make me blue</button>
        <script src="script.js"></script>
    </body>
</html>
javascript
function add(a,b){
    console.log(a+b)
}
css
button{
    background-color: blue;
    padding: 10px 10px;
    border-radius: 2rem
}

You can also include HTML, CSS and JavaScript in the same HTML file

html
<html>
    <h1 id="heading">Hello World</h1>

    <p>Click the button below to change the size and color of the heading</p>
    
    <button onclick="changeColor()"> Change Color </button>

    <style>
        h1{
            color:red;
            font-size: 64px
        }
    </style>

    <script>
        function changeColor(){
            const heading = document.getElementById('heading')
            heading.style.color = 'green'
            heading.style.fontSize = 120
        }
    </script>
</html>

Modern websites often incorporate additional elements:

  • Images and Videos: Enhance the visual appeal and provide additional information.
  • Fonts: Add variety and enhance visual hierarchy.
  • Frameworks and Libraries: Pre-written code that simplifies development and adds functionality.

You can also include HTML, CSS and JavaScript in the same HTML file

html
<html>
    <h1 id="heading">Hello World</h1>

    <p>Click the button below to change the size and color of the heading</p>
    
    <button onclick="changeColor()"> Change Color </button>

    <style>
        h1{
            color:red;
            font-size: 64px
        }
    </style>

    <script>
        function changeColor(){
            const heading = document.getElementById('heading')
            heading.style.color = 'green'
            heading.style.fontSize = 120
        }
    </script>
</html>

In a Nutshell

Here’s how HTML, CSS, and JavaScript work together:

  1. HTML provides the structure of the page.
  2. CSS styles the page to make it visually appealing.
  3. JavaScript adds interactivity to respond to user actions.

By combining these technologies, you can create dynamic and engaging web pages that provide a rich user experience.

Resources