Your journey into the world of web creation begins here — understand how the web works, meet the tools, and build your very first page.
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.
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 Holy Trinity of Web Development
These three technologies work together to create everything you see on the web.
When you type a URL into your browser, a fascinating chain of events occurs in milliseconds. Here's what happens:
[Your Browser]
↓
[DNS Server] ── finds IP ──→ [Web Server]
↓ ↓
[Returns IP] [Sends Files]
↓ ↓
[Browser Connects] ←────── [HTML, CSS, JS]
↓
[Page Renders!]
Think of it like ordering at a restaurant:
Click the button to simulate what happens when you request a webpage:
The frontend is everything users see and interact with directly in their browser.
The backend handles server logic, databases, and behind-the-scenes processing.
When you submit a login form:
Chrome, Firefox, Safari, Edge — they REQUEST and RENDER web pages
Powerful computers that STORE and SEND websites
Network of virtual servers working together
HTML (HyperText Markup Language) is the skeleton of every website. It uses tags to structure content.
<!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| 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 |
Edit the HTML below and see the result instantly:
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>
Press F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac) to open DevTools:
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:
Instructions: Create an HTML page that tells the world about you!
profile.html<!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>