Course Overview

CSCI 344, Spring 2026�Advanced Web Technology

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Assigned readings for Wednesday
5. Questionnaire

About Me

1. I’m Prof. Sarah Van Wart (she / her)
2. This is my fourth year at UNCA. I was previously at Northwestern University for 4 years, and received my PhD at the School of Information at UC Berkeley.
3. I’ve been building “full stack” web applications for over half of my life – both in industry and in academia – and have seen many generations of web technologies and their evolution.
4. My research focuses on learning and education, and civic and societal applications of technology.

Class Introductions

In groups of 3-4, please introduce yourselves:

• Your name
• Your pronouns
• Your major / minor

�Group activity: �When you type https://www.unca.edu into your browser and hit “Enter,“ what actually happens so that you can actually see the web page on your computer?

• Sketch it or bullet it
• Argue about it

Your answers here…

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Assigned readings for Wednesday
5. Questionnaire

Overview of the course

1. Why should I take this course?
2. What am I going to learn?
3. How am I going to learn it?

First, a huge shoutout...

Cooper Barth

Linus Okoth

Cooper Barth, Linus Okoth, and Victoria Chávez have all helped design parts of this course. I am very grateful for their contributions.

Victoria Chávez

1. Why should I take this course?

The goal of this course is to give you a solid foundation of some core web development languages, techniques, practices, and tools, including:

1. Client-side (front-end) development
2. Server-side (backend) development

Both are widely applicable in industry, government, and everyday life. Take this course when you have the time to dedicate to it. These skills are important and building a strong portfolio of work in this class can open up a wide range of opportunities for you post graduation.

1a. Client-side (front-end) development

• This course may be the only course you take in the CS department that considers the design and implementation of user interfaces.
• People and organizations often underestimate user interface design and client-side programming. That said, both are important topics of study in their own right, and we will be exploring the beauty and wonder of the well-designed, well-implemented user interface all semester.
• We will be focusing on user interfaces for the web, but the principles from this course apply to native apps (Android / iOS), games, and more.

Front-End Roadmap

Source: https://roadmap.sh/frontend

1b. Server-side (backend-end) development

​

• You will also be building and deploying one or more web servers “in the cloud”
• To do this, you will learn some basic principles of distributed systems – i.e., how computers communicate with one another (via networks, ports, protocols, processes, etc.).
• The skills you learn in this class will not only help you to configure, administer, and program web servers, but also give you some perspective regarding what it might be like to do Cloud engineering, DevOps, and/or building microservices.

Back-End Roadmap

Source: https://roadmap.sh/backend

What am I going to learn? > Learning Goals

1. You will learn how to design and develop a simple ‘full-stack’ web application, including both server-side and client-side functionality:
1. Client-side: building the user interface and the interactions
2. Server-side: Building and interacting with a database, building and configuring a web server, implementing user authentication, etc.
2. You will become more skilled with a wide range of tools, technologies, and frameworks related to web development (e.g. GitHub, HTML, CSS, JavaScript, React, SQL, Python, FastAPI, and more!).

What am I going to learn? > Learning Goals

3. You will learn about the REST Architecture and interact with various web APIs.
4. You will learn some fundamental UX/UI design principles (usability, accessibility) in the context of web development.
5. You will get a lot better at programming, debugging, and troubleshooting a wide variety of issues
6. You will (hopefully) have fun and feel empowered to instantiate your own ideas!

A few definitions…

Client-side and Server-side Functionality

Client-side (front end): work done by the web browser including:

• Creating a graphical representation of a web page.
• Creating, reading, updating and deleting resources from a server.
• Responding to user interactions and events (e.g. when I click, go get this video and play it for me!).
• Note: Browsers only understand HTML, CSS, & JavaScript

Server-side (back-end): work done in “the cloud,” including:

• Listening for and responding to requests (over port 80/443)
• Dynamically generating files on-the-fly (e.g. JSON, HTML)
• Interacting with additional servers (e.g. databases, media servers, etc.)
• Handling access / authentication
• Note: Can understand any language (provided it’s configured)

What is a Framework?

1. “Frameworks” are libraries that are designed to make common programming tasks easier.
2. Can be written in any language
3. They are opinionated – meaning that they want you to organize your code in a particular way, according to their rules
4. There’s a bit of a learning curve for the first framework, but learning new frameworks (after the first one) is much easier

Client-Side JavaScript Frameworks

1. There are many, many client-side JavaScript frameworks that have been designed to simply (allegedly) the process of front-end web development:
1. React
2. Vue
3. Angular
4. Backbone
5. Ember
2. Each framework abstracts common, client-side functionality and components in ways that are intended to be easy.
3. Some use intermediate languages / conventions that must be transpiled into HTML, CSS, and JavaScript (which is the programming language your browser “speaks”)

Server-side Web Frameworks

There are also a ton of Server-Side web frameworks:

1. PHP + { Larvel, Symfony, etc.}
2. Ruby + { Rails, etc.}
3. Python + { Django, Flask, Fast API, etc. }
4. Java + { Guice (Google), Spring, Struts, etc. }
5. C# + {ASP.NET, etc. }
6. Node.js (Express, etc.)
7. And more!

How am I going to learn all of this?

1. Attending class
2. Doing the assigned readings / video tutorials / supplementary exercises
3. Taking the homework and tutorial assignments seriously
4. Setting aside dedicated time to work on homework assignments and tutorials.
5. Asking questions and getting help when you need it.

Managing Expectations re: Workload

1. This is an advanced class. You will expected to be familiar with object-oriented programming. If you have not already taken 201, I highly recommend taking this class after you’ve taken 201. Otherwise, you will need to learn object-oriented programming on your own time.
2. Please allocate at least 4-6 hours a week to homework outside of this course.
• If you’re new to programming, it’ll be more like 8-10 hours / week.

Do I have enough programming background to take this course?

• By the end of this course, you will be expected to write substantive programs in both JavaScript and Python.
• We will not be going over any fundamental programming concepts (e.g., loops, conditionals, objects, classes, variables, data).
• We will be going over some language-specific features for both JavaScript and Python, but only briefly (e.g., a week or so).
• Everything else you will be expected to learn via the course readings, labs, and homework assignments.

A few suggestions / caveats

Some Caveats

1. This course requires that you are proactive and resourceful
2. This course is a lot of work. It is not an “easy A”
3. This course privileges breadth over depth
4. Working with a partner is not required for homework, but it is highly recommended

Caveat #1: Be Proactive and Resourceful

In order to create a full-stack application, you are going to have to configure libraries and packages on your local computer, and reckon with potential idiosyncrasies on your laptop. Some thoughts:

1. Navigating these challenges is part of what it means to be a software developer.
2. Learning how to do “systems troubleshooting” will be a byproduct of taking this class.
3. You will probably need to Google errors in your installations and attend office hours to resolve issues.
4. It’s frustrating, I know. But ultimately, you will have to move past these feelings and proactively troubleshoot and seek out help.

Caveat #2: This course is a lot of work

This is not an “easy” course, but I do think it’s a valuable one.

1. If you don’t anticipate having 4-6 hours / week outside of class to dedicate to the material, consider taking it in a future semester.
2. The assignments all build on one another, so falling behind can make it hard to catch up.
3. This class requires that you come to class. Lectures are designed to help you understand and practice the skills / ideas you’ll need to complete the homework assignments.

Caveat #3: We’re Prioritizing Breadth Over Depth

• This course is designed to explore the web stack, but only spends a week on each topic.
• We will spend about equal time on front-end and back-end programming techniques, but will not go into a ton of depth on any one aspect of web programming (see schedule)
• The goal is exposure + understanding how the pieces fit together – versus, say, becoming a React or microservices expert.

Caveat #4: Working with a buddy

• In general, people who work with partners were less likely to fall behind or drop the course.
• If anyone has any suggestions for how I could help facilitate partner formation, I would love to hear your thoughts!

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Assigned readings for Wednesday
5. Questionnaire

Course Expectations

• You will come to class prepared and ready to engage in an intellectual discussion about the readings and concepts.
• You will bring your unique expertise, perspectives, and experiences to class and share them with others, so that we might all gain from your perspectives.
• You will respect and seek to understand the unique perspectives and experiences of others.
• You will give your classmates the benefit of the doubt (about their competence and intentions) and can expect the same from them.
• All work that you submit will be your own original work; you will use citations where appropriate.

Grading

Course Technologies

• We will often be coding during regularly scheduled lecture time.
• I will be using Visual Studio Code as my code editor. You may use whatever code editor you like. Up to you.
• We will be hosting our websites using GitHub pages
• We will be using FastAPI (a Python Module) as our web server, and will be taking advantage of many different python libraries.
• We will be using Node.js and npm to create a React app.
• We will also be using a relational database (PostgreSQL).

Attendance & Participation

• We will meet together every Monday, Wednesday, and Friday in person.
• We will use class time to collectively understand and discuss the readings and concepts we are learning about, and engage in in-class activities.
• Your timely and engaged attendance at every class is thus very important – both for you and for your classmates.

Attendance & Participation: Grading

You are allowed three unexcused absences during the semester, no questions asked. You should reserve these absences for the occasional emergency or illness. After three absences, your participation grade will be impacted.

Tutorials

• Tutorials make up 20% of your grade and will be completed during class on Fridays. That said, you will have until the following Monday to submit the tutorial.
• Each tutorial will be graded as follows:

Homework

• Homework assignments are approximately 35% of your grade.
• There will be 6 homework assignments.
• Some assignments are weighted more than others.
• Each assignment builds on the previous one. If you get behind on your homework, it will be difficult for you to catch up.
• This semester, we will be building a photo sharing app (i.e. Instagram clone) as a means of examining a variety of different front-end and back-end technologies.

Late policy

• No late tutorials will be accepted
• Late homework will be accepted within 2 weeks (14 days) of the due date/time, with a 20% late penalty.
• No assignment will be accepted after 14 days have passed.
• These are firm rules. No exceptions.

Accommodations

Any student requesting accommodations related to a disability or other condition should let me know, and/or make an appointment to meet with the Office of Academic Accessibility as soon as possible (preferably within the first two weeks of class). To make an appointment, call 828.232.5050; email academicaccess@unca.edu; visit https://oaa.unca.edu/

​

All information will remain confidential.

​

Mental Health

If you are struggling with mental health issues, please reach out to me, your advisor, to the Dean of Students, or to the Health and Counseling Center (https://www.unca.edu/life/health-counseling/). Being proactive early on makes it easier to come up with a plan and help you to be successful.

I can help you connect to resources on campus.

Course AI Policy

This course is about (among other things) building real programming skills

• We focus on foundational programming, especially functional and event-driven code
• These skills are critical for later CS courses and real-world work
• Over-reliance on AI code generation can short-circuit learning
• Goal of the policy is to help you:
• Use AI to support understanding (versus as a replacement for thinking or developing fundamental skills).
• Leave this course stronger and more confident, not to punish you

Thoughts on Chat GPT

• Thought-provoking article + MIT Experiment
• For people new to programming, copying and pasting code from ChatGPT – even if you understand it – can short-circuit the learning process.
• Learning is about friction – coming up with a solution on your own, trying it, encountering errors, thinking about why your code has gone wrong, and fixing things.
• When you sidestep this process, you don’t retain the concepts, and you don’t learn.

What’s Allowed and Not Allowed

Allowed

• Using AI like documentation or a textbook
• Explaining concepts, syntax, errors, and best practices
• Helping you understand how code works

Rule of thumb: If you couldn’t reproduce the solution without looking back at the AI output, it’s not allowed.

Not Allowed

• Generating any assignment-specific code
• Writing functions, components, or solving problems for you
• Using AI-powered code completion (Copilot, Cursor, etc.)

All submitted code must be written by you.

If You’re Unsure or Make a Mistake

If you’re unsure whether something is allowed, ask before submitting

• There is a disclosure pathway for honest mistakes that focuses on learning, not punishment.
• Bottom line:
• I want to help you learn and succeed.
• Use office hours, ask questions, and make good choices.

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Assigned readings for Wednesday
5. Coding Assessment

Assigned Readings / Videos

1. Intro to the Internet: Watch How We Made the Internet. 2022. Nation Squid
2. Intro to the Web: Watch The Internet: HTTP & HTML. Code.org
3. The Internet Explained. Timothy B. Lee, 2015.
4. 40 Maps That Explain the Internet. Timothy B. Lee, 2014

�Your first exam will ask you about questions / concepts relating to web and internet architecture.

Outline

• Introductions
• Overview of the course
• Logistics
• Assigned readings for Wednesday
• Coding Assessment

For Wednesday: Intro to the Internet

​