Course Overview

CSCI 344, Spring 2025�Advanced Web Technology

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Questionnaire

About Me

1. I’m Prof. Sarah Van Wart (she / her)
2. This is my third 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.

Formal Introductions

Let’s all go around the room and briefly introduce ourselves.

1. Your name
2. Your pronouns
3. Your major / minor (if you have one…if not, no worries)!

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. 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. 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 40% 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 work 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.

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.

Academic Integrity and Honesty

I want you to use Stack Overflow, ChatGPT, and online tutorials to enhance your understanding of the material. Be curious, and explore different approaches to solving problems and achieving functionality. Just make sure that:

• You cite your sources in the comments
• You understand how that code / approach / technique you’ve found works (and that you can explain it to me if I ask about it)

Passing off code that you found on the Internet as your own in a university class is considered plagiarism That said, citing the websites and sources you used, and being clear about how you used these sources is welcomed and encouraged.

Thoughts on Chat GPT

• Thought-provoking article + MIT Experiment
• For people new to programming, copying and pasting code from ChatGPT – without any further processing – short-circuits 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.

Thoughts on Chat GPT

• Give credit to AI tools whenever used, even if only to generate ideas rather than usable text or code.
• When using AI tools on assignments, add an appendix that includes:
• A description of precisely which AI tools were used
• An explanation of how the AI tools were used (e.g. to generate ideas, understand functions or coding ideas, etc.)
• an account of why AI tools were used (e.g. to save time, to to stimulate thinking, to handle mounting stress, to experiment for fun, etc.).
• You may not use AI tools during in-class quizzes

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Coding Assessment

Next Up: Intro to the Internet

​