Front-End Web Architecture
Fall 2025 • UC Berkeley School of Information
Lecture
Monday, 9:00 AM - 11:00 AM
210 South Hall
Lab
Friday, 9:00 AM - 10:00 AM
210 South Hall
Instructor
Kay Ashaolu
Email: kay@ischool.berkeley.edu
Office Hours: Tue/Thu 4:00-4:30 PM (Virtual)
GSI
Suk Min Hwang
Email: sukmin@berkeley.edu
Office Hours: MW 1:00-2:00 PM (Co Lab), F 10:00-11:00 AM (Room 210)
Announcements
All Grades Posted + Extra Credit Exam This Friday (Dec 5)
📋 Please Complete Your Course Evaluations
Our current completion rate is 44% - we need to reach the department standard of 70%. Your feedback is invaluable for improving this course for future students. Please take 5-10 minutes to complete your evaluation.
📊 All Grades Have Been Posted
All grades for the semester have been released on bCourses:
• Labs 1-7 ✅
• Assignment 1 & 2 ✅
• Final Exam (153A) ✅
• Group Project (253A) ✅
• [NEW] In-Person Attendance (Participation Grade) ✅
You now have everything needed to calculate your final grade. See the Grading section for grade weights and letter grade ranges.
🎯 Extra Credit Exam - This Friday, December 5
• Where: In-person during lab session
• Worth: 10 bonus points toward one of your assignments
• Grading: All or nothing - 10 points if all requirements pass, 0 points otherwise
• Note: If you have perfect scores on assignments, this can push your total above 100%!
⏰ Exam Timing (IMPORTANT)
• 9:00 AM: GitHub Classroom link provided, repos created
• 9:10 AM: You may BEGIN working
• 10:00 AM: HARD STOP - All code must be pushed
• Commits after 10:00 AM will NOT be accepted
• bCourses submission REQUIRED after pushing (can be after 10 AM)
💻 What to Bring:
• Laptop with Node.js installed
• Be prepared to build a React application from scratch
• AI tools (ChatGPT, Claude, GitHub Copilot) are allowed and encouraged
Course Overview
This course is a survey of technologies that power the user interfaces of web applications on various devices today. We will explore the core front-end languages and frameworks, and the underlying technologies that enable modern web applications.
🚀 How This Course Works
📹 Video Prep (2 hrs/week): Watch focused O'Reilly video chapters before each Monday lecture to learn core concepts at your own pace
👥 Monday Lectures: Recap prep material, introduce advanced concepts, and practice with hands-on in-class exercises for immediate feedback
🧪 Friday Labs: Apply the week's concepts through guided exercises that reinforce learning and prepare you for assignments
🔨 Two Major Assignments: Build a complete Task Manager app - first with HTML/CSS, then transform it into a React application
🎯 Learning Path: Master fundamentals → Practice in class → Reinforce in labs → Apply in assignments → Build something real
Learning Objectives
- Build semantic, accessible web pages using modern HTML5 and CSS3
- Create interactive user interfaces with JavaScript ES6+ features
- Develop single-page applications using React and modern JavaScript
- Implement responsive design that works across devices and screen sizes
- Integrate external APIs and handle asynchronous data operations
- Deploy web applications to modern hosting platforms
- Apply software engineering principles to front-end development
Prerequisites & AI Policy
- INFO 153A: CS 61A
- INFO 253A: Familiarity with programming in at least one language
🤖 AI Usage Policy
- Assignment and Lab Initial Submissions: NO AI (build fundamentals)
- Assignment Resubmissions: AI encouraged for enhancements
- Final Projects (253A): AI encouraged
- Take-Home Final (153A): AI encouraged
- Extra Credit Exam: AI encouraged
Assignment Structure
Assignment 1: Task Manager UI
Build a complete task management interface using HTML5 and CSS3
Focus: Semantic markup, responsive design, modern CSS
Timeline: 2-week window (Week 4-6)
Assignment 2: React Task Manager
Convert Assignment 1 into a fully interactive React application
Focus: React components, state management, user interaction
Timeline: 3-week window (Weeks 8-10)
Due: Friday, November 7th at 9 AM PST
Grading
INFO 153A (Undergraduate)
| Lecture Participation | 10% |
| Labs (7 submissions) | 40% |
| Assignments (2 total) | 30% |
| Take-Home Exam | 20% |
*Lowest 2 lab grades dropped
INFO 253A (Graduate)
| Lecture Participation | 10% |
| Labs (4 submissions) | 20% |
| Assignments (2 total) | 30% |
| Final Group Project | 40% |
*Lowest 1 lab grade dropped
📊 View Letter Grade Ranges - See how numerical grades map to letter grades
📋 View Detailed Syllabus - Complete syllabus with all course policies
Course Schedule
All students complete 2-hour video prep before each Monday lecture. Videos are from specific O'Reilly video courses with chapters listed below.
| Week | Date | Topic | Prep Materials | Lab/Assignment | Lecture Resources | Lab Resources |
|---|---|---|---|---|---|---|
| 1 | Aug 25 | Course Introduction |
Mandatory:
|
Fill out course form |
📊 Slides 🎥 Recording |
N/A |
| 2 | Sep 1 | HTML5 Fundamentals |
Mandatory:
|
Lab 1: HTML Structure | No Class - Holiday |
📊 Slides 🎥 Recording |
| 3 | Sep 8 | CSS3 Fundamentals |
Mandatory:
|
Lab 2: CSS Styling |
📊 Slides 🎥 Recording 📝 In-Person Project 1 |
📝 Lab 2 Example Code |
| 4 | Sep 15 | JavaScript Basics I |
Mandatory:
|
📝 Assignment 1 Release and Review Due: Friday, October 3rd at 9 AM PST |
📊 Slides 🎥 Recording 📝 In-Person Project 2 |
N/A |
| 5 | Sep 22 | Modern CSS Layouts |
Mandatory:
|
📝 Assignment 1 Review Due: Friday, October 3rd at 9 AM PST |
📊 Slides 🎥 Recording 📝 In-Person Project 3 |
N/A |
| 6 | Sep 29 | JavaScript Basics II |
Mandatory:
|
Lab 3: JavaScript Practice |
📊 Slides 🎥 Recording 📝 In-Person Project 4 |
📊 Slides |
| 7 | Oct 6 | DOM Manipulation & Events |
Mandatory:
|
Lab 4: DOM & Events |
📊 Slides 🎥 Recording 📝 In-Person Project 5 |
N/A |
| 8 | Oct 13 | React Introduction |
Mandatory:
|
📝 Assignment 2 Release and Review: Covering Vite Setup & First Component in Lab Due: Friday, November 7th at 9 AM PST |
📊 Slides 🎥 Recording 📝 In-Person Project 6 |
📊 Lab Slides |
| 9 | Oct 20 | React State & Interactivity |
Mandatory:
|
📝 Assignment 2 Review: Covering State Management & Events in Lab
Due: Friday, November 7th at 9 AM PST Group Project (Template) - Proposal Assigned - Due Oct 27 before 9 am PST (View Groups) |
📊 Slides 🎥 Recording 📝 In-Person Project 7 |
N/A |
| 10 | Oct 27 | React Effects, Context API & Data Fetching |
Mandatory:
|
📝 Assignment 2 Review: Task Filtering & Debugging Due: Friday, November 7th at 9 AM PST 📋 Group Project Proposal Due - Due Oct 27 before 9 am PST |
📊 Slides 🎥 Recording 📝 In-Person Project 8 |
N/A |
| 11 | Nov 3 | Advanced JavaScript |
Mandatory:
|
Lab 5: React Components (153A only) 253A: Work on group projects independently (not in classroom) |
📊 Slides 🎥 Recording 📝 In-Person Project 9 |
N/A |
| 12 | Nov 10 | Advanced CSS & Design Systems (Virtual via Zoom) |
Mandatory:
|
Lab 6: Advanced CSS (153A only) 253A: Work on group projects independently (not in classroom) |
📊 Slides 🎥 Recording (Second Half Only) 🔗 Zoom Joining Instructions 📝 In-Person Project 10 |
N/A |
| 13 | Nov 17 | React Router & Advanced Hooks |
Mandatory:
|
Lab 7: React Patterns (153A only) 253A: Work on group projects independently (not in classroom) |
📊 Slides 🎥 Recording 📝 In-Person Project 11 |
N/A |
| 14 | Nov 24 | 153A: Take-Home Final Practical Introduction (Virtual via Zoom) - Due Dec 1 at 9 am PST 🔗 Join Zoom (153A Only) 253A: Work on group projects independently (not in classroom) |
Mandatory:
|
No Lab - Thanksgiving Break 153A: Take-Home Final Practical - Due Dec 1 at 9 am PST 253A: Group Project Presentations and Code - Due Dec 1 at 9 am PST |
🎥 Recording 🔗 Zoom Link (153A) 📝 Take-Home Final |
N/A |
| 15 | Dec 1 | Group Project Final Presentations |
Mandatory:
|
Extra Credit Exam (Both 153A & 253A - Optional) 50-minute in-class exam for 10 bonus points (all or nothing) Applicable to any single assignment |
N/A | N/A |
Class Prep Strategy
Before Class (2 hours max)
- Watch only essential videos
- Focus on "what" not "why"
- Get basic familiarity
- Tip: Watch at 1.5x speed
During Class (2 hours)
- Deep dive into concepts
- Live coding together
- Answer the "why" questions
- Practice and debugging
Course Resources
bCourses
Assignment submissions and grades
GitHub Organization
Code repositories for labs and assignments
O'Reilly Learning
Free access to course video materials
Course Survey
Initial course setup and preferences
Required Course Materials
Modern HTML & CSS From The Beginning 2.0
Author: Brad Traversy
Video Chapters: 2, 5-8, 10, 15-16
Content: 24 hours total videos, ~8 hours for our course
Modern JavaScript From The Beginning - Second Edition
Author: Brad Traversy
Video Chapters: 2-9
Content: 36 hours total videos, ~12 hours for our course
React Front to Back 2022
Author: Brad Traversy
Video Chapters: 1-8
Content: 20 hours total videos, ~8 hours for our course
Getting O'Reilly Access
- Visit Berkeley Library O'Reilly Guide
- Click "O'Reilly for Higher Education"
- Select UC Berkeley and sign in with CalNet
- Search for the course titles above
Assignments
Two focused assignments designed to build your web development skills progressively.
🤖 AI Usage Policy
Assignment and Lab Initial Submissions
NO AI allowed
Build fundamentals yourself
Assignment Resubmissions
AI encouraged
Enhance and improve your work
Final Projects & Exams
AI encouraged
Group projects (253A), take-home final (153A), and extra credit exam
Assignment 1: Task Manager UI
Weeks 4-6 (2 weeks)Due: Friday, October 3rd at 9 AM PST
Goal: Create a beautiful, responsive task management interface
Skills You'll Master:
- HTML5 semantic markup
- CSS3 layouts (Flexbox/Grid)
- Responsive design patterns
- CSS animations and transitions
- Accessibility best practices
Deliverable: Static but beautiful task manager that works on all devices
Assignment 2: React Task Manager
Weeks 8-10 (3 weeks)Due: Friday, November 7th at 9 AM PST
Goal: Convert Assignment 1 into a fully interactive React application
Skills You'll Master:
- React components and JSX
- State management with hooks
- Event handling and user interaction
- Data persistence (localStorage)
- Component lifecycle and effects
Deliverable: Fully functional task manager with add, edit, delete, and filter capabilities
Grading Approach
Each assignment uses an itemized rubric with specific point values for features, similar to software engineering requirements:
- Functionality: Does it work as specified?
- Code Quality: Clean, readable, well-structured code
- Design & UX: Professional appearance and user experience
- Technical Implementation: Proper use of HTML, CSS, or React patterns
Final Projects & Exam
INFO 253A: Group Project (Template)
Proposal Assigned: Week 9 (October 20)
Proposal Due: Week 10 (October 27)
Presentations: Week 15 (December 1)
All Materials Due: Sunday, December 1 at 9 AM PST
Team Size: 4-5 students (instructor assigned for balanced skills) - View Group Assignments
Scope: Full-stack web application using course technologies
AI Tools: Encouraged for professional-level development
INFO 153A: Take-Home Final Practical
Exam Released: Week 14 Lecture (Sunday, November 24)
Due Date: Sunday, December 1 at 9 AM PST
Duration: 1 week practical project
Format: Individual practical coding project
Content: Demonstrates mastery of all course concepts
AI Tools: Encouraged - use AI assistants to build professional-level code
Lecture Session: Entire Week 14 lecture dedicated to Q&A and clarification - Join via Zoom (153A)
Note: No lab Week 14 (Thanksgiving break - November 28)
Extra Credit Exam (Both 153A & 253A - Optional)
When: Week 15 Lab (December 1)
Duration: 50 minutes in-class
Format: Single problem, in-class coding challenge
Reward: 10 bonus points applicable to any single assignment
Grading: All or nothing - full credit for correct solution, zero for incorrect
AI Tools: Encouraged - you may use AI assistants during the exam
Note: Available to both undergraduate and graduate students
Purpose: Optional exam for students seeking to improve their grade
Course Staff
Kay Ashaolu
Instructor
Office Hours: Tuesdays & Thursdays 4:00-4:30 PM (Virtual)
📅 Book 15-min slot
Email: kay@ischool.berkeley.edu
Suk Min Hwang
Graduate Student Instructor
Office Hours: MW 1:00-2:00 PM at Co Lab, F 10:00-11:00 AM at Room 210
Email: sukmin@berkeley.edu
Lab sessions and assignment support