Gallery
Share
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

megaphone

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>

⁠
image.png
⁠
⁠

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.


minus

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 */
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.