Course - Macaw Bytes Academy

Chapter 3: Front-End Fundamentals

Chapter 3 of 15

Chapter 3: Front-End Fundamentals

3.1 HTML Structure

HTML (HyperText Markup Language) provides the structure and content of web pages. Understanding HTML is the foundation of front-end development.

HTML Document Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <header>
        <h1>Main Heading</h1>
    </header>
    <main>
        <section>
            <h2>Section Heading</h2>
            <p>Content goes here.</p>
        </section>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>

Semantic HTML5 Elements:

<header>: Site header or section header
<nav>: Navigation links
<main>: Main content area
<article>: Independent, self-contained content
<section>: Thematic grouping of content
<aside>: Sidebar or complementary content
<footer>: Site footer or section footer

Common HTML Elements:

Headings: <h1> through <h6> for document hierarchy
Paragraphs: <p> for text content
Links: <a href="url"> for navigation
Images: <img src="path" alt="description"> for visuals
Lists: <ul>, <ol>, <li> for organized content
Forms: <form>, <input>, <button> for user input

3.2 CSS Styling

CSS (Cascading Style Sheets) controls the visual appearance and layout of web pages. CSS separates presentation from content, making websites more maintainable.

CSS Syntax:

selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

CSS Selectors:

Element Selector: Targets HTML elements (h1, p, div)
Class Selector: Targets elements with class (.class-name)
ID Selector: Targets element with ID (#id-name)
Attribute Selector: Targets elements with attributes ([type="text"])
Pseudo-classes: Targets element states (:hover, :focus, :active)

CSS Box Model:

Every element is a box with content, padding, border, and margin:

Content: The actual content (text, images)
Padding: Space inside the element
Border: Border around the element
Margin: Space outside the element

Layout Techniques:

Flexbox: One-dimensional layout for flexible containers
Grid: Two-dimensional layout system
Float: Traditional layout method (legacy)
Positioning: Static, relative, absolute, fixed, sticky

3.3 JavaScript Interactivity

JavaScript adds interactivity and dynamic behavior to web pages. It runs in the browser and can manipulate the DOM, handle events, and make API calls.

JavaScript Basics:

// Variables
let name = "John";
const age = 30;
var city = "NYC"; // Avoid var, use let/const

// Functions
function greet(name) {
    return "Hello, " + name;
}

// Arrow Functions (ES6+)
const greetArrow = (name) => {
    return `Hello, ${name}`;
};

// Event Handling
document.getElementById("button").addEventListener("click", function() {
    alert("Button clicked!");
});

DOM Manipulation:

The Document Object Model (DOM) represents the HTML structure. JavaScript can modify it:

// Select elements
const element = document.querySelector(".class-name");
const elements = document.querySelectorAll("p");

// Modify content
element.textContent = "New text";
element.innerHTML = "<strong>Bold text</strong>";

// Modify styles
element.style.color = "red";
element.classList.add("active");

// Create elements
const newElement = document.createElement("div");
newElement.textContent = "New element";
document.body.appendChild(newElement);

Event Handling:

// Click events
button.addEventListener("click", handleClick);

// Form events
form.addEventListener("submit", handleSubmit);

// Keyboard events
input.addEventListener("keypress", handleKeyPress);

// Mouse events
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);

3.4 Front-End Development Workflow

Effective front-end development follows a structured workflow:

Design: Review designs, create wireframes, plan component structure
Setup: Initialize project, set up build tools, configure development environment
HTML: Create semantic HTML structure
CSS: Style components, implement responsive design
JavaScript: Add interactivity, handle events, connect to APIs
Testing: Test in multiple browsers, check responsive design, validate accessibility
Optimization: Minify code, optimize images, improve performance

Full-Stack Development Fundamentals

Chapter 3: Front-End Fundamentals

Chapter 3: Front-End Fundamentals

3.1 HTML Structure

3.2 CSS Styling

3.3 JavaScript Interactivity

3.4 Front-End Development Workflow