Orientation Lecture
Course Overview, Learning Outcomes, Introduction to Modern Web Development, Front-end vs Back-end, and the roles of HTML, CSS, and JS.
Study Notes: Orientation Lecture
💡 Easy English Concept Guide
Web development means building websites. We split it into two halves: the frontend (what you see) and the backend (where your data is stored on a server).
1. Understanding Client-Server Actions
Every time you request a page in your web browser, a client-server conversation happens:
- Client (Your Browser): Sends a request (e.g. 'Give me index.html') across the network.
- Server (Remote Computer): Receives the request, processes server scripts, and returns the files (HTML, CSS, JS).
2. The Web Technologies Diagram
| Technology | Core Role | Code Example |
|---|---|---|
| HTML | Structure and content skeleton | <button>Click</button> |
| CSS | Presentation and style design | button { color: blue; } |
| JavaScript | Behavior and interaction logic | btn.onclick = alert; |
3. File Linking Template
Here is how a standard client-side project loads its structural, style, and script assets:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
<!-- Stylesheet Link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<!-- Interactive script -->
<script src="app.js"></script>
</body>
</html>💡 Quick Revision Guide
Ensure your layouts adapt cleanly across responsive viewport widths. Double-check script sequences to verify that DOM selections happen after nodes are parsed by the browser.
Expected University & Placement Questions
- Q1: What are the primary differences between Frontend and Backend web development?
Answer: Frontend focuses on layout structure, stylesheet visual assets, and interaction client-side in the browser. Backend focuses on server logic calculations, databases tables, API routing systems, and security validations. - Q2: Why is JavaScript called the dynamic interaction layer?
Answer: JavaScript executes logic in the client's browser, modifying DOM elements, executing click event listeners, fetching JSON databases, and changing layouts without refreshing pages.
Last reviewed: July 2026