Enroll Now Student Login
Web Development /Introduction to Web Development / Lesson
Web Development

HTML, CSS and JavaScript: The Core Technologies

📖

Lesson Content

Introduction

Most websites that you interact with every day are built using a combination
of three fundamental technologies:
HTML, CSS and JavaScript.

These technologies have different responsibilities, but they work together
to create complete and interactive web experiences.

A useful way to remember their roles is:

  • HTML provides structure.
  • CSS provides presentation and visual styling.
  • JavaScript provides behavior and interactivity.

1. What Is HTML?

HTML stands for HyperText Markup Language.
It is the standard markup language used to structure content on the web.

HTML tells the browser what different pieces of content represent.
For example, a browser can identify a heading, paragraph, image, link,
button, form or list because HTML provides the appropriate elements.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

The browser reads this structure and uses it to construct the webpage
that the visitor sees.

2. HTML Elements

HTML documents are constructed using elements. Many HTML elements have
an opening tag and a closing tag.

Common examples include:

  • <h1> — main heading
  • <p> — paragraph
  • <a> — hyperlink
  • <img> — image
  • <ul> — unordered list
  • <ol> — ordered list
  • <li> — list item
  • <button> — button
  • <form> — form
  • <input> — input field

3. HTML Attributes

HTML elements can contain attributes that provide additional information
about the element.

For example:

<a href="https://example.com">
    Visit Website
</a>

The href attribute specifies the destination of the link.

Another example is an image:

<img src="photo.jpg" alt="A sample photograph">

Here, src specifies the image location while
alt provides alternative text describing the image.

4. What Is CSS?

CSS stands for Cascading Style Sheets.
CSS controls how HTML content looks and how elements are arranged on the page.

Without CSS, webpages would generally appear much more basic because
the browser would mainly display the document according to its default styles.

CSS can control:

  • Colors
  • Fonts
  • Spacing
  • Widths and heights
  • Borders
  • Backgrounds
  • Layouts
  • Animations
  • Responsive behavior

5. CSS Syntax

A CSS rule normally contains a selector and a group of declarations.

h1 {
    color: blue;
    font-size: 36px;
}

In this example, h1 is the selector.
The color and font-size declarations
control the appearance of the heading.

6. CSS Selectors

CSS selectors determine which HTML elements a style should apply to.

Element Selector

p {
    color: #333;
}

This applies the style to paragraph elements.

Class Selector

.card {
    padding: 20px;
}

A class selector begins with a period.

ID Selector

#header {
    background: black;
}

An ID selector begins with a hash symbol.

7. What Is JavaScript?

JavaScript is a programming language widely used to add
behavior and interactivity to webpages and web applications.

JavaScript can respond to user actions and manipulate the content and
behavior of a webpage.

For example, JavaScript can:

  • Respond to button clicks.
  • Validate forms.
  • Change webpage content.
  • Show or hide elements.
  • Create interactive menus.
  • Display messages.
  • Communicate with APIs.
  • Load information without refreshing the entire page.
  • Control complex application behavior.

8. JavaScript Variables

Variables allow JavaScript programs to store information.

const studentName = "Ade";
let courseProgress = 50;

In this example, studentName stores a name while
courseProgress stores a numerical value.

9. JavaScript Functions

A function is a reusable block of code designed to perform a particular task.

function greetStudent() {
    console.log("Welcome to Dwallnet Academy");
}

greetStudent();

The function can be called whenever the program needs to perform that action.

10. JavaScript Events

An event is something that happens in the browser, such as a user clicking
a button, submitting a form, moving the mouse or pressing a keyboard key.

JavaScript can listen for these events and respond to them.

const button = document.querySelector('#welcome-button');

button.addEventListener('click', function() {
    alert('Welcome to Dwallnet Academy!');
});

11. How HTML, CSS and JavaScript Work Together

HTML, CSS and JavaScript should not be viewed as competing technologies.
They have different responsibilities and are often combined within the same project.

Consider a student dashboard containing a button labelled
“View Course”.

  • HTML creates the button.
  • CSS determines how the button looks.
  • JavaScript determines what happens when the button is clicked.

12. A Simple Combined Example

<!DOCTYPE html>
<html>
<head>

    <style>
        .welcome {
            padding: 20px;
            background: #f2f2f2;
        }

        button {
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>

</head>

<body>

    <div class="welcome">

        <h1>Dwallnet Academy</h1>

        <p id="message">
            Welcome to the academy.
        </p>

        <button id="change-message">
            Change Message
        </button>

    </div>

    <script>

        const button =
            document.querySelector('#change-message');

        button.addEventListener('click', function() {

            document.querySelector('#message').textContent =
                'You are learning Web Development!';

        });

    </script>

</body>
</html>

13. Understanding the Example

The HTML creates the page structure.

The CSS creates the visual appearance of the welcome section and button.

The JavaScript finds the button and listens for a click.
When the click occurs, JavaScript changes the text displayed inside
the paragraph.

This simple example demonstrates the basic relationship between
structure, presentation and behavior.

14. Separation of Responsibilities

A good web development practice is to keep different responsibilities
as organized as possible.

For example, a project can separate its files into:

project/
│
├── index.html
├── css/
│   └── style.css
│
└── js/
    └── script.js

The HTML file provides the document structure, the CSS file handles
presentation, and the JavaScript file handles behavior.

15. Inline, Internal and External CSS

Inline CSS

<p style="color: red;">
    Hello
</p>

Inline CSS is written directly inside an HTML element.

Internal CSS

<style>

p {
    color: red;
}

</style>

Internal CSS is written inside a <style> element,
usually in the HTML document’s head.

External CSS

<link rel="stylesheet" href="css/style.css">

External CSS is stored in a separate stylesheet.
This approach is commonly preferred for larger projects because
the same stylesheet can be reused across multiple pages.

16. Internal and External JavaScript

JavaScript can also be placed directly inside an HTML document or
stored in a separate JavaScript file.

External JavaScript can be connected using:

<script src="js/script.js"></script>

Keeping larger JavaScript programs in separate files can make projects
easier to organize and maintain.

17. Why These Technologies Are Important

HTML, CSS and JavaScript form the foundation of modern frontend development.
Although modern frameworks and libraries provide additional tools,
understanding these fundamentals remains extremely important.

A developer who understands the fundamentals can more easily learn
frameworks, troubleshoot problems and understand how web interfaces work.

18. Real-World Example: Dwallnet Academy

Imagine the Dwallnet Academy student dashboard.

HTML could define the course cards, navigation, lesson lists,
buttons and progress sections.

CSS could control the dashboard layout, colors, typography,
responsive behavior, buttons and visual effects.

JavaScript could control interactive menus, search, tabs,
modal windows, dynamic content and other browser-side interactions.

The backend would then handle server-side operations such as authentication,
database queries, lesson progress and course enrollment.

19. HTML, CSS and JavaScript Are Only Part of the Stack

HTML, CSS and JavaScript are especially important on the frontend,
but complete web applications normally involve additional technologies.

These may include:

  • Backend programming languages
  • Databases
  • APIs
  • Web servers
  • Authentication systems
  • Version control
  • Development frameworks
  • Content management systems

20. The Developer’s Mindset

Learning HTML, CSS and JavaScript is not simply about memorizing tags
and commands. A good developer learns how to break a problem into
smaller parts and determine which technology should handle each part.

For example, when creating a course card:

  • HTML defines the content and structure.
  • CSS defines the appearance and layout.
  • JavaScript adds interaction when necessary.

This way of thinking becomes increasingly important as applications become larger.

Conclusion

HTML, CSS and JavaScript are three foundational technologies for web development.
HTML provides structure, CSS provides presentation, and JavaScript provides behavior.

Once you understand how these three technologies work together, you have
a strong foundation for moving into more advanced frontend development,
frameworks, backend programming and full-stack development.

Enjoying this lesson?

Sign in to your Dwallnet Academy student account to track your learning progress and mark lessons as complete.

Sign In to Track Progress