Web Technology with HTML5, CSS3, and JavaScript

 Web Technology with HTML5, CSS3, and JavaScript

Objectives
  • Understand the role of HTML5, CSS3, and JavaScript in web development.
  • Learn their key features and practical applications.
  • Build a functional To-Do List web app to demonstrate their integration.
  • Provide hands-on examples with comments for clarity.
Prerequisites
  • Basic understanding of computers and text editors (e.g., VS Code).
  • A modern web browser (e.g., Chrome, Firefox).
Step 1: Introduction to Web Technology
What is Web Technology?
  • Definition: Web technology refers to tools and languages used to create and deliver content on the World Wide Web. HTML5, CSS3, and JavaScript are the core technologies for building interactive, visually appealing websites.
  • Components:
    • HTML5: Structures content (e.g., text, images, forms).
    • CSS3: Styles and layouts the content (e.g., colors, fonts, responsiveness).
    • JavaScript: Adds interactivity and dynamic behavior (e.g., form validation, animations).
Why Use HTML5, CSS3, and JavaScript?
  • HTML5: Provides semantic markup, multimedia support, and accessibility, making content structured and device-friendly.
  • CSS3: Enables modern designs, responsive layouts, and animations without relying on external plugins.
  • JavaScript: Powers dynamic features, real-time updates, and client-side logic, enhancing user experience.
  • Together: They form the foundation of modern web development, supported by all browsers and scalable for complex applications.
How Do They Work Together?
  • HTML5: Defines the skeleton of a webpage (e.g., headings, lists, inputs).
  • CSS3: Styles the skeleton (e.g., colors, spacing, grid layouts).
  • JavaScript: Adds behavior (e.g., adding/deleting tasks in a to-do list).
  • Example Workflow: HTML5 creates a form, CSS3 styles it, and JavaScript handles form submission.
Step 2: HTML5 - Structuring the Web
What is HTML5?
  • HTML5 is the latest version of HyperText Markup Language, used to structure content on the web with semantic elements, multimedia, and APIs.
Why Use HTML5?
  • Semantic Elements: Tags like <header>, <footer>, <article> improve readability and SEO.
  • Multimedia Support: Native <video> and <audio> tags eliminate Flash dependency.
  • APIs: Canvas, Geolocation, and Local Storage enhance functionality.
  • Accessibility: ARIA attributes improve usability for screen readers.
How to Use HTML5?
Let’s create the structure for a To-Do List app.

Example: index.html

<!DOCTYPE html>
<!-- Declares the document as HTML5 -->
<html lang="en">
<head>
    <!-- Metadata for character set and responsive viewport -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <!-- Links to external CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Semantic header for app title -->
    <header>
        <h1>My To-Do List</h1>
    </header>
    <!-- Main content area -->
    <main>
        <!-- Form to add new tasks -->
        <form id="todo-form">
            <input type="text" id="task-input" placeholder="Enter a task" required>
            <!-- Button to submit the form -->
            <button type="submit">Add Task</button>
        </form>
        <!-- Unordered list to display tasks -->
        <ul id="todo-list"></ul>
    </main>
    <!-- Footer with credits -->
    <footer>
        <p>&copy; 2025 To-Do App</p>
    </footer>
    <!-- Links to external JavaScript file -->
    <script src="script.js"></script>
</body>
</html>
Comments:
  • <!DOCTYPE html>: Ensures browsers render the page as HTML5.
  • <meta> tags: Support Unicode and responsive design.
  • Semantic tags (<header>, <main>, <footer>): Organize content logically.
  • <form>: Captures user input for tasks, with required for validation.
  • <ul id="todo-list">: Placeholder for dynamically added tasks.
  • <script>: Links JavaScript for interactivity.

Step 3: CSS3 - Styling the Web
What is CSS3?
  • CSS3 is the latest version of Cascading Style Sheets, used to style and layout web content, including colors, fonts, animations, and responsive designs.
Why Use CSS3?
  • Visual Appeal: Customizes fonts, colors, and backgrounds for branding.
  • Responsive Design: Media queries adapt layouts for mobile, tablet, and desktop.
  • Animations: Keyframes and transitions create dynamic effects without JavaScript.
  • Flexbox/Grid: Simplifies complex layouts (e.g., centered content, card grids).
How to Use CSS3?
Let’s style the To-Do List app to make it visually appealing and responsive.

Example: styles.css

/* Reset default margins and paddings for consistency */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style the body with a light background */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

/* Center the header and style the title */
header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    color: #333;
    font-size: 2.5em;
}

/* Style the form with Flexbox for layout */
#todo-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Style the input field */
#task-input {
    flex: 1;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style the submit button with hover effect */
#todo-form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#todo-form button:hover {
    background-color: #218838;
}

/* Style the task list */
#todo-list {
    list-style: none;
}

#todo-list li {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Style the delete button for each task */
#todo-list button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    #todo-form {
        flex-direction: column;
    }
    #task-input, #todo-form button {
        width: 100%;
    }
}

/* Footer styling */
footer {
    text-align: center;
    margin-top: 20px;
    color: #666;
}
Comments:
  • *: Resets browser defaults for consistent styling.
  • body: Sets a clean background and font.
  • #todo-form: Uses Flexbox (display: flex) for horizontal input/button layout.
  • button:hover: CSS3 transition for smooth color change.
  • #todo-list li: Flexbox aligns task text and delete button.
  • @media: CSS3 media query ensures responsiveness on small screens.
  • footer: Centers and styles the copyright text.

Step 4: JavaScript - Adding Interactivity
What is JavaScript?
  • JavaScript is a versatile, client-side scripting language used to add interactivity, manipulate the DOM, and handle user events in web applications.
Why Use JavaScript?
  • Interactivity: Responds to user actions (e.g., clicks, form submissions).
  • DOM Manipulation: Dynamically updates webpage content without reloading.
  • Event Handling: Captures events like clicks, keypresses, or form submissions.
  • Data Processing: Validates input, fetches APIs, or manages local storage.
How to Use JavaScript?
Let’s add functionality to the To-Do List app: add tasks, delete tasks, and persist data using localStorage.

Example: script.js

// Select DOM elements
const form = document.getElementById('todo-form');
const taskInput = document.getElementById('task-input');
const todoList = document.getElementById('todo-list');

// Load tasks from localStorage on page load
document.addEventListener('DOMContentLoaded', loadTasks);

// Handle form submission to add a task
form.addEventListener('submit', (e) => {
    e.preventDefault(); // Prevent page reload
    const taskText = taskInput.value.trim();

    if (taskText !== '') {
        addTask(taskText); // Add task to DOM and storage
        taskInput.value = ''; // Clear input
    }
});

// Function to add a task
function addTask(taskText) {
    // Create list item
    const li = document.createElement('li');
    li.textContent = taskText;

    // Create delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', () => {
        li.remove(); // Remove task from DOM
        saveTasks(); // Update localStorage
    });

    // Append button to list item
    li.appendChild(deleteBtn);
    // Append list item to todo list
    todoList.appendChild(li);

    // Save task to localStorage
    saveTasks();
}

// Function to save tasks to localStorage
function saveTasks() {
    const tasks = [];
    todoList.querySelectorAll('li').forEach(li => {
        tasks.push(li.firstChild.textContent); // Store task text
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from localStorage
function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => addTask(task)); // Add each task to DOM
}
Comments:
  • document.getElementById: Selects form, input, and list elements for manipulation.
  • addEventListener: Listens for page load (DOMContentLoaded) and form submission (submit).
  • e.preventDefault(): Stops form from refreshing the page.
  • addTask: Creates a new <li> with a delete button and adds it to the DOM.
  • localStorage: Persists tasks across page reloads using setItem and getItem.
  • JSON.stringify/parse: Converts tasks array to/from a string for storage.
  • deleteBtn.addEventListener: Removes tasks and updates localStorage.

Step 5: Integration and Testing
How They Work Together
  • HTML5: Provides the structure (form, list, buttons).
  • CSS3: Styles the UI for usability and responsiveness.
  • JavaScript: Handles logic (adding/deleting tasks, saving to localStorage).
  • Example: When a user submits a task:
    • HTML5’s <form> captures input.
    • CSS3 ensures the form looks good on all devices.
    • JavaScript processes the input, updates the DOM, and saves it.
Testing the App
  1. Open in Browser: Load index.html in Chrome/Firefox.
  2. Test Features:
    • Add a task and verify it appears in the list.
    • Delete a task and confirm it’s removed.
    • Refresh the page to ensure tasks persist via localStorage.
    • Resize the browser to check responsiveness (media query).
  3. Debug: Use Chrome DevTools (F12) to inspect elements, view console errors, or test JavaScript.

Key Points
HTML5 Recap
  • What: Structures web content with semantic tags.
  • Why: Improves accessibility, SEO, and maintainability.
  • How: Use tags like <form>, <ul>, and attributes like required.
CSS3 Recap
  • What: Styles and layouts web content.
  • Why: Enhances user experience and supports responsive design.
  • How: Use selectors, Flexbox, media queries, and transitions.
JavaScript Recap
  • What: Adds interactivity and dynamic behavior.
  • Why: Enables real-time updates and user engagement.
  • How: Manipulate the DOM, handle events, and use localStorage.
Integration Recap
  • What: Combines HTML5, CSS3, and JavaScript for a complete web app.
  • Why: Delivers structured, styled, and interactive experiences.
  • How: HTML5 for structure, CSS3 for style, JavaScript for logic.

Final Output
When trainees run the app:

  • Visual: A centered form with a green “Add Task” button, a white task list with red “Delete” buttons, and a responsive layout.
  • Functionality: Users can add tasks, delete them, and see them persist after refresh.
  • Responsive: On mobile, the form stacks vertically for usability.

Comments

Post a Comment

Popular posts from this blog

Interview Tips: Dot NET Framework vs Net CORE

Image
Interview Tips: Dot NET Framework vs Net CORE .NET Framework What :  It's a software development framework created by Microsoft, mainly used for building Windows applications. Why :  It has been around for a long time and is very reliable for building large, complex applications especially for enterprises. How :  You use it to build applications that run exclusively on Windows, making use of a vast array of built-in libraries and features. Why Not :  It can't be used for cross-platform applications, so if you need your application to run on other operating systems like macOS or Linux, .NET Framework isn't the right choice. .NET Core What :  It's a newer, open-source, and cross-platform framework from Microsoft, designed for modern app development. Why :  It's lightweight, high-performance, and can run on multiple operating systems (Windows, macOS, Linux). How :  You use it to build modern, scalable, and quickly deployable applications, especially cloud...
Read more

FREE Webinar: Run Your Own Independent DeepSeek LLM

Image
Faith Infotech Academy, Technopark invites you to an exclusive FREE webinar on "Run Your Own Independent DeepSeek LLM" , where you’ll learn how to deploy and manage DeepSeek LLM effectively. Speaker:  Abhilash Nelson  Trainer & Researcher in AI & Machine Learning  An expert in AI and machine learning, Abhilash will guide you through the process of setting up and running your own independent DeepSeek LLM, empowering you with insights into model deployment, fine-tuning, and real-world applications. What You’ll Learn: ✅ Understanding DeepSeek LLM and its capabilities ✅ Setting up DeepSeek LLM on your own infrastructure ✅ Fine-tuning and optimizing the model for various applications ✅ Use cases and practical demonstrations Key Takeaways: ✅ Mastering DeepSeek LLM for Developers ✅ Boost Your VS Code workflow ✅ Learn to Run DeepSeek locally for AI assistance 📅 Date: 6 February 2025, Thursday 🕒 Time:  10.00 to 11.00 AM 📍 Mode: Online (Webinar link will be shar...
Read more

Delegates and Events

1. What are Delegates in C#? Explain: Delegates are type-safe function pointers. They act as a placeholder for methods that have a specific signature (return type and parameters). Analogy: Imagine a delegate as a contract. It specifies the "shape" of the method it can hold. Any method that fits that shape (same return type and parameters) can be assigned to the delegate. Example: public delegate int MathOperation(int x, int y);  // Define a delegate // Methods that match the delegate signature public int Add(int x, int y) { return x + y; } public int Subtract(int x, int y) { return x - y; } // Use the delegate MathOperation operation = Add; // Assign the Add method to the delegate int result = operation(5, 3); // Call the method through the delegate 2. What are Events in C#? Explain: Events are a mechanism for broadcasting notifications to interested parties (subscribers). They are built upon delegates. Analogy: Imagine an event as a doorbell. When someone presses the d...
Read more