ECS 162

Web Programming

3/31

Introductions

Your instructor is: Ty Feng

tyfeng@ucdavis.edu

Office hours: TBD

Prior to teaching this class:

• B.S. in Computer Science from U Miami
• M.S. in Computer Science from UC Davis
• Software engineer in industry for 3 years
• TA’d various ECS courses 4 times
• Joined the CS department in FQ24
• This is my first time teaching ECS 162!
• Interests: LLMs, HCI, and CS Education
• Other interests: guitar, rock n roll, gardening, road trips

Introductions

Your TAs are:

Allison Austin

amaustin@ucdavis.edu

Sarah Liu

asaliu@ucdavis.edu

Introductions

Discuss the following with a neighbor:

• What is your name?
• What is your year?
• What do you want to learn from this class?
• What is your favorite programming language, frontend framework, dev environment, and why?

Welcome!

• Our goal: Build an application that runs over the Web.
• Example applications:
  • Amazon
  • Google
  • Facebook
  • ChatGPT

Course Objectives

• Specifically, by the end of this course, you will be able to:
  • Create dynamic web applications that can interact with users and databases
  • Support CRUD operations in a web app
  • Develop user interfaces using a modern JavaScript/TypeScript framework
  • Apply iterative design and development processes along with HCI principles and heuristics

Amazon needs to:

Accept user query and send a request to their backend

Their backend will query their database to find any guitars matching the user's query ("les paul")

DB returns a list of guitars with prices, images, and descriptions

Frontend displays data correctly

The Web

What is the difference between the Web and the internet?

• The internet is the physical network of cables, routers, and wireless connections that link computers together.
• The World-Wide Web is a service that uses the internet (via HTTP, etc.) to deliver content.

Big Picture

A typical web application involves:

• Web Server – runs application code
• Database – stores data
• Internet – connects clients and servers
• Web Browser – runs on desktops, phones, or tablets

Servers and browsers communicate over the internet to generate dynamic pages.

Big Picture

How it Works

• A collection of programs: Some written by us, others by browser/server vendors.
• Code running on both the browser (client-side) and the server.
• Data is exchanged over the internet to create dynamic, interactive pages.

Many Languages and Frameworks

• Web pages: HTML and CSS
• Browser programming: JavaScript, jQuery
• Browser frameworks: Svelte, Angular, React, D3 (for visualization), reveal.js (for these slides)
• Server-side programming: PHP, Ruby on Rails, node.js, Flask (Python), ASP.net, etc.
• Databases: SQL and NoSQL
• APIs for services: Google Maps, OpenAI, etc.
• Authentication: Internal and third-party systems

Syllabus – Choices for This Course

• HTML5, CSS3
• Responsive front-end design with Flexbox and Svelte
• JavaScript (ES6+) and TypeScript
• AJAX, JSON, and asynchronous programming
• Server programming with Flask (Python)
• A NoSQL database (e.g., Firestore or DynamoDB)
• Using an API

Why TypeScript?

Building Complexity

• Web programming is sometimes seen as simple due to early lessons on basic HTML/CSS.
• Later topics build on these basics, making projects more complex.
• Many students struggle when the course digs deeper than surface-level coding.

Waitlist

• We are not going to expand the class.
• If you are number 10, 10 people must drop for you to get in. Chances are not great.

Drop Deadline

• 10-day drop deadline
• Drop by Friday, April 11

Prerequisites

• This is an upper-division CS course (elective for a CS major/minor).
• Requires ECS 34, 36B, or equivalent programming experience.
• You must be comfortable using UNIX.

Labs

• Lab sessions replace traditional discussion sections.
• Labs focus on hands-on practice.
• Please complete the lab assignments.

Questions and Discussions

• You are encouraged to ask questions during lectures
• After lecture, ask questions on CourseAssist -- an AI tutor and discussion board for this course
• You will get a faster reply from us on Course Chat
• Post public questions if your question would also benefit others
• For private matters, make your question private

Schedule

• HW1: Layout, Flexbox, Responsive design
• HW2: API, CORS, Svelte
• HW3: Backend, databases, Svelte
• May 9: Midterm
• Final Project
• (6/11 @ 10:30am) Final Project Demo Day

Grading

• Quizzes – 10%
• Homework - 30%
• Midterm – 20%
• Final Project – 40%

Attendance and Quizzes

• Lecture and lab attendance are mandatory.
• On some days, there will be a quiz taking place during the first ten minutes of the lecture.
• You must be physically present to take the quiz on Canvas.

Assignments

• Homework assignments will be turned in via Gradescope
• Specs will be posted on the Course Website

Midterm Exam

• The midterm exam will include multiple choice questions and coding problems.

Final Project

• A large portion of your grade will be based on the final project.
• You will work in teams of 5-6 after the midterm (we will assign you to a team).
• More details on that later.

Syllabus

Please read the syllabus carefully: tinyurl.com/162syllabus

Academic Dishonesty

• Major similarities on assignments will be reported to SJA.
• Web programming is formulaic; copying code without understanding is considered cheating.
• Your understanding will be tested in coding questions.

The Design Cycle

Why do we care about user interfaces?

How much of a real-world program is devoted to the user interface portion?

48%

Major part of work for “real” programs!

You will work on “real” software (intended for people other than yourself)

Bad user interfaces cost money, lives, time, ...

User interfaces are hard to get right

Design

• Your assignment grades partly depend on how accurately you implement the designs.
• For any designs you create, you must submit detailed design documents and explanations.
• For hw3 and the final project, you will create your own designs in Figma.

Rubric for grading

HTML

What does HTML stand for?

• Hyper-Text Markup Language

What does this mean?

• Markup Language: Uses tags (e.g., <p>, <div>) to indicate roles for page content.
• Hyper-text: Incorporates links between pages.

Browsers are Lenient!

The browser will do its best to render the HTML you provide—even if there are errors. It rarely displays obvious error messages.

A Few Principles

• Page elements (text, images, etc.) must be nested inside tags (e.g., <head> and <body>).
• HTML tags should be properly nested.

<body> 
  <p>
  </p> 
</body>

<body>
  <p></body> 
</p>

Tree Structure of Web Pages

The Document Object Model (DOM) represents HTML elements as a tree (e.g., html, head, body, etc.).

The DOM

• The DOM is the browser’s internal data structure containing the Web page content.
• It is constructed as a tree by reading the HTML file.
• Browsers typically build the DOM in a depth-first manner.

Collaboration with the Browser

• Your HTML and web programming code plug into larger systems and frameworks.
• Both the browser and your code work together to produce the final Web page.
• Understanding these systems helps you use them effectively.

Syntax Details

• Start your HTML files with <!doctype HTML> to indicate HTML5.
• Whitespace only matters to separate words.
• Capitalization in tags and attributes is not significant.
• The <head> section usually includes a <title> (displayed in the browser tab).
• <meta charset="utf-8"> is a self-closing tag that sets the character encoding.