Skip to content
Stone Age: The Birth of Artistic ExpressionArtwork: Lascaux Cave PaintingsLesson Focus: The emergence of symbolic thinking and its role in the development of early human societies.HTML Elements: Basic HTML structure, image embedding.Ancient Greece: The Foundation of Western PhilosophyArtwork: The ParthenonLesson Focus: Classical architecture and its reflection of Greek philosophical ideals of harmony, proportion, and rationality.HTML Elements: Div elements, CSS basics for layout.Roman Empire: Engineering and EmpireArtwork: The PantheonLesson Focus: The intersection of engineering prowess and religious dedication, reflecting Roman values.HTML Elements: Semantic HTML, introduction to forms.Medieval Period: The Gothic CathedralArtwork: Notre-Dame de ParisLesson Focus: The Gothic style as an expression of medieval spirituality and scholasticism.HTML Elements: Tables, advanced CSS for complex layouts.Renaissance: Humanism and PerspectiveArtwork: The School of Athens by RaphaelLesson Focus: The revival of classical ideals and the development of linear perspective, reflecting humanist philosophy.HTML Elements: Multimedia embedding, responsive design principles.Baroque Period: Dramatic Expression and AbsolutismArtwork: The Ecstasy of Saint Teresa by BerniniLesson Focus: The Baroque style's emotional intensity and its reflection of the Counter-Reformation.HTML Elements: CSS animations, advanced positioning.Enlightenment: Reason and RevolutionArtwork: The Death of Socrates by Jacques-Louis DavidLesson Focus: Enlightenment ideals of reason, individualism, and social contract theory.HTML Elements: JavaScript basics, interactive elements.Romanticism: Emotion and NatureArtwork: The Wanderer above the Sea of Fog by Caspar David FriedrichLesson Focus: The Romantic emphasis on emotion, nature, and individual experience.HTML Elements: Parallax scrolling, advanced CSS effects.Industrial Revolution: Progress and PessimismArtwork: The Hay Wain by John ConstableLesson Focus: The tension between pastoral ideals and industrial progress.HTML Elements: SVG graphics, data visualization techniques.Modernism: Innovation and FragmentationArtwork: Les Demoiselles d'Avignon by Pablo PicassoLesson Focus: The break from tradition and exploration of new artistic forms reflecting modernist thought.HTML Elements: HTML5 new elements, media queries.Postmodernism: Plurality and ParodyArtwork: The AT&T Building by Philip JohnsonLesson Focus: Postmodern architecture's eclecticism and questioning of grand narratives.HTML Elements: CSS Grid, advanced layout techniques.Contemporary Period: Digital and Global ArtArtwork: The Weather Project by Olafur EliassonLesson Focus: The interplay between technology, environment, and globalism in contemporary art.HTML Elements: Web APIs, integrating third-party services.
Introduction (10 minutes)Brief historical context of the epoch.Overview of the selected artwork and artist/architect.Art and Philosophy Discussion (20 minutes)In-depth analysis of how the artwork reflects the philosophical and scientific developments of its time.Interactive discussion on the ethical implications and societal impact.Technical HTML/CSS/JavaScript Lesson (30 minutes)Hands-on coding session focusing on specific HTML/CSS/JavaScript elements relevant to the epoch.Building a web page section that showcases the artwork and integrates historical and philosophical analysis.Project Work (30 minutes)Students work on their web pages, applying the day's lessons.Instructor provides individual support and feedback.Presentation and Discussion (20 minutes)Students present their web pages to the class.Group discussion and critique, focusing on both the technical and conceptual aspects of the work.
Web Page Projects: Graded on both technical proficiency and depth of analysis.Class Participation: Assessed through contributions to discussions and presentations.Final Presentation: Students present their complete website, encompassing all 12 epochs.
Primary Sources: Historical texts, philosophical writings.Art References: High-quality images of the selected artworks, architectural plans.Technical Guides: HTML, CSS, and JavaScript tutorials and references.
Understand the role of visual arts in the evolution of Western European science and philosophy.Learn HTML, CSS, and JavaScript DOM manipulation to create a multi-page website.Analyze and interpret the impact of specific artworks on European historical development.Apply web programming skills to develop and style web pages showcasing historical epochs.
Visual Studio CodeInternet AccessGitHub account for hosting the websiteArtworks from selected historical periodsCourse textbooks: "HTML5 Pocket Reference" by Jennifer Niederst Robbins and "Murach’s HTML5 and CSS3" by Anne Boehm & Zak Ruvalcaba
Introduction to the Lesson Plan and Objectives:Overview of the 12 pivotal epochs in European history.Explanation of how each epoch will be represented by an artwork.Outline of the website project and final deliverables.Epoch 1: Stone Age (Prehistoric Art):Artwork: Chauvet Cave PaintingsWeb Development Focus: Introduction to HTML structure.Activities: Create an HTML page with headings, paragraphs, and images.Epoch 2: Classical Antiquity (Greek and Roman Art):Artwork: Parthenon SculpturesWeb Development Focus: Styling with CSS.Activities: Apply CSS styles to the HTML page created in Epoch 1.Epoch 3: Early Middle Ages (Byzantine Art):Artwork: Hagia Sophia MosaicsWeb Development Focus: CSS Grid and Flexbox.Activities: Create a layout for displaying artwork information using CSS Grid and Flexbox.Epoch 4: High Middle Ages (Gothic Art):Artwork: Chartres Cathedral Stained GlassWeb Development Focus: Advanced CSS techniques.Activities: Implement CSS transitions and animations to highlight art features.Epoch 5: Renaissance (Italian Renaissance):Artwork: Leonardo da Vinci's The Last SupperWeb Development Focus: Introduction to JavaScript.Activities: Add JavaScript to enhance user interaction on the Renaissance page.Epoch 6: Baroque (Baroque Art):Artwork: Caravaggio's The Calling of St MatthewWeb Development Focus: DOM Manipulation.Activities: Use JavaScript to manipulate DOM elements and create interactive features.Epoch 7: Neoclassicism (Neoclassical Art):Artwork: Jacques-Louis David's The Death of SocratesWeb Development Focus: Event Handling in JavaScript.Activities: Implement event listeners to create interactive elements on the Neoclassical page.Epoch 8: Romanticism (Romantic Art):Artwork: Caspar David Friedrich's Wanderer above the Sea of FogWeb Development Focus: Form Handling.Activities: Create a form for user input and process the data using JavaScript.Epoch 9: Realism (Realist Art):Artwork: Gustave Courbet's The Stone BreakersWeb Development Focus: APIs and AJAX.Activities: Fetch data from an API and display it dynamically on the webpage.Epoch 10: Modernism (Modern Art):Artwork: Pablo Picasso's Les Demoiselles d'AvignonWeb Development Focus: Responsive Design.Activities: Ensure the website is fully responsive across different devices.Epoch 11: Postmodernism (Postmodern Art):Artwork: Andy Warhol's Campbell's Soup CansWeb Development Focus: Web Accessibility.Activities: Implement accessibility features to make the website usable for all users.Epoch 12: Space Age (Contemporary Art):Artwork: Yayoi Kusama's Infinity Mirrored RoomWeb Development Focus: Hosting on GitHub Pages.Activities: Finalize the website and deploy it on GitHub Pages.
Share
Explore
s24 June 3 Web Programming Class Plan Outline
Lesson plan that integrates aesthetics into ethics, art, and architecture into a Web Site Design.
By telling an interesting and engaging story with Digital Story tell methodologies, we will
We will weave these concepts into the context of a web page HTML design class, centered around the theme "The Western Aesthetic: An Evaluation of How Visual Arts Promoted the Evolution of Western European Science and Rational Materialistic Philosophy."
We will explore 12 pivotal epochs of European history, each marked by a significant artistic work that reflects and informs the philosophical and scientific developments of its time.
Let's begin:
Lesson Plan Overview
Objective: Students will create a series of web pages, each dedicated to one of the 12 epochs of European history, analyzing how a selected work of art or architecture reflects the philosophical and scientific advancements of its time.
Epochs and Corresponding Artworks
Detailed Lesson Structure for Each Epoch
Assessment
Final presentation of your Website will be on GIT PAGES.
Resources
This structure will guide your students through an exploration of the interplay between aesthetics, ethics, and historical development, all while honing their web design skills.
Let us embark on this journey through the annals of European history, where art and philosophy converge to shape the modern world.
Lesson Plan: Building an HTML Website with CSS and JavaScript DOM Manipulation
Course Title: MO1003 Introduction to Web Programming
Lesson Title: The Western Aesthetic: Evolution of Visual Arts in Western European History
Lesson Objectives:
Materials Needed:
Learning Points:
By following this lesson plan, you will help students gain a deep understanding of web programming while exploring the fascinating interplay between art, history, and philosophy in Western European culture.
Part One: ### Getting Started Instructions for Visual Studio Code
**Objective:**
Set up the development environment, create the directory structure for the project, and develop the initial HTML and CSS for the home landing page.
#### 1. Setting Up Visual Studio Code
**Step-by-Step Instructions:**
1. **Install Visual Studio Code:**
- Go to the [Visual Studio Code website](https://code.visualstudio.com/).
- Download the installer for your operating system (Windows, macOS, or Linux).
- Run the installer and follow the on-screen instructions to complete the installation.
2. **Install Recommended Extensions:**
- Open Visual Studio Code.
- Click on the Extensions icon in the Activity Bar on the side of the window.
- Search for and install the following extensions:
- **HTML Snippets**
- **CSS Peek**
- **JavaScript (ES6) code snippets**
- **Live Server**
- **Prettier - Code Formatter**
2. Creating the Directory Structure
**Step-by-Step Instructions:**
1. **Create a New Project Directory:**
- Open Visual Studio Code.
- Click on `File > Open Folder...`.
- Navigate to the location where you want to create your project and click on `New Folder`.
- Name the folder `WesternAestheticProject` and click `Select Folder`.
2. **Create Subdirectories and Files:**
- Inside the `WesternAestheticProject` directory, create the following subdirectories and files:
```
WesternAestheticProject/
├── css/
│ └── styles.css
├── js/
│ └── scripts.js
├── images/
├── index.html
```
3. Creating the Initial Home Landing Page
**Step-by-Step Instructions:**
1. **Open `index.html` File:**
- In Visual Studio Code, click on the `index.html` file to open it in the editor.
2. **Write the Initial HTML Structure:**
- Copy and paste the following HTML code into the `index.html` file:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Western Aesthetic Project</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Welcome to the Western Aesthetic Project</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Epochs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<h2>Introduction</h2>
<p>This website explores the pivotal epochs in European history through the lens of visual arts. Each epoch is represented by an iconic artwork, demonstrating the evolution of Western European science and philosophy.</p>
</section>
<section id="epochs-overview">
<h2>Epochs Overview</h2>
<p>Discover the key periods in Western European history and their significant contributions to art and philosophy.</p>
<ul>
<li>Stone Age (Prehistoric Art)</li>
<li>Classical Antiquity (Greek and Roman Art)</li>
<li>Early Middle Ages (Byzantine Art)</li>
<li>High Middle Ages (Gothic Art)</li>
<li>Renaissance (Italian Renaissance)</li>
<li>Baroque (Baroque Art)</li>
<li>Neoclassicism (Neoclassical Art)</li>
<li>Romanticism (Romantic Art)</li>
<li>Realism (Realist Art)</li>
<li>Modernism (Modern Art)</li>
<li>Postmodernism (Postmodern Art)</li>
<li>Space Age (Contemporary Art)</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Western Aesthetic Project. All rights reserved.</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
```
3. **Open `css/styles.css` File:**
- Click on the `styles.css` file inside the `css` directory to open it in the editor.
4. **Write the Initial CSS Styles:**
- Copy and paste the following CSS code into the `styles.css` file:
```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h1, h2 {
color: #333;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
```
5. Live Preview with Live Server:
- In Visual Studio Code, right-click on the `index.html` file and select `Open with Live Server`.
- This will open a new browser tab with a live preview of your HTML file. Any changes made to the HTML or CSS files will be automatically updated in the browser.
Summary
By following these instructions, you will have set up Visual Studio Code, created the necessary directory structure for your project, and developed the initial HTML and CSS for the home landing page of the Western Aesthetic Project.
This foundation will allow you to continue building out the project by adding more content and functionality as the course progresses.
Part 2
Develop the first set of pages for the Stone Age epoch, including HTML and CSS, and introduce basic JavaScript DOM manipulation.
Objective: 2. Epoch 1: Stone Age (Prehistoric Art)
**Step-by-Step Instructions:**
1. **Create Stone Age Directory and Files:**
- Inside the `WesternAestheticProject` directory, create a new directory named
- Create an HTML file named `stone-age.html` inside the `stone-age` directory.
Create a CSS file named `stone-age.css` inside the `css` directory.
`body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.