Lecture 1 Demo - Web Development Fundamentals

[Classroom Tip] This demo shows how HTML (structure), CSS (styling), and JavaScript (behavior) work together to create a functioning web page. Try each section below!

[Tip] Open DevTools (F12 or Right-click -> Inspect) to see the HTML, CSS, and Network tabs

1) HTML - Structure (The Skeleton)

HTML provides the semantic structure of a web page. It defines what content exists and its meaning.

Pure HTML Example (No CSS styling yet):

This is what raw HTML looks like - structured but not pretty. The content is organized with semantic tags, but it has no colors, no special layout, no decorations.

<div>

  <div>My Profile</div>

  <ul>

    <li><strong>Name:</strong> Alex Chen</li>

    <li><strong>Role:</strong> Web Developer</li>

    <li><strong>Skills:</strong> HTML, CSS, JavaScript</li>

    <li><strong>Status:</strong> Learning</li>

  </ul>

</div>

Now with CSS Styling Applied (Same HTML):

[Note] Note: Same HTML structure above, but NOW with CSS styling! The colors, border, padding, and layout are all from CSS, not from HTML. HTML didn't change - only CSS was added!

Semantic Tags Content Structure

2) CSS - Styling (The Clothes)

CSS controls the visual appearance of the HTML structure. Colors, fonts, layouts, and animations all use CSS.

HTML
Structure

CSS
Styling

JS
Behavior

[Tip] Try this: Hover over the boxes above to see CSS transitions in action!

Colors Typography Layout Animations

3) JavaScript - Behavior (The Brain)

JavaScript adds interactivity and dynamic behavior. Try the input fields and buttons below to see JavaScript in action!

Welcome Form (JavaScript Interactivity)

Enter Your Name:

[Tip] What happens: When you click the button, JavaScript reads the input, creates a message, and updates the page instantly!

Event Handling DOM Manipulation User Input Dynamic Content

How It All Works Together

This is how frontend web development happens. Let's trace a real interaction:

Your Email (for "Login" simulation):

          What JavaScript Does (Behind the Scenes):

          1. Frontend collects email from input field

          2. Frontend validates format

          3. Frontend displays feedback immediately

          (In real apps: Frontend would send data to backend server)

[Tip] Remember: This demo shows only FRONTEND (browser side). Real login would send data to a backend server!

Frontend User Input Validation Feedback

What You've Just Learned

HTML provides structure and semantic meaning
CSS makes websites look beautiful and usable
JavaScript adds interactivity and behavior
All three work together in modern web pages
Frontend is what runs in your browser
Backend (not shown here) handles server logic

Next Steps: Open your code editor, create a file called index.html, copy this code, modify it, and open it in your browser.