How To Tutorial

The How To section shows you how to build the parts you see on almost every website: menus, pop-ups, tabs, sliders and more.

Each guide is a small, practical project. You write a little HTML for the structure, some CSS for the look, and a few lines of JavaScript to make it work. Then you can copy the idea into your own site.

Why Learn This Way?

You see HTML, CSS and JavaScript working together, the way they do on real websites.
Every guide ends with a complete page you can run, change and reuse.
No libraries or frameworks are needed: just plain code you fully understand.

What You Will Build

A responsive navigation bar
A dropdown menu
A modal (pop-up) box
Tabs and an accordion
An image-style slider with coloured slides
A dark mode toggle
A back-to-top button
A responsive grid of cards
A contact form with validation
And a quiz at the end

A Taste: A Button That Counts

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
button { background: #059669; color: white; border: none; padding: 10px 18px; border-radius: 6px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>

<button id="btn">Clicked 0 times</button>

<script>
let count = 0;
document.getElementById("btn").addEventListener("click", function () {
  count++;
  this.innerHTML = "Clicked " + count + " times";
});
</script>

</body>
</html>

Try it Yourself »

Exercise

In these guides, which language makes a component respond to clicks?

HTMLCSSJavaScriptSQL

Before You Start

You should know the basics of HTML and CSS. A little JavaScript helps, but each script is explained line by line. New to coding? Begin with Intro to HTML & CSS.

Want to build full websites with a mentor? The Workownix Web Development course turns these skills into complete projects, online or at our institute in Orangi Town, Karachi.