Course Overview

CS 396: �Introduction to Web Development

Spring, 2022

Outline

1. Introductions
2. Overview of the course
3. Logistics
4. Intro to client-side and server-side technologies

About Me

• Call me Sarah / she / her
• Have done web design and web programming for almost 20 years and have seen many generations of web technologies and their evolution
• I majored in Economics (i.e. non-major) at Yale. I learned about web programming after undergrad — took a few community college classes, but mostly learned on the job
• Received my PhD at the School of Information at UC Berkeley. My research focuses on learning and education; and civic tech and civic engagement

About Me (Continued)

1. I currently co-direct the TREE Lab with Sepehr Vakil to design technologies and learning experiences that help people think about the ethics and politics of technology
2. I also oversee a community mentoring program – as part of the YW Tech Lab (in collaboration with the YWCA and Oakton Community College) – where undergraduates help adults in the broader Evanston community learn about web design and web programming

Two Truths and a Lie

• I grew up in Florida
• I used to work for the NSA
• I was an NCAA Gymnast

Snacks, Facts, & Questions

Shang noodles

Table 2 Stix –> Raman (Post office)?

If the projects are cumulative, how can we recover?

Chipotle

Giordanos – Chicago Special (deep dish)

McDonalds (McNuggets)

Joy Yee → Chinese place w/food and Boba.

Questions about the class

Outline

• Introductions
• Overview of the course
• Logistics
• Intro to client-side and server-side technologies

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 this course. I am very grateful for their contributions.

Victoria Chávez

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 – both server-side and client-side
• The course is intended to prepare you for the many different project courses offered in the department, including:
• Agile Software Development (Prof. Riesbeck)
• HCI Studio (various HCI Professors)
• Innovation Lab (Prof. Hammond)
• Human-Computer Interaction (various HCI Professors)
• Interactive Information Visualization (Profs. Hullman & Kay)
• And more!

Why should I take this course?

• Allows you to build a real, live system, and deploy it on a live server for others to use and enjoy
• Gets you thinking about how other “everyday” apps and websites work
• An opportunity to think about some practical, ‘real world’ applications:
• What should my app look like?
• What functionality should it have?
• What problem does it solve?
• You’ll get a lot better at debugging and troubleshooting a wide variety of issues
• There are so many tutorials and resources at your fingertips once you’ve developed a baseline web literacy.

Course Topics

What am I going to learn? > Learning Goals

1. Learning how to design and develop a simple ‘full-stack’ web application (including interacting with a database, building a web server, implementing user authentication, and designing/building a front-end client).
2. Building proficiency with commonly-used tools and technologies related to web development (e.g. GitHub, PostgreSQL, Flask, Heroku, Amazon S3, Web Sockets, React, etc).

What am I going to learn? > Learning Goals

• Studying different architectures (e.g. REST & MVC), including how they are instantiated across a range of familiar web applications and APIs.
• Learning some fundamental UX/UI design principles (usability, accessibility) in the context of web development.
• Have fun and feel empowered to instantiate your own ideas!

How am I going to learn all of this?

• Attending lecture (please come!) and/or watching the recordings
• Doing the assigned readings / video tutorials / supplementary exercises
• Attending your lab section and office hours
• Finding a good partner (optional, but recommended)

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, but it is highly recommended

Caveat #1: Being 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:

• Navigating these challenges is part of what it means to be a software developer.
• Learning how to do “systems troubleshooting” will be a byproduct of taking this class.
• You will probably need to Google errors in your installations and attend office hours to resolve issues.
• Complaining about how frustrating it is – while understandable – will not ultimately help you move forward.

Caveat #2: This course is a lot of work

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

• If you don’t anticipate having ~8 hours / week to put into this class, consider taking it in a future quarter.
• The assignments all build on one another, so falling behind can make it hard to catch up.
• PLEASE come to class (or if you don’t, please watch the lectures). Lectures are designed to help you understand and practice the skills / ideas you’ll need to complete the homework assignments.

Caveat #3: Breadth Over Depth

• This course is designed to explore the web stack, but only spends a week on each topic.
• If you’re already pretty experienced in web development, this may not be the course for you.
• 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

• Last quarter, people who worked 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

• Introductions
• Overview of the course
• Logistics
• Intro to client-side and server-side technologies

Labs

• Labs are a way for you to get exposure to a range of technologies and techniques.
• Labs meet once a week for one hour. Different lab sections meet at different times W-Fr.
• You will sign up for lab section on Wednesday during lecture.
• Every student is required to sign up for a lab (we’ll do this on Wednesday)
• The peer mentor who runs your lab will also be your grader, and your “go to” person for the class.

Lab Continued

• Labs are 20% of your grade
• All labs are due on Friday at 11:59PM.
• Graded pass / fail. You may skip 2 (there are 10 labs) without a grade penalty.
• We will not grade you on attendance. That said, half of life is showing up!
• Attending lab will keep you from procrastinating. It’s also a form of built-in accountability.
• Please review the lab before attending your lab section – there are often assigned readings associated with the lab.
• First lab meets this week!

Lab Schedule

Homework

• 80% of your grade.
• There are 6 homework assignments.
• Each assignment will be around 10-15% of your grade. 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 quarter, 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.

Homework Schedule

Late policy

Labs�Late labs will not be accepted (as solutions will be posted right away).

�Homework

​

Late Credits

Over the course of the quarter, you have 7 “late credits” that you can allocate across your homeworks, no questions asked. The purpose of these late credits is to give you some flexibility if you get sick or have a personal emergency.

How do credits work?

• 1 credit = 1 day
• Credits cannot be split / partially allocated. For instance, if you submit a HW assignment 30 minutes, you can spend 1 credit towards that HW (with 6 leftover to use for future homeworks).
• Credits can only be applied to homework, not labs.
• If you use up your 7 credits, the late submission policy for homework kicks in
• If you want to use your late credits, fill out this form.

​

​

FAQs regarding late credits

Q: If I get sick, does that mean that I should email Sarah and see if I can get extra late credits on top of my 7 late credits?

A: No! This is precisely what late credits are for. Please don’t try to negotiate extra late credits unless you have a serious emergency.

Q: Are late credits automatically applied?

A: No. You have to fill out the form (see the syllabus).

Q: What if I need further accommodations?

A: Further accommodations need to involve the Dean of Students and/or your academic advisor, to ensure fairness.

​

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 and Heroku
• We will be using Flask (a Python Module) as our web server, and will be taking advantage of many different python libraries.
• We will also be using a variety of different data stores, including PostgreSQL, and Amazon S3.

Accommodations

Any student requesting accommodations related to a disability or other condition is required to register with AccessibleNU (847-467-5530) and provide professors with an accommodation notification from AccessibleNU, preferably within the first two weeks of class.

All information will remain confidential.

Mental Health

This has been a difficult 2 years for us all, and the pandemic continues to present a litany of challenges that can make it difficult to engage in academic work.

If you are struggling with mental health issues, please reach out to me, your advisor, to the Dean of Students, or to CAPS. Being proactive early on makes it easier to come up with a plan and help you to be successful.

I am a Mental Health Ally, and I can help you connect to resources on campus.

Integrity, Honesty, and Climate

This course assumes no prior web development experience. Think of this course as a way for everyone to explore various server-side and client-side technologies in a structured way. Let’s create a supportive and curious community of learners.

Academic Honesty

• Do not exchange code fragments on any assignments unless you are actively collaborating with a partner on a group project
• Do not copy solutions from any source
• You can look at others’ code, but don’t scribe it (whiteboard, paper, code)
• You cannot upload / sell your assignments to code sharing websites
• You cannot “outsource” your work to friends, family, or contractors

Stack Overflow & Online Tutorials

I want you to use Stack Overflow 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)

Peer Mentors

• Sanath Angalakudati
• Roy Kim
• Jeff Lee
• Jiahui Li
• Jonathan Liu
• Seoyeon Park

​

• Carina Ramos
• Sophie Rollins
• Khalil Samoud
• Lucah Ueno
• Frank Yang

Other Course Logistics

• Office Hours: TBD. We will post them by the end of the week
• Course communication via Campuswire. Please register!
• https://campuswire.com/p/GE22788F3
• Code: 4642
• Resources and submissions:
• Course website for public resources (slides, code files, reference material)
• Canvas for private resource: assignment submissions, etc.

Outline

• Introductions
• Overview of the course
• Logistics
• Intro to client-side and server-side technologies

Server-Side Programming

Your Web Server�(any language;�listens on port 80/443)

Client-Side Programming

Web Browser�(Only HTML, CSS, & JS)

Summary: Client-side and Server-side Functionality

Client-side: the work done by the web browser, which includes:

• Creating a graphical representation of a web page.
• Request resources from (many) servers. Can also ask server to create, update, and delete resources.
• 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: the work done in “the cloud,” which includes:

• 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?

• “Frameworks” are libraries that are designed to make common programming tasks easier.
• Can be written in any language
• They are opinionated – meaning that they want you to organize your code in a particular way, according to their rules
• 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

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

What are some analogous server-side web frameworks?

There are also a ton of Server-Side web frameworks

• PHP + { Larvel, Symfony, etc.}
• Ruby + { Rails, etc.}
• Python + { Django, Flask, etc. }
• Java + { Spring, Struts, etc. }
• C# + {ASP.NET, etc. }
• Node.js (Express, etc.)
• And more!

Next Time: Web Architecture