Web Development Fundamentals

Introduction to Frontend Development

Duration: 45–60 minutes

🎯 What You’ll Learn in This Lesson

What frontend development is and where it fits in web development.
The difference between frontend, backend, and full‑stack development.
The three core frontend technologies: HTML, CSS, and JavaScript.
What a frontend developer does in real projects and basic career paths.

📺 Lesson Video

Watch this video introduction to frontend web development. It explains HTML, CSS, JavaScript and the role of the browser in simple terms:

1.1 What Is Frontend Development?

Frontend development is the part of web development that focuses on everything the user sees and interacts with in the browser: layout, colors, buttons, text, forms, and animations.[web:50] A frontend developer turns designs and ideas into real, interactive web pages using HTML, CSS, and JavaScript.[web:50]

User interface (UI): Structure and layout of the page (headers, sections, cards, navbars).
User experience (UX): Making sure the site is easy to use and works on all devices.
Interactivity: Clickable buttons, forms that validate, dynamic content, popups, menus, etc.

1.2 Frontend vs Backend vs Full‑Stack

Role	What They Do	Technologies (Examples)
Frontend Developer	Builds what users see in the browser: layout, styles, interactivity.	HTML, CSS, JavaScript, React, Vue, Angular
Backend Developer	Builds server logic, APIs, and database operations.	Node.js, Python (FastAPI, Django), Java, SQL, MongoDB
Full‑Stack Developer	Works on both frontend and backend.	Combination of frontend + backend stack

1.3 The Three Core Frontend Technologies

HTML – Structure

HTML (HyperText Markup Language) defines the structure and content of a web page.[web:49] Think of it as the skeleton of the website.

<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
<a href="https://example.com">Visit a link</a>

CSS – Styling

CSS (Cascading Style Sheets) controls the visual design: colors, fonts, layout, spacing, and responsiveness.[web:49] Think of it as the clothes and design on top of the skeleton.

h1 {
  color: #2563eb;
  font-family: Arial, sans-serif;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

JavaScript – Interactivity

JavaScript adds behavior and interactivity to the page: handling button clicks, validating forms, showing/hiding elements, and working with APIs.[web:50] Think of it as the brain of the page.

const button = document.querySelector("button");

button.addEventListener("click", function () {
  alert("Button clicked!");
});

1.4 What Frontend Developers Actually Do

Convert UI/UX designs (Figma, XD, etc.) into responsive web pages.
Work with APIs to display data (for example, weather, products, news).
Fix layout bugs across browsers and devices.
Optimize loading speed and performance.
Collaborate with backend developers and designers.

1.5 Mini Task

Open any website you like (YouTube, Amazon, Swiggy, etc.). Make a list of at least 5 things on the page that are part of frontend development (for example: navigation bar, search bar, product cards, buttons, hover effects).

✅ Lesson Summary

Frontend is everything the user sees and interacts with in the browser.[web:50]
HTML = structure, CSS = style, JavaScript = interactivity.[web:49][web:50]
Frontend developers have strong demand and clear career paths.

Frontend Beginner

Curriculum