Brtest Tutorial
Introduction to Web Development
This chapter gives you a fast, practical overview of how the web works, what frontend and backend mean, the tools you need, and how to set up your first project.
What Is Web Development?
Web development is the process of building websites and web applications. In this tutorial you will:
- Write structure with
HTML - Style with
CSS - Add interactivity with
JavaScript
How the Web Works (Client & Server)
When you type a URL and press Enter, your browser (the client) sends an HTTP request to a server. The server returns files (HTML, CSS, JS, images) that the browser renders.
Request/Response (Simplified):
Server → HTTP Response (HTML/CSS/JS) → Browser
Browser → Renders Page
Frontend vs Backend
- Frontend: What users see and interact with (HTML, CSS, JavaScript).
- Backend: Server-side logic and data (databases, APIs, authentication).
Tools You Need
- A modern browser (Chrome, Edge, Firefox, Safari)
- A code editor (VS Code, Sublime, etc.)
- Optional: Git for version control
Tip: In VS Code, install extensions for HTML, CSS, JavaScript, and a Live Server plugin to preview changes.
Set Up Your First Project
Create a folder and add your first HTML file.
Example: Minimal index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Web</title>
</head>
<body>
<h1>Hello Web!</h1>
<p>My first step into web development.</p>
</body>
</html>
Try it Yourself »
Add Styling (CSS)
Create a mystyle.css file and link it from your HTML.
Example: Link a Stylesheet
<!-- inside <head> -->
<link rel="stylesheet" href="mystyle.css">
Example: mystyle.css
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
margin: 2rem;
}
h1 { color: #1a4; }
Try it Yourself »
Add Interactivity (JavaScript)
Create an myscript.js file and include it with defer or at the end of <body>.
Example: Button Click
<button id="greetBtn">Greet Me</button>
<script>
document.getElementById("greetBtn").addEventListener("click", function () {
alert("Welcome to Web Development!");
});
</script>
Try it Yourself »
Note: External file pattern:
<script src="myscript.js" defer></script>.
Folder Structure
Example
my-first-site/
index.html
mystyle.css
myscript.js
images/
Tip: Keep filenames lowercase and avoid spaces (use hyphens).
Quick Practice
- Create the folder structure above.
- Add the HTML, CSS, and JS samples.
- Open
index.htmlin your browser and test the button.
Next Up
Continue to the next chapter where we dive into the building blocks of the web with HTML – Structure of a Web Page.
