Course Syllabus

Course Description

This course will teach you the skills and techniques necessary for creating sophisticated and accessible interactive web applications. It focuses on the client-side languages, tools, and libraries that professionals use to build the web sites you use every day. We will learn not only the basic syntax and mechanics of web development, but also the best practices that separate professional developers from amateurs. Upon completing this course, students will be able to build robust web applications, and will have the foundation for independently learning new skills in the ever-changing world of web development. This course is intense and our expectations are high, but we will make sure that everyone, including those totally new to web programming, are able to succeed.

either CSE 123, 143, CSE 154, or CSE 163; and INFO 201

In this section, we will be trialing/experimenting with pointedly using AI tools for development. We'll cover all the skills and ideas needed for client side development—but instead of focusing on learning to write code from scratch (which is the pedagogical model computer scientists have used for decades), we'll learn the concepts by exploring and interrogating the programs produced by the LLMs. We'll play with AI coding tools and learn to evaluate their limits. We'll test what they build, figure out why it's not good (or maybe why it is!), and hone your skills in being able to understand and evaluate client-side systems. You'll still gain the same foundational background and meet the same learning outcomes as anyone else taking INFO 340, but we'll approach it from a different angle.

Learning Objectives

After completing this course, students will be able to:

• Produce web pages that are well-formed, standards-compliant, semantically rich, and universally accessible.
• Style the appearance of those pages to create intuitive, usable, and engaging experiences for human readers on different kinds of devices.
• Create interactive and feature-rich web applications leveraging existing programming frameworks, libraries, and APIs.
• Interpret software documentation in order to reuse packages, APIs, and tools for web development.
• Use development tools to automatically manage, implement, and validate web applications.
• Use version control systems to collaborative manage software projects.
• Critically examine the values underlying tools, APIs, and other web technologies prior to selecting them.
• Consider how the design and implementation of web applications can shape who can and cannot access information online.
• Explain the importance of the WCAG standards in ensuring that people of all abilities can access and interact with website content

And...

• Integrate AI coding tools into the software development process
• Evaluate the effectiveness of LLM generated code

Course Structure

As with any form of computer programming, the best way to learn web development is by doing it. Moreover, web programming is a constantly and rapidly changing discipline, so professional developers need to constantly learn new tools and techniques on their own.

We have a somewhat unique opportunity in this section of INFO 340. We have a small group in which we can give each other focused attention. We're in a room that honestly kind of sucks for “lecturing” and allows for some reconfiguration. And we're meeting at 8:30am, so there's pressure to make it worth getting up for.

So we'll use this opportunity to lean into experimenting with AI development tools (which is the latest trend in software development). We're going to try focusing less on writing code from scratch, and more on evaluating and refining what is produced by these tools. Same concepts, but different learning approach. This does mean that—as with any section of INFO 340—you will need to take significant responsibility for your own learning. It is be up to you to read the course materials, attempt the assignments, attend lecture and lab, ask questions, etc.; because our time together may focus on specific challenges and impacts found in AI-driven development, you'll need to work to "fill in" other aspects on your own. We'll provide you all the resources, information, and support you need to do that (via the course book, recording videos, and lots of space for questions). You are accountable for your own learning—but we are here to help!

As a caveat: this will be hard and awkward. AI tools are not designed for learning and in fact are designed so that they get in the way of learning. I'm also not an expert on AI development (I don't like them on principle), so we'll all be learning together. Stuff can and probably will go sideways and we will need to adapt. But I am committed to creating a space where we can do that together, where there is room for flexibility and experimentation and play as we make sense of this new paradigm.

Class Meetings (Lectures)

"Lecture" time will be used to practice coding with AI tools and to collectively interrogate their effectiveness. We'll do lots of guided activities where we try to get LLMs to apply concepts in client-side development and then discuss how that works. I am intending for this time to be active; I'll do a limited amount of "lecturing" through material or even providing demos, in order to make room for you to try out and experiment on your own. As we move into the second half of the course, much of that experimentation will be in the development of your final project.

This does mean that lecture time will not necessarily cover all material needed for the course; you are responsible for learning additional details from the course textbook and other provided resources.

We'll be doing a lot of discussion, even debate around evaluating these tools—the stochastic (random) nature means that peopel will have different experiences. To learn this effectively, you will need to attend and participate in class. It's a small group (even if its early); let's show up and work through these problem together! Attendance will be required; though if you need accommodations due to personal circumstances come talk to me.

Lab Meetings

Lab meeting time will primarily be used to collaborate on the group project. All students are required to attend lab section. As we move into the second half of the course (and start doing more project work during lecture) we may re-evaluate the use of lab time.

Most lab meetings will have a graded check-in or deliverable to help encourage participation and keep people on track. These are the weekly "project check-ins".

Inclement Weather

In the case of snow, fire, or other climate-based events that make traveling difficult or dangerous, class meetings (lectures and labs) will be held synchronously on Zoom instead of in-person. We will strive to announce any changes in modality by 10pm the previous evening.

Assignments

This course will involve three types of assignments:

Problem Sets

Each topic in this course will be accompanied by a number of practice problems. Each problem is a directed programming exercise designed to give you practice with a particular web development concept. Problem sets are automatically graded (and you can attempt them repeatedly until all their functionality checks pass). Problem sets will be graded on a "completion" basis: you will get credit when the problem is finished and passes its checks.

Note that problem sets are really for you to learn the concepts so that you can apply them directly. You should not use AI tools in any way to support that work (also don't feed the problem sets into the LLMs for the future!)

Course Project

You will complete a group project that brings together the concepts learned through the exercises. This project will be an interactive web applications of your own design—the requirements are open-ended enough to let you develop something that is of interest and appropriate to you.

The project will be completed in groups of 2-4 people in order to practice collaboration and to keep the workload manageable. You can pick your own group, and we will help you find teammates if needed.

The project will be completed iteratively, meaning you'll be working on it in pieces (turning in these pieces as you go). The project has 4 main deliverables:

1. The proposal: a short written description of what web application you'll be building. This will let you get feedback on your idea early to make sure you're headed in the right direction.

2. The first draft: a "static mockup" of your project using HTML and CSS. This version of the project won't be interactive or have any functionality, but it will provide the complete structure and appearance of all the content.

   You can think of this as the "midterm" draft.

   We will evaluate and score the draft to give you feedback on how your project is going. However, your work will be considered as a "draft"—it's okay to have some problems or issues that you will fix later!

3. The second draft: a conversion of your static mock-up into a React application. This will primarily involve refactoring—restructuring the code without necessarily changing what it does. Completing this draft will make sure you're ready to complete the project's full functionality in React.

4. The final product: the completed working app build using the React framework, meeting all of the requirements.

With each deliverable, you will also complete a short reflection on your work and learning up through that draft.

See the specific assignments for more details about each deliverable. NOTE that we may collectively adjust expectations for the projects as we determine how effective AI tools are at supporting that development.

In addition, each week has an additional small project deliverable ("check-in") to help keep you on track and engaged with your team. See the check-in assignments for more details. These will be completed primarily during lab section.

In-Class Activities & Discussion

We will be using class time to experiment with and analyze the use of AI tools for doing client-side development. This is more than just generating working code—the learning will come from reflecting on and discussing that process. So do to that learning, you need to show up and participate in the activities and discussion!

Attendance is required for class (I know it's early in the morning; I'm sorry). In-class activities may have specific "deliverables"—such as being asked to upload the code you generated and experimented with. In general: if you show up and engage with us you will earn full credit for participation.

Life happens. If you're not able to make it to class, just let me know. Students can miss approximate 2 activities and still receive full credit for participation. For further needs or accommodations, just talk to me.

Correspondence

We will send out official course announcements and information by posting them as Canvas announcements. Please make sure you have enabled notifications so you don't miss anything!

We will be using Ed Discussion for questions and help. You can find our discusion board at https://edstem.org/us/courses/107168/discussion. I strongly encourage you to use Ed to ask questions (rather than sending me an email). It will allow you to better structure questions and facilitates the kinds of back-and-forth that come up when talking about programming. This also lets you get support from all of the teaching staff as well as any of your classmates all at once!

• Yes, this means that if you know the answer to a question, you can and should share that!
• Note that while you can easily post code snippets, please don't publicly post solutions to assignments or exercises; don't deprive others of the chance to learn!
• If you need any help accessing or using Ed, please let us know.

The best way to get questions answered will be on Ed. If you post a message, we will try to get back to you as soon as we can. Please be patient if we are not able to respond to any messages immediately; we may need time to get to and focus on your questions.

You are also welcome to email me at any time. When emailing, please make sure to sign your emails! This will let me know who is writing and will help us to better answer questions. Please do not send me messages through Canvas; they tend to be hard to track and respond to!

Official office hours are listed on the home page, but I'm also more than happy to try and schedule separate appointments at a time that works well for you if needed. Don't be shy; please ask for help if you need it.

Grading and Deadlines

Your grade in this course will depend on your completing the problem sets and project to demonstrate a satisfactory level of learning. But honestly, grades in a course should be the least of your worries. Our goal is to try and reduce course stress and provide some flexibility in deadlines, as noted below.

Problem Sets

Problem sets are graded on a "completion" basis. If your exercises pass all their checks, you get full credit for that set. We'll also give partial credit if only a percentage of checks pass (as long as you turn them in).

Problem sets are due on the date listed on the Assignments page. However, we will provide a "grace period" for all problem sets—you can turn in each one up to 2 days late at no penalty. After that, problem sets can be turned in for a maximum of 80% credit. Problem sets will only be accepted three (3) weeks after the original deadline—you cannot turn in everything during the last week. See the specific assignment pages and announcements for details. No problem sets will be accepted after the last day of instruction. These deadlines are intended to help keep you on track, while also accounting for difficulties people may have.

Project

Projects will be graded on a rubric assessing at a high level whether you've demonstrated that you understand and can successfully apply the concepts. See the individual project specifications for details.

You are expected to complete each project deliverable by the date listed on the Assignments page. There is no grace period for project deliverables (neither drafts nor the final version); this is to make sure we have time to grade them and give you feedback. Late project deliverables will not be considered satisfactory (so generally earning 75% or less).

The projects are developed iteratively, which is why there are multiple drafts. Part of iterating through a software project is making mistakes and then fixing them. As such, a deliverable that fixes noted problems in the previous draft can cause the score in that previous draft to be increased by up to 20%. For example, if you score an 75% on draft 1, fixing those problems in draft 2 can increase draft 1's score from 75% to 95%. This change only applies to the immediately preceding draft (so the final draft won't increase the score of draft 1).

We can and will provide extensions/etc. for emergency situations, such as illness or other external circumstances that mean you cannot make any of these deadlines. Please let us know with as much noticed as possible—it's harder to make adjustments at the last minute. If you get sick, please give us a quick heads-up to let us know so we can be ready to help.

Final grades are determined based on the iSchool Undergraduate Grading Scheme. Overall, I urge everyone to focus not on the grade itself but on learning what's necessary to earn high scores; the grades will follow from that.

Grading Groupwork

All software is built in teams. iSchool courses such as this one aim to give you experience working in teams. Apart from the logistic benefits, practicing teamwork—even when there are problems—is how you will learn to thrive in all work settings in the future. Moreover, being in a group enables you to help each other learn. You are not expected to do things "on your own"; instead you should seek help from your teammates (and provide help to your teammates when they need it!)

In this class we grade group work (projects, etc.) as a single assignment: all group members receive the same score for that project. We do not grade each "part" or each person's work separately. You are a team, not just 4 people doing individual work in the same Github repository. In academia and in the “real world”, teamwork is evaluated based on the success of the team, not on the work of any individual. If a teammate is struggling to complete some work, it is your responsibility to help them learn.

Students with particular strong or particularly weak contributions and support of the project will have their scores adjusted slightly. For example, students who do extra work performing project management or supporting/teaching other students will have their scores increased (earn "extra credit"). Students with poor communication or who miss group-set deadlines may have their scores reduced. Such teamwork contribution will be assessed holistically through peer evaluations.

Thus the best way to ensure that you've contributed your fair share is to communicate with your teammates so that you are all in agreement about what is fair. Everyone staying in touch is the best way to keep work from being or seeming unfair.

Students must contribute work through individual git commits in order to receive full credit on the project.

Academic Conduct

The standard iSchool and UW academic policies that apply to all of our courses, apply here as well.

Diverse backgrounds, embodiments, and experiences are essential to the critical thinking endeavor at the heart of higher education. We expect you to be respectful of the many social and cultural differences among us, which may include, but are not limited to: age, cultural background, disability, ethnicity, family status, gender identity and presentation, citizenship and immigration status, national origin, race, religious and political beliefs, sex, sexual orientation, socioeconomic status, and veteran status. Please talk with me right away if you experience disrespect in this class—from any source (including teaching staff)—and I will actively work to address it.

Collaboration

The Information School encourages and supports collaboration. The goal of this course is to learn the material—to be able to create new web-based information systems. You are encouraged to use any available resources, including your classmates, to learn these skills. You are welcome to discuss exercises and problems with others, to work through challenges in pairs, to seek help if you get stuck, and to share guidance and expertise if requested. Help each other to become experts!

But "collaboration" does not mean just copying other people's code and trying to pass it off as your own. "Seeking help" does not meaning asking AI to do the work or solve the problem for you (when not specifically allowed!).

The point of assignments is for you to learn how to complete them; the finished product isn't as important as the process you go through to make it. This includes all of the the false starts, bugs, misconceptions, and mistakes. Learning occurs in the productive struggle of working through a challenge. Completely apart from the ethical issues, copying a solution without understanding it deprives you of the whole point of the assignment, and frankly is a waste of your time.

A good rule of thumb: When working on an individual assignment, no other student's or AI's code should ever be on your computer. Not ever shown on your screen (including as an image or screenshot), not saved to a file on your harddrive, not found in an email under your account, etc.. You can verbally talk through the code to write, but make sure you understand what and why your implementation works—and if you're not sure, ask!

• DO: Ask people (especially the professor!) for help finding and solving bugs.
• DO NOT: Let someone or something else type/provide code for you.
• DO: Talk through problems sets in pairs.
• DO NOT: "Split up" problem sets so you only do half the work.
• DO: Give credit when you get help or advice from someone or something.
• DO NOT: Copy or adapt an assignment solution from a previous quarter.
• DO: Feel free to research techniques that aren't covered in class!
• DO NOT: Copy-and-paste code from the internet or from AI code generators (especially if you don't understand its syntax!)
• DO NOT: Make your problem set repositories public so that others can see them.

Code Reuse

Although professional web developers often reuse code they find on the web, they also take the time to understand what that code is doing, customize it to their specific context, and cite the source so that they can find it again later. They "make it their own". If you want to use a snippet of code you find on the web, you MUST do the following:

1. Include a reference to where you found the code (a URL in a comment is fine). Including more than one line of un-cited code, or otherwise failing to give appropriate credit, is a form of plagiarism and so is considered cheating.. It also lets you know who to blame or where to look if you need to revise that code later!

2. Take the time to understand how and why the code works (otherwise you aren't actually learning anything!). Adding detailed comments explaining what the code does in your own words is a good way to demonstrate that you actually understand it.
3. Make the code your own; do not just copy and paste it directly into your project. Choose exactly what pieces of a sample are necessary for your work (you usually don't need everything). Adjust variable and function names so they are appropriate for your situation. Ensure that the code matches the style and usage guidelines required for the class.

This course is about learning web development; you won't learn anything from just copying other people's code—even if the final product "works". It's fine to learn from other sources, just be honest about it.

As a general rule: you will only get credit for code or work you do yourself and demonstrates your learning. You will not get credit for code you did not write yourself. It's fine to get help getting started, but we need to see evidence that you have learned the material and are able to do web development yourself.

Generative AI / ChatGPT Usage

Code generating AI tools such as ChatGPT, Claude, Copilot, and similar are increasingly being used by professional software developers (though the practical effectiveness and reliability of such tools is an open question). In Informatics we want to be able to embrace new information systems and learn to use them effectively and ethically.

However, relying too heavily on AI tools can limit your own skill development—which is necessary to assess the quality of code generated by AI, to understand how to integrate it into the software systems you're developing, and to be able to work in contexts where such AI tools may not be available. You need to learn the foundations in order to effectively use these tools. Just generating code with AI doesn't help you learn it (see e.g., this experiment). Indeed, AI users have been shown to "consistently underperform at neural, linguistic, and behavioral levels" (per this MIT experiment).

With that in mind, in this course we ask you to follow the below ethical guidelines when using generative AI tools such as ChatGPT, CoPilot, or similar:

• For problem sets, do not use AI tools in any way. Problem sets are for you to practice learning implementation steps and patterns yourself. Typing it out on your own is important! Identifing and solving bugs yourself is important! Offloading any of that work to an AI system will reduce your learning and what you get out of this course.

  • Don't use AI tools for debugging (even after your own attempt), as they are likely to "give away" the answer in a way that doesn't support your learning. If you need help, ask the instructor or a TA.
  • Putting the instructions into a code generator and turning in the result—even with your own adjustments/fixes—is not acceptable.
  • Problem sets with evidence of AI usage will not be accepted and will receive a 0.

• For projects, we will be explicitly experimenting and practicing with using AI tools to support software development. Much of your projects will be produced in conjunction with AI tools. As such, for the project you are welcome to use these tools as much as needed, in accordance with the practices established during class.

  • Being clear about what work was generated by AI is good for accountability (knowing who to blame if something in the code breaks!). We'll practice ways to track this work, such as recording prompts or otherwise noting when something was generated by the tool even though the commit has your name on it.
  • You'll be asked to complete a short reflection that may touch on your use of AI so I can understand how these tools are impacting your learning

  In short: don't use AI tools for the problem sets (turn off the tools when working on thsoe). All usage of AI tools or the project is allowed, but follow good data and accountability practices. I know this may seem awkardly split, but different types of learning require different tool usage.

  Academic Honesty

  The consequences of academic dishonesty are not worth the risks. The simple rule is: do not claim anyone else's work, code, words, or ideas as your own. If you're in doubt, come talk to me in advance.

  If we determine that you violated the collaboration policy and plagiarized code, you will get an automatic zero on the assignment, and we will file an academic misconduct report with the Office of Community Standards and Student Conduct. Note that both students will be considered to be at fault in the case of unauthorized code sharing.

  If you're having problems in the course, come and speak with me; never take the shortcut of copying someone else's work. It isn't worth it.

  Resources & Accommodations

  Given the times and crises we live in, students are encouraged to be attentive to their needs for health and well-being (physical and mental). Students are susceptible to COVID, flu, colds, or other common illnesses due to stress, overwork, and disruption of routines (diet, exercise, sleep). Caring for family and friends who are ill adds another responsibility competing for your time. Please do your best to attend to your self-care during this time.

  If health-related needs are delaying you from completing coursework, please contact your instructor. Faculty in the Information School have been encouraged to be accommodating and give deadline extensions of up to one week without any academic penalty. If you need more time, please propose a schedule to your instructor that indicates how you can return to keeping current with your assignments. Allowing extensions is entirely at the instructor's discretion.

  If your personal illness or family need is severe and will prevent you from completing the class, please let your instructor know and then contact your Academic Advisor to discuss all your options.

  Your wellbeing is important. There may be times when stress, life challenges, or difficult emotions affect your academic experience and daily life. If this happens, please know you are not alone, and support is available. The University of Washington Counseling Center (mentalhealth.uw.edu | 206-543-1240) offers free and confidential services during business hours to support you with stress, adjustment, or mental health concerns. For 24/7 support, you can call the Husky Helpline at 206-616-7777 or the National Suicide & Crisis Lifeline by dialing 9-8-8.

  For students enrolled in an Information School program, you may reach out to book a confidential appointment with the Mental Health Counselor, Leigh Eisele, at leisele1@uw.edu. Reaching out for support is a sign of strength. Whether you're seeking tools to manage stress, someone to talk with, or resources for a friend, help is here.

  Accommodations for student absences or significant hardship due to reasons of faith or conscience, or for organized religious activities, must be requested within the first two weeks of this course using the Religious Accommodations Request form available at https://registrar.washington.edu/students/religious-accommodations-request/

  I encourage all students having difficulty, whatever the reason, to consult privately with me at any time.