Module 02

Frontend Development

The art of creating what users see and touch. This module covers the "Holy Trinity" of the web: HTML for structure, CSS for style, and JavaScript for interactivity.

01 HTML Basics

HTML (HyperText Markup Language) is the foundation of every website. It doesn't perform logic; it defines structure. Modern HTML5 introduces "Semantic Elements"—tags that describe their meaning to both the browser and search engines.

<main>

Specifies the main content of a document, excluding headers/footers.

<article>

Self-contained content that could exist independently (e.g., a blog post).

<nav>

Defines a set of navigation links.

                    <!-- A Semantic Structure Example -->
                    <header>
                    <nav>...</nav>
                    </header>
                    <main>
                    <section>
                    <h1>Hello World</h1>
                    </section>
                    </main>
                

02 CSS Fundamentals

CSS (Cascading Style Sheets) controls how HTML elements look. The most critical concept to master is the Box Model: every element on a page is a rectangular box consisting of content, padding, borders, and margins.

To build modern layouts, we rely on two powerful systems:

Flexbox: Best for one-dimensional layouts (e.g., a row of buttons or a navbar).
CSS Grid: Best for two-dimensional layouts (e.g., an entire photo gallery or page structure).

Responsive Design is achieved using "Media Queries," which apply different styles based on the screen width (Mobile vs. Desktop).

03 JavaScript Introduction

JavaScript (JS) makes the web alive. It allows you to respond to user actions (clicks, typing) and update the HTML without reloading the page. This is done via the DOM (Document Object Model).

                    // Select a button
                    const btn = document.querySelector('.my-button');

                    // Add logic when clicked
                    btn.addEventListener('click', function() {
                    alert('You clicked me!');
                    // Change background color
                    document.body.style.backgroundColor = '#f0f0f0';
                    });
                

Start by mastering variables (`const`, `let`), functions, and event listeners. These are the building blocks of frameworks like React.

04 Frontend in the Real World

Professional frontend development is more than just writing code; it's about Performance and User Experience (UX).

Component Thinking

Breaking a UI into reusable pieces (e.g., a Card, a Button, a Navbar) rather than one giant HTML file.

Asset Optimization

Compressing images and minifying code so the website loads instantly on 3G networks.

Accessibility (a11y)

Ensuring your site works for screen readers and keyboard-only users.

05 External Learning Resources

Deep dive with these curated tutorials:

🎥 HTML Crash Course (Traversy Media) ↗ 🎥 CSS Flexbox & Grid Explained ↗ 🎥 JavaScript Crash Course for Beginners ↗

Key Takeaways

You've explored the three pillars of the frontend. HTML provides the semantic skeleton, CSS handles the visual presentation and layout, and JavaScript adds the interactive logic. Mastery involves making these three work together seamlessly.

← Previous: Web Foundations