<?php echo $title; ?> - Modern Website Fundamentals

1.1 What is Web Development?

Web development is the process of building and maintaining websites and web applications. It's the work that happens behind the scenes to make a website look great, work fast, and provide a seamless user experience.

Key Insight

Every website you've ever visited — from Google to Facebook to this very page — was built using the same fundamental technologies you're about to learn.

The Three Core Technologies:

HTML (HyperText Markup Language) — Structure and content
CSS (Cascading Style Sheets) — Presentation and styling
JavaScript — Interactivity and behavior

The Holy Trinity of Web Development

These three technologies work together to create everything you see on the web.

1.2 How the Web Works

When you type a URL into your browser, a fascinating chain of events occurs in milliseconds. Here's what happens:

The Journey of a Web Request

You type a URL (like google.com) in your browser
DNS Lookup: Your browser asks a DNS server "Where is this website?"
IP Address: DNS responds with an IP address (like 172.217.170.46)
Connection: Your browser connects to that server
Request: Browser sends an HTTP request for the page
Response: Server sends back HTML, CSS, and JavaScript
Rendering: Your browser renders the page

Visual Diagram

    [Your Browser] 
         ↓
    [DNS Server] ── finds IP ──→ [Web Server]
         ↓                            ↓
    [Returns IP]                  [Sends Files]
         ↓                            ↓
    [Browser Connects] ←────── [HTML, CSS, JS]
                ↓
         [Page Renders!]

Real-World Analogy

Think of it like ordering at a restaurant:

DNS lookup — Looking up the restaurant's address
Connect to server — Going to the restaurant
Request page — Ordering your meal
Server processes — Kitchen prepares food
Server sends HTML — Waiter brings food
Browser renders — You eat and enjoy!

🔬 Live Demo: See HTTP in Action

Click the button to simulate what happens when you request a webpage:

            Ready...
        

1.3 Frontend vs Backend

Frontend (Client-side)

The frontend is everything users see and interact with directly in their browser.

Technologies: HTML, CSS, JavaScript
Runs on: User's browser
Responsible for: Layout, design, interactivity
Frameworks: React, Vue, Angular

Client-side

Backend (Server-side)

The backend handles server logic, databases, and behind-the-scenes processing.

Technologies: PHP, Python, Node.js, Ruby
Runs on: Web server
Responsible for: Data storage, authentication, API
Frameworks: Laravel, Django, Express

Server-side

How They Work Together

When you submit a login form:

Frontend collects your username/password and sends to backend
Backend checks database for matching credentials
Backend sends response back to frontend
Frontend displays "Login successful" or error message

1.4 Browsers vs Servers

Browsers

Chrome, Firefox, Safari, Edge — they REQUEST and RENDER web pages

Run on YOUR computer
Understand HTML, CSS, JS
Display content visually
Can store cookies & cache

Servers

Powerful computers that STORE and SEND websites

Run 24/7 in data centers
Store all website files
Process PHP, databases
Handle multiple requests

The Cloud

Network of virtual servers working together

Scalable storage
Global availability
Backup & redundancy
Cost-efficient

Browser Market Share (2025)

Chrome: 65%

Safari: 18%

Edge: 5%

Firefox: 3%

Others: 9%

1.5 HTML - The Structure

HTML (HyperText Markup Language) is the skeleton of every website. It uses tags to structure content.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is my first page.</p>
    </body>
</html>

Key components:

<!DOCTYPE html> — Tells browser it's HTML5
<html> — Root element
<head> — Metadata (not displayed)
<body> — Visible content

Common Tags Reference

Tag	Purpose
<h1> - <h6>	Headings (h1 most important)
<p>	Paragraph
<a href="">	Links
<img src="">	Images
<ul>, <ol>	Unordered/Ordered lists
<div>	Division/container
<span>	Inline container
<button>	Clickable button

✏️ Try It Yourself - HTML Playground

Edit the HTML below and see the result instantly:

Live Preview:

1.6 Your First Complete Web Page

Let's build a complete, styled webpage together that includes everything we've learned:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }
        h1 { color: #FFD700; text-align: center; }
        .card {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .card h2 { color: #FFD700; margin-top: 0; }
        a { color: #FFD700; }
        button {
            background: #FFD700;
            color: #2c3e50;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover {
            background: #ffed4a;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    
    <div class="card">
        <h2>About Me</h2>
        <p>I'm learning web development at Krane Digital Academy! This is my first complete webpage with HTML and CSS.</p>
        <img src="https://via.placeholder.com/300x200/667eea/ffffff?text=Krane+Digital" alt="placeholder" style="max-width:100%; border-radius:5px;">
    </div>
    
    <div class="card">
        <h2>My Skills</h2>
        <ul>
            <li>✅ HTML5 - Building structure</li>
            <li>✅ CSS3 - Adding style</li>
            <li>⏳ JavaScript - Coming soon!</li>
        </ul>
    </div>
    
    <div class="card" style="text-align: center;">
        <h2>Let's Interact</h2>
        <button onclick="alert('Hello from Krane Digital!')">Click Me!</button>
    </div>
    
    <p style="text-align: center; margin-top: 30px;">
        Visit <a href="https://kranedigitalhub.netlify.app" target="_blank">Krane Digital Hub</a> for more resources!
    </p>
</body>
</html>

Download This Example

1.7 Development Tools

Essential Tools for Web Developers

VS Code - Most popular code editor (free, extensible)
Chrome DevTools - Built-in browser tools for debugging
Git & GitHub - Version control and collaboration
XAMPP - Local server environment (PHP, MySQL)
Figma - Design and prototyping
Postman - API testing

Browser DevTools Deep Dive

Press F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac) to open DevTools:

Elements - Inspect and edit HTML/CSS in real-time
Console - View errors and test JavaScript
Network - Monitor all network requests
Sources - Debug JavaScript code
Application - Manage storage, cookies, cache
Performance - Analyze page speed

Try DevTools Now!

Right-click anywhere on this page and select "Inspect" or "Inspect Element"

💡 Pro Tip:

You can edit any website temporarily using DevTools! The changes only affect your view - refresh the page to reset.

Try this:

Right-click this text
Select "Inspect"
In the Elements panel, double-click the text
Change it to anything you want!

1.8 Practice Exercise

📝 Build Your Personal Profile Page

Instructions: Create an HTML page that tells the world about you!

✅ Required Elements:

Create a file called profile.html
Add the complete HTML5 document structure
Include a main heading with your name
Add a paragraph about why you're learning web development
Create an unordered list of 3 things you want to learn
Add a link to Krane Digital Hub website
Include an image (use placeholder or your own photo)
Add a button that shows an alert when clicked

🌟 Bonus Challenges:

Add a CSS style block to make it colorful
Create a card layout for your information
Add a button that changes the background color
Include a table of your skills with proficiency levels
Add a contact form (just the HTML structure)

Starter Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Profile</title>
    <style>
        /* Add your CSS here */
    </style>
</head>
<body>
    <h1>Your Name Here</h1>
    <!-- Add your content -->
    
    <script>
        // Add your JavaScript here
    </script>
</body>
</html>

🌐 INTRODUCTION TO WEB DEVELOPMENT

In This Lesson