Explore

Introduction to Web Development

September 3 Class Lab Book: Interstellar Travels

⁠

https://coda.io/@peter-sigurdson/project-interstellar-travel-adventures-website-structure⁠

⁠

Day 01 Lesson Overview:

Introduction to Web Applications and Web Application Development

Software installation (Visual Studio Code with Live Server Extension)

How to create a new web project (creating a folder and adding an index.html page) Boilerplate code for a webpage (html, head, body)

Intro to HTML Rendering text (p, heading tags) Adding links Adding images Inserting lists (ol, ul) Inserting tables (table, tr, td)

Lesson plan outline:

]Fundamentals of web applications,

HTML, the Document Object Model (DOM), and web application development using Microsoft Visual Studio Code with the Live Server extension

Lesson 1: What are Web Applications - HTML and HTTP

Objective:

Understand what web applications are and how they work.

Learn the basics of HTML and HTTP.

Lesson Plan:

Introduction to Web Applications

Definition of a web application

Examples of web applications

Client-server architecture

Understanding HTML

Introduction to HTML

Basic structure of an HTML document (e.g., <!DOCTYPE html>, <html>, <head>, <body>)

Common HTML tags and their purposes (<h1>, <p>, <a>, <img>, <div>, etc.)

Basics of HTTP

What is HTTP?

HTTP request and response cycle

Understanding URLs, HTTP methods (GET, POST), and status codes

Interactive Activity

Create a simple HTML page using Visual Studio Code

Discuss how the browser requests this page

Q&A and Homework Assignment

Create a personal bio page using HTML

Lesson 2: HTML Document Object Model (DOM)

Objective:

Understand the HTML DOM and its importance in web development.

Lesson Plan:

Introduction to the DOM

Definition and significance of the DOM

How the DOM represents an HTML document

Exploring the DOM Tree

Structure of the DOM tree (nodes, elements, attributes)

Basic DOM properties and methods

Manipulating the DOM

Using JavaScript to manipulate DOM elements (changing styles, content, attributes)

Interactive Activity

Modify an HTML page in real-time using JavaScript to see changes in the DOM

Q&A and Practical Assignment

Modify the personal bio page to include interactive elements using JavaScript

Lesson 3: Web Application Development with Microsoft Visual Studio Code and Live Server Extension

Objective:

Learn to develop web applications using Visual Studio Code and the Live Server extension.

Materials Needed:

Visual Studio Code installed with Live Server extension

Code samples and templates

Lesson Plan:

Introduction to Visual Studio Code

Features and benefits of using Visual Studio Code

Setting up Visual Studio Code for web development

Using the Live Server Extension

Introduction to the Live Server extension

Benefits of real-time reloading for development

Developing a Simple Web Application

Step-by-step creation of a web application using HTML, CSS, and JavaScript

Using Visual Studio Code and Live Server to view changes in real-time

Best Practices and Tips

Efficient use of Visual Studio Code features (extensions, shortcuts, version control integration)

Class exercise

Build a small project in class using all learned tools and techniques

Demonstration of CSS and JavaScript.

HTML: The framing and structure of the house.

CSS: Paint, Wall-paper, visual finishings and appearance

JavaScript: The “Internet signal” between the NODES of the DOM to propogate information and events.

This code will use the local images kitten.jpg and tiger.jpg and modify the text under the images when the image changes upon button click. I'll also ensure to handle local resources correctly and dynamically update the text depending on which image is displayed.

Here's the revised HTML code:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Image Flip Example</title> <style> .image-container { text-align: center; /* Center align content */ margin-top: 50px; /* Margin at the top */ } #flipButton { padding: 10px 20px; /* Padding around the text */ font-size: 16px; /* Text size */ cursor: pointer; /* Cursor appears as a pointer */ background-color: #4CAF50; /* Background color */ color: white; /* Text color */ border: none; /* No border */ border-radius: 5px; /* Rounded corners */ } #imageCaption { font-size: 18px; color: #333; margin-top: 10px; } </style></head><body> <div class="image-container"> <img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200"> <br> <button id="flipButton" onclick="flipImage()">Flip Image</button> <h3 id="imageCaption">Your Wife before the Wedding</h3> </div>

<script> function flipImage() { var image = document.getElementById('imageToFlip'); var caption = document.getElementById('imageCaption'); if (image.src.includes('kitten.jpg')) { image.src = 'tiger.jpg'; caption.innerHTML = 'Your Wife after the Wedding'; } else { image.src = 'kitten.jpg'; caption.innerHTML = 'Your Wife before the Wedding'; } } </script></body></html>

⁠
⁠
⁠

Local Image Source: The image sources have been updated to kitten.jpg and tiger.jpg, which should be stored in the same directory as your HTML file.

Dynamic Text: The caption under the image now changes dynamically when you click the button to flip the image. This is handled by checking the current source of the image and updating the innerHTML of the caption accordingly.

JavaScript Function: The flipImage function now uses includes to check if the current image source contains 'kitten.jpg'. This method is more reliable when the full path to the image might change due to different deployment or development environments.

Style and Layout: Minor improvements to the CSS for better readability and aesthetics.

Ensure that both images (kitten.jpg and tiger.jpg) are in the same directory as this HTML file for this to work correctly when loaded in a browser.<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Flip Example</title>
    <style>
        /* Using class selector for styling the container */
        .image-container {
            text-align: center; /* Center align content */
            margin-top: 50px;  /* Margin at the top */
        }

        /* Using ID selector for styling the button */
        #flipButton {
            padding: 10px 20px; /* Padding around the text */
            font-size: 16px;   /* Text size */
            cursor: pointer;   /* Cursor appears as a pointer */
            background-color: #4CAF50; /* Background color */
            color: white; /* Text color */
            border: none; /* No border */
            border-radius: 5px; /* Rounded corners */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200">
        <br>
        <button id="flipButton" onclick="flipImage()">Flip Image</button>
    </div>

    <script>
        function flipImage() {
            var image = document.getElementById('imageToFlip');
            // Use local filenames for comparison
            if (image.src.includes('kitten.jpg')) {
                image.src = 'tiger.jpg'; // Switch to the second local image
            } else {
                image.src = 'kitten.jpg'; // Switch back to the original local image
            }
        }
    </script>
</body>
</html>

Explanation:

HTML Structure: The HTML contains a div element with the class image-container that centers the content within it and applies a margin at the top for spacing. Inside this div, there is an <img> tag with an id of imageToFlip and a <button> with an id of flipButton.

CSS Styling:

The .image-container class selector is used to style the container, centering the content and applying a margin.

The #flipButton ID selector specifically styles the button, setting its background color, text color, cursor appearance, and other properties for visual appeal and usability.

JavaScript:

The flipImage() function checks the current source of the image. If it's the initial kitten image, it changes to another kitten image upon clicking the button. If it's the second image, it switches back to the original.

This function is called when the button is clicked, demonstrating a basic interaction on the web page.

This page is an introductory example of how to interactively change an element on a web page using JavaScript along with applying specific CSS styles using class and ID selectors.

This is a practical demonstration suitable for beginners in web development to understand the dynamics of HTML, CSS, and JavaScript.

Let’s revise this html to use dynamic CSS which changes the theme and appearance of the page: warm and inviting css thematic elements when kitten is displayed. Scary and terrifying CSS thematic elements when tiger is displayed

Under JavaScript control, we will change the CSS and change the appearance of the page.

To incorporate dynamic CSS changes based on the image displayed (kitten or tiger), you can modify the HTML and add CSS to change the theme of the page dynamically.

Here's how you can set up the HTML and CSS to change the overall appearance based on which image is displayed:

HTML with Dynamic CSS

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Theme Example</title> <style id="dynamicStyle"> body { transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; }

/* Default style for the kitten (warm and inviting) */ .warm { background-color: #FFDAB9; /* peach color */ color: #6A5ACD; /* slate blue */ }

/* Style for the tiger (scary and terrifying) */ .terrifying { background-color: #2F4F4F; /* dark slate gray */ color: #DC143C; /* crimson for a scary effect */ }

.image-container { text-align: center; /* Center align content */ margin-top: 50px; /* Margin at the top */ }

#flipButton { padding: 10px 20px; /* Padding around the text */ font-size: 16px; /* Text size */ cursor: pointer; /* Cursor appears as a pointer */ border: none; /* No border */ border-radius: 5px; /* Rounded corners */ transition: background-color 0.5s ease-in-out; }

/* Default button style */ .warm #flipButton { background-color: #FA8072; /* salmon */ color: #FFFFFF; /* white */ }

/* Button style for the tiger theme */ .terrifying #flipButton { background-color: #8B0000; /* dark red */ color: #FFFF00; /* yellow */ } </style></head><body class="warm"> <div class="image-container"> <img id="imageToFlip" src="kitten.jpg" alt="Kitten Image" width="200"> <br> <button id="flipButton" onclick="flipImage()">Flip Image</button> </div>

<script> function flipImage() { var image = document.getElementById('imageToFlip'); var body = document.body; var button = document.getElementById('flipButton');

if (image.src.includes('kitten.jpg')) { image.src = 'tiger.jpg'; body.className = 'terrifying'; button.className = 'terrifying'; } else { image.src = 'kitten.jpg'; body.className = 'warm'; button.className = 'warm'; } } </script></body></html>

How It Works:

CSS Classes for Themes: Two classes, .warm and .terrifying, are defined to represent different themes. These classes are applied to the <body> element and modify the background color, text color, and other style properties to match the theme.

Dynamic Style Application: When the "Flip Image" button is clicked, the JavaScript function flipImage() toggles the image between a kitten and a tiger. Depending on the current image, it also switches the class of the <body> element to apply the corresponding theme.

Transitions: CSS transitions are added to smoothly animate the changes in background color and text color when the theme switches.

Button Styling: The button's style changes along with the theme to maintain consistent aesthetic adjustments.

This setup ensures that the theme of the webpage changes dynamically to match the content, enhancing the user's visual experience and making the interaction more engaging.

Day 2 May 7

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.

Introduction to Web Development

Lesson 1: What are Web Applications - HTML and HTTP

Lesson 2: HTML Document Object Model (DOM)

Lesson 3: Web Application Development with Microsoft Visual Studio Code and Live Server Extension

Demonstration of CSS and JavaScript.

⁠⁠⁠

Explanation:

Let’s revise this html to use dynamic CSS which changes the theme and appearance of the page: warm and inviting css thematic elements when kitten is displayed. Scary and terrifying CSS thematic elements when tiger is displayed

HTML with Dynamic CSS

How It Works:

Day 2 May 7

⁠
⁠
⁠