WRIT40363_2026

WRIT 40363: Introduction to Web Applications

Fall 2025 Course Materials & Interactive Textbook Development

📚 Overview

This repository contains comprehensive course materials for WRIT 40363: Introduction to Web Applications at Texas Christian University. The course provides students with foundational skills in web development, covering HTML, CSS, JavaScript, and modern web development practices.

🎯 Learning Objectives

Students will learn to:

Create semantic, accessible HTML documents
Style web pages with modern CSS techniques (Flexbox, Grid, responsive design)
Implement interactive functionality with JavaScript
Use version control with Git and GitHub
Deploy web applications using GitHub Pages
Apply design principles for user-friendly interfaces

📁 Repository Structure

40363_2025/
├── course_content/           # Primary course materials
│   ├── labs/                # Projects 1-3 lab sequence + Project 4 workshop
│   │   ├── project1/       # Portfolio project labs (LAB01-LAB10.5)
│   │   ├── project2/       # Local Favorites Tracker labs (LAB11-LAB15)
│   │   ├── project3/       # Personal Dashboard labs (LAB16-LAB20)
│   │   └── project4/       # Project Zed AI-assisted app workshop
│   ├── styles/             # Shared CSS templates for D2L embeds
│   │   ├── d2l-lab-template.css
│   │   └── d2l-resource-template.css
│   ├── quizzes/            # Assessment materials
│   ├── slide_decks/        # Lecture presentations
│   └── interactive_demos/  # Live code examples
├── course_admin/           # Administrative documents (RUBRIC, style guides, instructor materials)
│   └── instructor_guides/  # Teaching resources
├── student_resources/      # Student support materials
│   └── assignments/       # Major project assignments
├── templates/             # Code templates and starter files
│   ├── assignment_template/  # Lab-style assignment template
│   ├── project2-starter/  # Favorites tracker starter template
│   └── project3-starter/  # Personal Dashboard starter template
├── course_planning/       # Course development documents
└── archived/             # Previous versions and deprecated content

🔬 Lab Progression

The course follows a carefully structured 20-lab progression for Projects 1-3, followed by Project 4: Project Zed, an AI-assisted capstone web application.

Part I: Foundations (Labs 1-6)

LAB01: First HTML & VS Code Setup
LAB02: File Organization & Web Concepts
LAB03: Git, HTML Foundations
LAB04: Links, Images, Lists
LAB05: Base CSS Foundation
LAB06: CSS Typography & Polish

Part II: Layout & Design (Labs 7-11.5)

LAB07: Flexbox Layout Systems
LAB08: Flex to Grid Transition
LAB09: GitHub Pages Deployment
LAB10: Media Queries & Accessibility 10.5. LAB10.5: Typography & Design Polish
LAB11: Project 2 HTML Foundation & Basic CSS 11.5. LAB11.5: Project 2 CSS Completion & Polish

Part III: JavaScript & Interactivity (Labs 12-15)

LAB12: JavaScript Fundamentals & Variables
LAB13: Functions & DOM Manipulation
LAB14: Arrays, Objects & Event Handling
LAB15: Forms, localStorage & Project Prep

Part IV: Advanced JavaScript & APIs (Labs 16-20) - Project 3

LAB16: fetch() API & JSON Data Basics
LAB17: Quotes Widget & Random Selection
LAB18: Tasks Widget & Dashboard Integration 18.5. LAB18.5: CSS Refactoring & Variables
LAB19: Theme Toggle & GitHub Pages Deployment
LAB20: Polish & Accessibility (Optional)

Part V: AI-Assisted Development - Project 4 / Project Zed

Project Zed: A new AI-assisted web application that extends skills from Projects 1-3
LAB_ZED: Introduction to AI pair programming and Project Zed planning

🚀 Getting Started

For Students:

Clone this repository: git clone https://github.com/TCU-DCDA/40363_2025.git
Navigate to course_content/labs/ to begin with LAB01
Follow the lab instructions sequentially
Submit work through D2L as directed

For Instructors:

Review the course_admin/ directory for teaching guides
Customize materials as needed for your section
Use the provided rubrics and assessment tools

📖 Course Material Development

This repository contains production-ready course materials with:

D2L-optimized HTML: All labs converted to HTML with proper code lineation for LMS embedding
Shared CSS Templates: Centralized styling ensures consistency across all materials
Weekly Resources: Curated learning resources organized by week
Four Major Projects:
- Project 1: Personal Portfolio Website (LAB01-LAB10.5)
- Project 2: Local Favorites Tracker (LAB11-LAB15)
- Project 3: Personal Data Dashboard (LAB16-LAB20)
- Project 4 / Project Zed: AI-Assisted Web Application

See CLAUDE.md for detailed content creation workflow and ONLINE_TEXTBOOK_DEVELOPMENT_PLAN.md for long-term textbook development roadmap.

🛠️ Technologies Covered

Frontend: HTML5, CSS3, JavaScript (ES6+)
Tools: VS Code, Git, GitHub, GitHub Pages
Concepts: Responsive Design, Accessibility, Version Control, Web Standards

📋 Assessment

This course uses ungrading: Students receive narrative feedback and engage in self-assessment rather than traditional point-based grading.

Labs: 20 hands-on coding exercises with detailed feedback
Projects: 4 major applications with self-assessment and reflection
Participation: Class engagement, peer review, and collaborative learning

🤝 Contributing

This is an active educational repository. Contributions, suggestions, and improvements are welcome:

Fork the repository
Create a feature branch
Submit a pull request with detailed description

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

Instructor: [Add instructor information]
Course: WRIT 40363-045, Fall 2025
Institution: Texas Christian University

🔧 Development Tools

HTML/CSS Generation:

Python conversion scripts in /course_content/labs/project1/, project2/, and project3/
Converts Markdown labs to D2L-ready HTML with proper code lineation
Uses shared CSS templates from /course_content/styles/

Usage:

# Single canonical script lives at course_content/labs/convert_lab.py
cd course_content/labs/project2/
python3 ../convert_lab.py LAB13_functions_dom_manipulation

The script reads <basename>.md and writes <basename>.html in the current directory, with CSS and JS injected from course_content/styles/.

See CLAUDE.md for detailed workflow documentation.

Last updated: November 12, 2025

This site is open source. Improve this page.