This syllabus is subject to change based on specific class needs, especially the schedule. Significant deviations will be discussed in class. Individual exceptions to the policies and schedule are granted only in cases of true emergency. Please make arrangements with me if an emergency arises.
(Despite the official title, this course is not really about “design”, at least not visual design.)
This course provides a deep, systems-level exploration of web application development, intended for computer science majors. The curriculum moves beyond the superficial use of high-level frameworks to cultivate a foundational understanding of the underlying protocols, architectures, and computer science principles that make the modern web possible. Topics include the HTTP protocol stack, data representation and semantics (HTML, CSS), client-side programming within the browser as a runtime environment (JavaScript, DOM API), server-side logic and request handling, database systems and object-relational mapping, RESTful API design, and modern full-stack development paradigms. The course is intensely hands-on, emphasizing practical application of theoretical concepts, and culminates in a significant, student-led capstone project.
Upon successful completion of this course, students will possess the ability to:
While these are the goals, be aware that this it the first iteration of this course; we may not hit all of them.
The course follows a narrative of increasing complexity, mirroring the historical evolution of the web itself. We begin with a single, static document served over a network. We then make that document interactive, connect it to a server with a persistent memory, and finally, rebuild the entire system using modern, component-driven architectural patterns. This bottom-up approach ensures that students understand the why behind each layer of abstraction, rather than simply learning to use a tool without context.
To achieve this depth, a deliberate tradeoff is made: we will focus deeply on a representative tool from each major category rather than providing a superficial survey of all available options. For example, we master one backend framework (Flask), one relational database paradigm (SQL), and one frontend component library (React). This approach teaches the transferable principles of server-side development, database interaction, and component-based UI, which are far more valuable and durable than expertise in any single, transient technology.
There is no required textbook, as I have yet to find one that goes deeply enough, and focuses on the appropriate topics, for computer science majors.
We will often use the MDN Web Docs. Other sources – all freely available online – will be linked to as necessary.
The weekly workload for this course will vary by student and by week but should be about 12 hours per week on average. The following table provides a rough estimate of the distribution of time over different course components for a 16 week semester, as well as detailing the type, amount, and relative value of all assignments.
| Category | Amount | Final Grade Weight | Average Time/Week (Hours) |
|---|---|---|---|
| Lectures | 48 | 5% (Participation) | 2.5 |
| Project Stages | 8 | 55% | 6.5 |
| Quizzes | 5–7 | 10% | - |
| Midterm Exam | 1 | 15% | - |
| Exam/Quiz Study | - | - | 1.5 |
| Final Project Presentation | 1 | 15% | 0.5 |
| Reading/Unstructured Study | - | - | 1 |
| 12 |
Your final grade is based on a weighted average of particular assignment categories. You can estimate your current grade based on your scores and these weights. You may always visit the instructor outside of class to discuss your current standing. Assignments and final grades use a standard grading scale shown below and will not be curved except in rare cases when deemed necessary by the instructor.
This courses uses a standard grading scale. Assignments and final grades will not be curved except in rare cases when its deemed necessary by the instructor. Percentage grades translate to letter grades as follows:
| Score | Grade |
|---|---|
| 94–100 | A |
| 90–93 | A- |
| 88–89 | B+ |
| 82–87 | B |
| 80–81 | B- |
| 78–79 | C+ |
| 72–77 | C |
| 70–71 | C- |
| 68–69 | D+ |
| 62–67 | D |
| 60–61 | D- |
| 0–59 | F |
You are always welcome to challenge a grade that you feel is unfair or calculated incorrectly. Mistakes made in your favor will never be corrected to lower your grade. Mistakes made not in your favor will be corrected. Basically, after the initial grading your score can only go up as the result of a challenge*.
You are always welcome to challenge a grade that you feel is unfair or calculated incorrectly. Mistakes made in your favor will never be corrected to lower your grade. Mistakes made not in your favor will be corrected. Basically, after the initial grading your score can only go up as the result of a challenge.
Project Stages: The course is built around eight iterative project stages, where students build the same application multiple times using progressively more sophisticated technologies. Each stage is a complete, working version of the student’s chosen application, moving from static HTML/CSS through React and Next.js to modern AI-assisted development. Students must be able to explain all code they submit during random spot checks.
Quizzes: Short, low-stakes quizzes will be administered in class to ensure students are keeping up with the readings and can recall key definitions and concepts from recent lectures.
Midterm Exam: A written exam covering the foundational concepts from the first half of the course (Units 1-3). It will assess understanding of HTML/CSS principles, the DOM, JavaScript fundamentals, the HTTP protocol, and server-side architecture.
Final Project Presentation: A retrospective presentation where students demonstrate the evolution of their project across multiple technology stacks, articulating the trade-offs between different approaches and reflecting on their learning journey throughout the semester.
Participation: Your participation grade is based on a variety of activities, such as active engagement in class discussions, asking thoughtful questions, answering in-class questions (especially through Socrative, and presenting in-class demos of assignment progress.
Socrative questions will cover portions of the text that were assigned as reading and will range from simple checks to see if the reading was done to more challenging questions that follow from a close examination of the reading. For the most part, the only requirement is to provide an answer to every question and participate in the resultant discussions. On occasion, questions will be evaluated for their correctness and performance on 3 these questions will also factor into the course participation grade. Students who do the reading and start the homework as soon as possible will have very little to worry about.
Project Spot Checks: I will occasionally randomly select a student and have them present elements of their current project stage. Students are expected to be able to explain the purpose of any piece of their code, as well as provide a clear explanation of how it works. If a student cannot explain code they submitted, or does not understand why particular code exists in their project, this may indicate a violation of academic integrity (such as inappropriate use of AI or copying code without understanding). Even if not a formal academic integrity violation, inability to explain one’s own code may result in a reduced grade for that project stage. Students should ensure they understand every line of code they submit.
AI Usage Policy: Unless explicitly stated otherwise for a specific assignment, students are expected NOT to use AI tools for generating code in their project stages. AI may be used to explain concepts or help understand existing code snippets, but should not be used to generate solutions, write functions, or complete coding tasks. Later in the semester, there may be a specific assignment where AI tool usage is explicitly permitted to allow comparison with hand-crafted implementations.
While there is no strict attendance policy, the course participation grade is based in large part on engagement. Absent students cannot participate in Socrative sessions or explain their code. Students should avoid unexcused absences, as defined in the college-wide absence policy. Whenever possible, let the instructor know of the absence before it occurs. When unexcused absences do occur, it is the student’s responsibility to make up for the lost class time and to seek the permission of the instructor to hand-in or complete assignments that are late due to an unexcused absence.
This course is designed around the assumption that students engage in new ideas before they’re covered in class meetings. This means doing assigned reading, taking a stab at homework problems, and as a result coming to class and lab with some understand about a new idea or, just as likely, with a host of questions about something encountered in the reading and homework. Not attending class and putting off work to the point that an extension is needed are signs that a student isn’t holding up their end of the bargain and is not prepared to participate in class.
Late assignments: You have each been allotted a total of 5 late days. You may apply these to any homework or programming assignment (NOT exams, quizzes, labs, or reading assignments) you see fit and turn in your solutions with no penalty. Each late days gives you exactly 24 extra hours from the original due date and time. However, you may use at most 2 late days on any individual assignment. The whole point here is to give you some flexibility that allows for things like illnesses, long trips, and the like. I am unlikely to grant further extensions. You must notify me if you will use late days, and how many, BEFORE the assignment is due. Late assignments (beyond any applied late days) will be subject to a grade reduction at my discretion. While you should expect a reasonable penalty for late work, know that I will NEVER give you a 0 for late work as long as it is turned in before the final exam.
Academic dishonesty: Monmouth College’s official policy on academic dishonesty can be found here. You are responsible for reading and complying with that policy.
Note: Use of ChatGPT or similar AI tools is not allowed in this class unless explicitly allowed for a particular assignment. While such AI models can be effective tools, they should be utilized only at certain stages of the learning process, and only after a thorough discussion of their use.
In this course, any violation of the academic honesty policy will have varying consequences depending on the severity of the infraction as judged by the instructor. Minimally, a violation will result in an “F” or 0 points on the assignment in question. Additionally, the student’s course grade may be lowered by one letter grade. In severe cases, the student will be assigned a course grade of “F” and dismissed from the class. All cases of academic dishonesty must be reported to the Associate Dean who may decide to recommend further action to the Admissions and Academic Status Committee, including suspension or dismissal. It is assumed that students will educate themselves regarding what is considered to be academic dishonesty, so excuses or claims of ignorance will not mitigate the consequences of any violations
Collaboration: We encourage you to make use of the resources available to you – it is fine to seek help from a friend, tutor, instructor, internet, etc. However, copying of answers and any act worth of the label “cheating” is never permissible! In addition to listing your sources and collaborators, you should be producing your own writeup in your own words. By “your own words,” we mean you should be producing the text yourself, without some external aid. Verbatim copying of text is specifically disallowed, but so is taking a source and rearranging some phrases and changing some variable names to create a derivative version! Such behavior is definitely NOT “using your own words.” It does not matter if you helped contribute to this source text with others, since then you are still not the sole author of the text. The point of collaborating on an assignment is not to produce a jointly authored set of solutions, since that violates the course policies. Instead, it is to help you solve the problems, which sometimes involve a bit of creativity. After you have jointly come up with the ideas you need to solve the problems, though, you should part ways with your group and sit down to do the writing by yourself. I also advise against sharing the writeup you submit with others, since if someone else uses your text as a source for their own solution (with or without your permission), you will also be implicated in the violation of the academic integrity policy. In any case, if two nearly identical solutions are received, we have no way of tell which is the original, and the policy is to not award credit for either submission.
Electronic devices: Do not use your phone or other devices in class except where necessary. Any computer or tablet usage should be related to the course. If a device is not being used for Zoom or Socrative it should be put away and turned on silent. Other usage is rude and distracting to others.
General expectations: In short, I expect you to be respectful of others and take responsibility for your own learning. You are here to learn, so work hard and be professional.
Just attending class is not sufficient to truly learn the material. Read the text, use the resources available at Monmouth College, and go beyond the material.
If you miss class, you are responsible for everything covered on that day. College is, in some sense, your job. Take pride in creating quality work. Staple your assignments, label problems, and present your answers neatly and orderly.
Your job is to convince me that you have learned the material – show your work! Even if you do not know a particular answer, guide me through your thought process.
Unit 1: The Document Web: Structure, Style, and Deployment (Weeks 1-3)
Unit 2: The Interactive Web: Client-Side Programming (Weeks 3-5)
Unit 3: The Dynamic Web: Servers, HTTP, and State (Weeks 6-8)
Unit 4: The Persistent Web: Relational Databases (Weeks 9-10)
SELECT, INSERT, UPDATE, DELETE, JOINs), data modeling and schema design, database normalization, and using an Object-Relational Mapper (ORM) like Flask-SQLAlchemy to abstract database interactions in Python code.Unit 5: The Component-Based Web: SPAs and Modern Frontend (Weeks 11-13)
Unit 6: The Full-Stack Web: Advanced Architectures and Tooling (Weeks 14-16)
The following tentative calendar should give you a feel for how work is distributed throughout the semester. Assignments and events are listed in the week they are due or when they occur. This calendar is subject to change based on the circumstances of the course.
Note: All readings should be done before the class period in which they are listed below.
| Date | Topic | Assignment and Readings |
|---|---|---|
| Wed 08/20 (Week 1) | Intro and Logistics | This syllabus. How the Web Works |
| Fri 08/22 | HTML Fundamentals | Structuring content with HTML (including “Basic HTML syntax”), Project out |
| Mon 08/25 (Week 2) | CSS: Box Model, Selectors | CSS Styling Basics |
| Wed 08/27 | CSS Layout: Flexbox | CSS Layout |
| Fri 08/29 | (Quiz 1) Git, GitHub, Static Sites | 1, 2, 3, Project Proposal due |
| (Mon 09/01) (Week 3) | (Labor Day – no class) | |
| Wed 09/03 | JS: Types & Control Flow | Dynamic Scripting with JavaScript (up to Functions) |
| Fri 09/05 | JS: Functions & Objects | 1, 2, 3, 4, Stage 1 due |
| Mon 09/08 (Week 4) | DOM: Traversal & Manipulation | DOM scripting |
| Wed 09/10 | Event-Driven Programming | Events, Bubbling |
| Fri 09/12 | (Quiz 2) Workshop: Building an Interactive UI | |
| Mon 09/15 (Week 5) | Asynchronous JS | Async (first 3) |
| Wed 09/17 | fetch API, JSON |
Fetch, JSON |
| Fri 09/19 | Client-Side Wrap Up | JS Debugging, Stage 2 due |
| Mon 09/22 (Week 6) | Intro to Servers, Flask | How does the Internet work |
| Wed 09/24 | HTTP: Requests, Responses, Headers | |
| Fri 09/26 | (Quiz 3) Flask Routing, Jinja2 Templates | |
| Mon 09/29 (Week 7) | Handling Forms, POST | |
| Wed 10/01 | State Management: Cookies & Sessions | |
| Fri 10/03 | REST API Design Principles | Stage 3 due |
| Mon 10/06 (Week 8) | Midterm Review | |
| Wed 10/08 | Midterm Exam | |
| (Fri 10/10) | (Fall Break – no class) | |
| Mon 10/13 (Week 9) | Relational Databases & SQL Fundamentals | |
| Wed 10/15 | SQL Joins & Data Modeling | |
| Fri 10/17 | Flask-SQLALchemy | Stage 4 due |
| Mon 10/20 (Week 10) | Building a CRUD API | |
| Wed 10/22 | Database Wrap Up | |
| Fri 10/24 | (Quiz 4) Frameworks, SPAs, React | |
| Mon 10/27 (Week 11) | React: Components, JSX, Props | |
| Wed 10/29 | React: State & Handling Events | |
| Fri 10/31 | React Workshop: Hands-on Practice | Stage 5 due |
| Mon 11/03 (Week 12) | Component Lifecycle & Effects | |
| Wed 11/05 | Client-Side Routing with React Router | |
| Fri 11/07 | (Quiz 5) React-Backend Integration Workshop | |
| Mon 11/10 (Week 13) | Connecting React to Backend APIs | |
| Wed 11/12 | Testing Fundamentals (Unit Tests, API Testing) | |
| Fri 11/14 | Next.js Introduction & SSR Concepts | Stage 6 due |
| Mon 11/17 (Week 14) | Next.js: File-based Routing & API Routes | |
| Wed 11/19 | Next.js: Server-Side Rendering & Data Fetching | |
| Fri 11/21 | Implementing Login/Logout | |
| Mon 11/24 (Week 15) | (Quiz 5) Securing API Routes | |
| (Wed 11/26) | (Thanksgiving Break – no class) | |
| (Fri 11/28) | (Thanksgiving Break – no class) | |
| Mon 12/01 (Week 16) | AI Tools & Development Workshop | Stage 7 Due |
| Wed 12/03 | Deployment & Production | |
| Fri 12/05 | Career & Portfolio | |
| Wed 12/10 8 AM – 11:00 AM | Final Exam Slot – Project Demos | Stage 8 Due Mon 12/08 8 AM |
The Academic Support Office offers free resources to assist Monmouth College students with their academic success. Programs include supplemental instruction for difficult classes, drop-in and appointment tutoring, and individual academic coaching. The office is here to help students excel academically, since everyone can work toward better grades, study skills, and time management. Please email succeed@monmouthcollege.edu for assistance.
If you need course adaptions or accommodations because of a disability, please make an appointment with the Accessibility Services Office (ASO) (access@monmouthcollege.edu 309-457-2257) as soon as possible. The accessibility of this course for every learner is important to me. If at any time you experience a barrier to learning, please bring it to my attention and I will do my best to address it.
Office of Student Well-Being & Student Health Center: Your well-being is crucial to your academic success and personal growth. That is why our campus provides free resources to support your physical and mental health needs. If you would like schedule an appointment for counseling or need further health care assistance, please reach out to the Office of Student Well-Being at wellness@monmouthcollege.edu.
Student Health Center: Hours: M-F, 9am-1pm Location: McMichael Residence Hall, Lower level Call: 309-536-6055 Email: healthcenter@monmouthcollege.edu
Counseling Services: Hours: M-F 9am-4:30pm Location: CSB 393, Administrative Area Call: 309-457-2316 Email: wellness@monmouthcollege.edu
TimelyCare: 24/7 free virtual access to medical and mental health care anytime. Visit: timelycare.com/monmouthcollege