Full Web Development Course

HTML – HyperText Markup Language

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It consists of a series of elements that tell the browser how to display content. HTML is not a programming language; it is a markup language that defines the structure of your content.

Every HTML document is made up of elements. Elements are represented by tags. Tags usually come in pairs: an opening tag and a closing tag. For example, <p> is the opening tag for a paragraph, and </p> is the closing tag.

HTML Editors

You can write HTML in any text editor. The most common free editors are:

Notepad (Windows) – simplest
TextEdit (Mac) – in plain text mode
Visual Studio Code – advanced, free, with live preview extensions
Sublime Text – lightweight and powerful

We recommend Visual Studio Code for beginners because of its ease of use and extensive plugin ecosystem.

Basic HTML Document Structure

Every HTML page starts with a <!DOCTYPE html> declaration, followed by an <html> element containing a <head> and a <body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Explanation:

<!DOCTYPE html> – tells the browser this is an HTML5 document.
<html> – the root element that wraps all content.
<head> – contains meta‑information (character set, page title, styles, scripts).
<body> – contains the visible page content.

HTML Elements & Attributes

An HTML element is defined by a start tag, some content, and an end tag. Some elements are empty and do not have an end tag (e.g., <br>).

Attributes provide additional information about an element. They are written inside the start tag and usually come in name/value pairs like name="value".

<a href="https://www.example.com" target="_blank">Visit Example</a>

Here, href and target are attributes. The target="_blank" makes the link open in a new tab.

Headings & Paragraphs

Headings are defined with <h1> to <h6>, <h1> being the most important. Paragraphs are written with <p>.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text. You can write as much as you want.</p>

Styles & Formatting

Inline styles are applied using the style attribute. You can also use formatting tags like <b> for bold, <i> for italic, <mark> for highlighting, etc.

<p style="color: red; font-size: 18px;">Styled paragraph</p>
<b>Bold text</b> <i>Italic text</i> <mark>Highlighted</mark>

HTML Links

The <a> tag defines a hyperlink. Use the href attribute to specify the URL.

<a href="https://www.google.com">Go to Google</a>

HTML Images

The <img> tag embeds an image. It requires src (source) and alt (alternative text) attributes.

<img src="https://via.placeholder.com/150" alt="Placeholder Image" width="150" height="150">

HTML Tables

Tables are created with <table>, rows with <tr>, header cells with <th>, and data cells with <td>.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

HTML Lists

There are two main types: unordered (<ul>) and ordered (<ol>). Each list item uses <li>.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
</ul>
<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

HTML Forms

Forms collect user input. The <form> element wraps input elements. The action attribute defines where to send the data, and method defines the HTTP method (usually GET or POST).

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="username" placeholder="Your name">
    <input type="submit" value="Submit">
</form>

Semantic HTML

Semantic elements clearly describe their meaning to both the browser and the developer. Examples include <header>, <nav>, <main>, <article>, <section>, <footer>. They improve accessibility and SEO.

<header>
    <h1>Site Title</h1>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Content here...</p>
    </article>
</main>
<footer>
    <p>© 2025</p>
</footer>

CSS – Cascading Style Sheets

What is CSS?

CSS (Cascading Style Sheets) is used to control the presentation of HTML elements. It allows you to change colors, fonts, layouts, and much more. While HTML provides the structure, CSS provides the style.

CSS Selectors & Properties

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style; the declaration block contains one or more declarations separated by semicolons.

<style>
    /* element selector */
    p { color: blue; font-size: 16px; }
    /* class selector */
    .highlight { background-color: yellow; }
    /* id selector */
    #unique { border: 2px solid red; }
</style>
<p class="highlight" id="unique">Styled paragraph</p>

There are many more advanced selectors (descendant, child, attribute, pseudo‑class, etc.) that we’ll cover later.

The CSS Box Model

Every HTML element is a box. The box model consists of: content, padding, border, and margin (from inside out). Understanding it is crucial for layout.

<style>
    .box {
        width: 200px;
        padding: 20px;
        border: 5px solid #333;
        margin: 30px;
        background: lightblue;
    }
</style>
<div class="box">Box Model Example</div>

Flexbox Layout

Flexbox is a one‑dimensional layout model that makes it easy to distribute space and align content. The parent becomes a flex container with display: flex;.

<style>
    .flex-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: lightgray;
        height: 100px;
    }
    .flex-item {
        padding: 10px;
        background: coral;
        margin: 5px;
    }
</style>
<div class="flex-container">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
</div>

CSS Grid Layout

Grid is a two‑dimensional layout system. You define rows and columns, and then place items into them.

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .grid-item {
        background: lightgreen;
        padding: 20px;
        text-align: center;
    }
</style>
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

Responsive Design

Media queries allow you to apply different styles depending on device characteristics, most commonly the screen width.

<style>
    .responsive-box {
        width: 100%;
        padding: 20px;
        background: lightcoral;
    }
    @media (max-width: 600px) {
        .responsive-box {
            background: lightblue;
            font-size: 14px;
        }
    }
</style>
<div class="responsive-box">Resize the browser to see the change</div>

CSS Transitions & Animations

Transitions allow you to change property values smoothly over a given duration. Animations let you create more complex sequences of style changes.

<style>
    .animated-box {
        width: 100px;
        height: 100px;
        background: red;
        transition: background 0.5s, transform 0.5s;
    }
    .animated-box:hover {
        background: blue;
        transform: rotate(180deg);
    }
</style>
<div class="animated-box"></div>

JavaScript – Interactivity & Logic

What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on web pages. Every time a web page does more than just sit there and display static information – displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. – you can bet that JavaScript is probably involved.

Variables and Data Types

Variables are containers for storing data. Use let for mutable values, const for values that won't change, and avoid var in modern code.

<script>
    let name = "John";        // string
    const age = 30;          // number
    let isStudent = false;   // boolean
    console.log(name, age, isStudent);
</script>

JavaScript is dynamically typed – you don't have to specify the data type.

Functions

Functions are blocks of code designed to perform a particular task. They are executed when "called" (invoked).

<script>
    function greet(name) {
        return "Hello, " + name + "!";
    }
    console.log(greet("World"));
</script>

Events

Events are actions that happen in the browser (click, mouse move, key press, etc.). You can use event handlers to run code when an event occurs.

<button onclick="alert('Button clicked!')">Click Me</button>
<button id="myBtn">Hover over me</button>
<script>
    document.getElementById('myBtn').addEventListener('mouseenter', () => {
        alert('Mouse entered!');
    });
</script>

DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. JavaScript can change all the HTML elements, attributes, and CSS styles.

<p id="demo">Original text</p>
<button onclick="document.getElementById('demo').innerText='Changed!'">Change text</button>

Arrays & Objects

Arrays store multiple values in a single variable. Objects store data as key‑value pairs.

<script>
    const fruits = ["Apple", "Banana", "Cherry"];
    console.log(fruits[0]); // "Apple"
    fruits.push("Orange");

    const person = { firstName: "John", lastName: "Doe", age: 30 };
    console.log(person.firstName);
</script>

ES6+ Features

Modern JavaScript introduces arrow functions, template literals, destructuring, classes, modules, and more.

<script>
    // Arrow function
    const add = (a, b) => a + b;
    // Template literal
    const greeting = `The sum is ${add(2, 3)}`;
    console.log(greeting);
</script>

PHP – Server-Side Scripting

What is PHP?

PHP (Hypertext Preprocessor) is a widely‑used open source server‑side scripting language that is especially suited for web development and can be embedded into HTML. Unlike JavaScript, which runs in the browser, PHP code is executed on the server, generating HTML which is then sent to the client.

PHP Syntax & Variables

PHP scripts start with <?php and end with ?>. Variables start with a $ sign. Statements end with a semicolon.

<?php
$name = "World";
echo "Hello, $name!";
$sum = 5 + 10;
echo "5 + 10 = " . $sum;
?>

Note: PHP runs on a server; the "Run" button shows a simulated output.

Form Handling

PHP can collect form data using the $_GET and $_POST superglobal arrays.

<form method="post" action="">
    <input type="text" name="user">
    <input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $user = htmlspecialchars($_POST['user']);
    echo "Hello, $user!";
}
?>

Sessions & Cookies

Sessions store user data on the server, while cookies store data in the user’s browser.

<?php
session_start();
$_SESSION['user'] = 'John';
echo $_SESSION['user'];

setcookie('theme', 'dark', time() + (86400 * 30), "/");
echo $_COOKIE['theme'] ?? 'no cookie';
?>

MySQL Database Connection & CRUD

PHP can connect to MySQL databases using PDO (PHP Data Objects). You can perform Create, Read, Update, Delete operations.

<?php
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');

// INSERT
$stmt = $pdo->prepare("INSERT INTO users (name) VALUES (?)");
$stmt->execute(["Alice"]);

// SELECT
$rows = $pdo->query("SELECT * FROM users")->fetchAll();
foreach ($rows as $row) {
    echo $row['name'] . "<br>";
}
?>