WRIT40363_2026

WRIT 40363: Introduction to Web Applications

Fall 2026 Course Materials

Overview

This repository contains course materials for WRIT 40363: Introduction to Web Applications at Texas Christian University. The course introduces foundational web development — HTML, CSS, JavaScript, version control, and deployment — through a sequence of labs that build four projects.

Learning Objectives

Students will learn to:

• Create semantic, accessible HTML documents
• Style web pages with modern CSS (design tokens, Flexbox, Grid, responsive layout)
• 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

WRIT40363_2026/
├── docs/                       # Canonical course site (served as a real site)
│   ├── index.html              # Home
│   ├── schedule.html, projects.html, decks.html, resources.html, tools.html, ai.html
│   ├── labs/project1/*.html    # Project 1 lab pages
│   ├── labs/project2/*.html    # Project 2 lab pages
│   ├── assignments/*.html      # Project 1 & 2 prompts, worksheets, guides
│   ├── styles.css, nav.js      # Shared site stylesheet + nav script
│   └── images/
├── slidev/                     # New deck experiments and standalone rebuilds
│   ├── deck05-standalone/      # Deck 05 — standalone HTML/CSS/JS rebuild
│   ├── deck06-standalone/      # Deck 06 — standalone HTML/CSS/JS rebuild
│   ├── deck05/                 # Deck 05 — original Slidev prototype
│   └── deck06/                 # Deck 06 — original Slidev prototype
├── course_content/             # Teaching material sources
│   ├── labs/
│   │   ├── project1/           # Portfolio (LAB01–LAB10.5) — published via docs/
│   │   ├── project2/           # Local Favorites Tracker (LAB11–LAB15) — published via docs/
│   │   ├── project3/           # Personal Data Dashboard (LAB16–LAB20)
│   │   ├── project4/           # Project Zed AI-assisted workshop
│   │   └── convert_lab.py      # Canonical Markdown→HTML converter
│   ├── styles/                 # Shared lab CSS template
│   ├── slide_decks/            # Legacy hand-rolled HTML decks (Decks 05–14)
│   ├── quizzes/
│   └── interactive_demos/
├── course_admin/               # Instructor-facing administrative materials
├── student_resources/          # Student-facing assignments and setup guides
│   └── assignments/            # Major project prompts (MD sources)
├── templates/                  # Starter code for each project
├── course_planning/            # Course development documents
└── archived/                   # Deprecated content + prior-semester resources

Authoring Systems

This repository uses three Markdown-fronted authoring pipelines, each specialized:

• Labs — Markdown sources in course_content/labs/, converted via convert_lab.py. Supports two output targets: --target docs (for the docs/ site) and --target d2l (for D2L embeds).
• Slide decks — Legacy hand-rolled HTML decks remain in course_content/slide_decks/. Decks 05 and 06 also have standalone rebuilds in slidev/deck05-standalone/ and slidev/deck06-standalone/. These standalone rebuilds deliberately avoid the Slidev client because Slidev v0.49.29’s Goto dialog did not close reliably with Esc in Chrome on macOS; the rebuilt decks use a small local HTML/CSS/JS navigation layer whose g jump dialog closes correctly with Esc.
• Textbook — Authored in Quarto. (Substantive textbook authoring is a deferred workstream.)

Lab Progression

Twenty labs build four projects. Project 1 and Project 2 publish through the docs/ site; Project 3 and Project Zed currently use D2L embeds.

Project 1: Personal Portfolio (LAB01–LAB10.5)

1. LAB01 — First HTML & VS Code Setup
2. LAB02 — File Organization & Web Concepts
3. LAB03 — Git, HTML Foundations
4. LAB04 — Links, Images, Lists
5. LAB05 — Base CSS Foundation (4-section file structure + design tokens introduced)
6. LAB06 — CSS Typography & Polish
7. LAB07 — Flexbox Layout Systems
8. LAB08 — Flex to Grid Transition
9. LAB09 — GitHub Pages Deployment
10. LAB10 — Media Queries & Accessibility
11. LAB10.5 — Typography & Design Polish

Project 2: Local Favorites Tracker (LAB11–LAB15)

1. LAB11 — HTML/CSS Foundation (fresh :root token set for Project 2)
2. LAB12 — JavaScript Fundamentals & Variables
3. LAB13 — Functions & DOM Manipulation
4. LAB14 — Arrays, Objects & Event Handling
5. LAB15 — Forms, localStorage & Deploy

Project 3: Personal Data Dashboard (LAB16–LAB20)

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

Project Zed: AI-Assisted Capstone

• LAB_ZED — Introduction to AI pair programming and Project Zed planning

Getting Started

For Students

1. Clone this repository: git clone https://github.com/TCU-DCDA/WRIT40363_2026.git
2. Open the course site at docs/index.html (or its deployed URL)
3. Begin with LAB01 from the Projects page

For Instructors

1. Review course_admin/ for teaching guides and rubrics
2. Lab and assignment sources live in course_content/labs/ and student_resources/assignments/
3. Regenerate site HTML with course_content/labs/convert_lab.py and student_resources/assignments/convert_project_to_html.py

Technologies Covered

• Frontend: HTML5, CSS3 (custom properties, Flexbox, Grid, responsive design), JavaScript (ES6+)
• APIs & data: fetch(), JSON, async/await, localStorage
• Tools: VS Code, Git, GitHub, GitHub Pages
• Concepts: Design tokens, accessibility, semantic markup, theme systems, AI-assisted development

Assessment

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

• Labs — Sequential coding exercises with detailed feedback
• Projects — Four major applications with self-assessment and reflection
• Participation — Class engagement, peer review, and collaborative learning

Contributing

This is an active educational repository. Suggestions and improvements are welcome via fork and pull request.

License

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

Contact

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

---

Development Notes

Lab HTML generation:

# Project 1 & 2 (docs/ site target)
cd course_content/labs/project1/
python3 ../convert_lab.py LAB05_base_css_foundation --target docs --output ../../../docs/labs/project1/LAB05_base_css_foundation.html

# Project 3 & Zed (D2L embed target, default)
cd course_content/labs/project3/
python3 ../convert_lab.py LAB16_fetch_api_json_basics

The converter reads <basename>.md and writes HTML; the docs target wears the docs/ chrome and links to docs/styles.css, while the d2l target injects styles inline from course_content/styles/d2l-lab-template.css.

See CLAUDE.md for detailed content creation workflow, session history, and current priorities.

---

Last updated: May 22, 2026

This site is open source. Improve this page.