🎯 Learning Objectives
After completing this section, you will be able to:
- Understand what web development is and how the web works
- Create your first HTML page
- Add basic styling with CSS
- Make your page interactive with JavaScript
- Understand the client-server architecture
- Set up your development environment
⚡ Prerequisites
- Basic computer skills
- Text editor (VS Code recommended)
- Web browser (Chrome, Firefox, or Edge)
- Enthusiasm to learn!
1. Introduction to Web Development
What is Web Development?
Web development is the process of creating websites and web applications that run in a web browser. It involves:
- Frontend: What users see and interact with
- Backend: Server-side logic and databases
- Full Stack: Both frontend and backend
Core Technologies
- HTML: Structure and content
- CSS: Styling and layout
- JavaScript: Interactivity and logic
These three technologies form the foundation of all web development!
2. How the Web Works
The Request-Response Cycle
- User enters URL: You type www.example.com in your browser
- DNS Lookup: Browser finds the server's IP address
- HTTP Request: Browser requests the web page
- Server Response: Server sends back HTML, CSS, and JavaScript
- Browser Renders: Browser displays the page
Client-Side (Frontend)
- Runs in the user's browser
- HTML, CSS, JavaScript
- User interface and experience
- Responsive design
Server-Side (Backend)
- Runs on web servers
- Node.js, Python, PHP, Java
- Database operations
- Business logic
3. Your First Web Page
Creating index.html
Create a new file called index.html and add this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first web page!</p>
</body>
</html>
✅ How to View Your Page
- Save the file as
index.html
- Right-click the file
- Select "Open with" → Choose your web browser
- You should see "Hello, World!" displayed!
4. HTML Basics
Common HTML Tags
<h1> to <h6> - Headings<p> - Paragraphs<a> - Links<img> - Images<div> - Container<span> - Inline container
HTML Structure
<!DOCTYPE html> - Document type<html> - Root element<head> - Metadata<body> - Visible content
HTML Example with More Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<h1>John Doe</h1>
<h2>Web Developer</h2>
<p>Welcome to my portfolio website!</p>
<h3>About Me</h3>
<p>I'm a passionate web developer learning HTML, CSS, and JavaScript.</p>
<h3>My Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<a href="mailto:john@example.com">Contact Me</a>
</body>
</html>
5. CSS Basics
What is CSS?
CSS (Cascading Style Sheets) controls the visual appearance of your web page:
- Colors and fonts
- Layout and spacing
- Animations and effects
- Responsive design
CSS Syntax
selector {
property: value;
}
/* Example */
h1 {
color: blue;
font-size: 32px;
}
Adding CSS to Your Page
Add this inside the <head> section:
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
6. JavaScript Basics
What is JavaScript?
JavaScript adds interactivity to your web pages:
- Respond to user actions
- Update content dynamically
- Validate forms
- Create animations
JavaScript Basics
// Display a message
console.log("Hello!");
// Show an alert
alert("Welcome!");
// Change content
document.getElementById("demo").innerHTML = "New text";
Interactive Button Example
Add this to your HTML body:
<button onclick="showMessage()">Click Me!</button>
<p id="message"></p>
<script>
function showMessage() {
document.getElementById("message").innerHTML = "Hello! You clicked the button!";
}
</script>
Practice Exercises
Create a simple profile page with the following elements:
- Your name as an
<h1> heading
- A short bio in a
<p> paragraph
- A list of your hobbies using
<ul> and <li>
- A link to your favorite website
<!-- Write your HTML here -->
Add CSS to make your profile page look better:
- Change the background color
- Center the heading
- Change the text color
- Add padding and margins
<style>
/* Write your CSS here */
</style>
Add a button that changes the page background color when clicked:
<button onclick="changeColor()">Change Background</button>
<script>
function changeColor() {
// Write your JavaScript here
// Hint: document.body.style.backgroundColor = "lightblue";
}
</script>
🎉 Summary
You've completed the first Web Development course! You now know:
- What web development is and how the web works
- How to create a basic HTML page
- How to style pages with CSS
- How to add interactivity with JavaScript
- The client-server architecture
Total points available: 10/10
💡 Next Steps
To continue your learning journey:
- Practice creating more HTML pages
- Experiment with different CSS properties
- Try adding more JavaScript interactions
- Learn about HTML forms and user input