Introduction

INFO 153A/253A: Front End Web Architecture

Teacher and TA Introductions

Course Goals

  • Demystify "the front end" (whatever that means)
  • Understand how to build interactive user interfaces
  • Respect and understand the challenges of building these user interfaces

Course Layout

  • INFO 153A - Undergraduates
  • INFO 253A - Graduates
  • Both courses have the same lecture and lab time as well as learn the same material
  • Course work differs for each class

Course Layout - Schedule

  • Monday (lecture) 9:00 am - 11:00 am PDT (in-person)
  • Friday (lab) 9 am - 10 am PDT (in-person)
  • All lectures will be recorded for future viewing, but no remote join allowed
  • Lectures: One hour lecture, followed by 1 hour in-person project
  • Lab: Time to start lab + answer questions

Setup Checklist

  • Fill out survey form before Friday's class
  • Find our website for syllabus, assignments, and schedule of class
  • Send your github username through the form so we can add you to our github organization
  • Set up your coding environment

Course Work

  • Non graded in person assignment
  • 2 major homework assignments building a web application
    • Assignment 1: Task Manager UI (HTML/CSS)
    • Assignment 2: React Task Manager (convert Assignment 1 to React)
  • 4 Labs (253A), 8 Labs (153A)
  • Group project (253A), Take home exam (153A)

AI Policy

  • Initial assignment submissions: NO AI (learn fundamentals first)
  • Resubmissions & final projects: AI ENCOURAGED

More on Assignments

  • Assignments must be done individually, but you can ask others for help
  • Assignments are due at 11:59 pm on the day they are assigned to be due
  • Every day it is late after that we will deduct 5 points from the final score
  • If you have any problems, please let us know
  • You will be given a github classroom link to generate your own git repository where you will save your work
  • You will submit your work submitting the link to your repo in bCourses

More on Labs

  • Labs provide opportunity to try out what you learned
  • Labs will be graded on a simplified basis out of 10:
    • Correct: 10/10
    • Not correct, but shows significant effort: 8.5/10
    • Not correct, low to no effort: 7/10
    • No submission: 0/10
  • You will be given a github classroom link to generate your own git repository where you will save your work
  • You will submit your work submitting the link to your repo in bCourses

More on the Group Project

  • INFO 253A only
  • The group project is an opportunity to build a project you come with other students
  • Must be in groups of 4-5. There are no exceptions to this rule
  • We will form teams and ask you to draft up a proposal of what you would like to build, and we will give you feedback. Then you will build your proposal
  • There will be presentations the last day of instruction on the week before RRR week

More on the Take Home Exam

  • INFO 153A only
  • During the last week of instruction - in person
  • Will be similar to an assignment, but meant to be done within an hour

Grade Breakdown

INFO 253A INFO 153A
Class Participation: 10% Class Participation: 10%
Labs: 20% Labs: 40%
Assignment: 30% Assignment: 30%
Group Project: 40% Take Home Exam: 20%

What counts as class participation?

  • Come to class
  • Ask Questions
  • Do in person assignments

Readings?

  • After some thought and research, we are moving away from textbook readings in the class
  • In this day, it's a bit rare for software engineers to learn new technologies by reading a book from beginning to end
  • We will use three courses from there for our class prep:

Required Video Courses:

Course Structure: Maximum 2 hours prep per week - watch only essential videos. Deep dives happen in class!

Technologies you will use

Languages/Libraries

  • HTML/CSS
  • JavaScript
  • React
  • CSS Framework
  • Ollama (LLM)

Tools

  • Git
  • Unix/Terminal
  • Microsoft Visual Studio Code
  • Chrome with React Development Tools

But Don't Worry

  • This is not primarily a programming class
  • Focus on fundamentals first - that's why no AI initially
  • Grades are based on the demonstration of understanding the base concepts
  • Grades are not based on extra bells and whistles
  • After you understand basics, AI will help you build amazing things
  • We are here to help

This is still a Graduate Class

  • Perform well without supervision
  • Understand classroom prep materials from a variety of different areas on the web
  • Ask for help proactively
  • Get frameworks working on your own

Responsibilities

Me

  • Explain core concepts
  • Understand design trade-offs
  • Introduce new technologies
  • Tie everything together

Responsibilities

You

  • Complete 2-hour video prep before each class (essential for participation)
  • Understand lectures and engage in interactive activities
  • Explore new technologies (AI encouraged after fundamentals)
  • Work independently and in groups

Wait List

  • INFO 253A is set aside for Grad Students: This comes as a first come first served basis
  • INFO 153A is set aside for Undergrad students: This comes as a first come first served basis
  • The waitlist order for both classes will be honored
  • Due to fire code restrictions, enrollment is limited to 49 students per class
  • No class expansion is possible beyond this limit

Wait List - Auditing

  • Apologies, but there will be no auditing this class this year
  • Course materials will be publicly available if you ultimately are not able to enroll into the class

How Our Learning Approach Works

Before Class (2 hours max):

  • Watch only essential videos
  • Focus on "what" not "why"
  • Get basic familiarity
  • Tips: Watch at 1.5x speed, skip intros/outros

During Class (2 hours):

  • Deep dive into concepts together
  • Live coding and practice
  • Answer the "why" questions
  • Debugging and problem-solving

After Class (optional):

  • Extended practice with AI assistance
  • Explore advanced topics
  • Work on assignments

Questions?

So what is this class really about?

  • Good Question
  • With the exception of mobile native applications, we now primarily interact with the internet using user interfaces powered by web technologies
  • Even some mobile applications themselves are powered by web technologies

Focus on the browser

  • We will be focusing on how to make your web browser an interactive internet powered canvas
  • In the process, we will go through the philosophies of the internet, of web development, and the why things are the way they are
  • By understanding not just the how, but the why, you'll be able to better be prepared for future trends, and better build and understand current systems

Focus on personal development

  • Even though we will be focusing a lot on building software, this is not a bootcamp course
  • You will all come away with different skills and takeaways from this material
  • Let's go through some scenarios

For Backend/Data Engineers

  • This class will enable you to see how the services that you build are consumed for user delight
  • You can appreciate some of the tradeoffs front end engineers have to make to use your services
  • You'll see how your skills translate (or not) to user interface engineering

For UI Designers

  • This class will enable you to see how the designs that you build are translated into code that brings it to life
  • You may also start to notice how designs are broken down into individual reusable components, and perhaps how you can use that understanding in your future designs

For UX Designers

  • This class will enable you to see how the user interactions you build your widgets on are actualized
  • The technical tradeoffs that exist when building UI widgets can inform your future designs in what may (or may not) be possible from an engineering perspective

For Computer Scientists

  • This class will enable you to use your programming skills to build actual UI's that can be used by real users
  • You will see how some of the data structures and coding constructs (e.g. functional programming) that you learn from classes are inherent in building user interfaces

For Product Managers / Business Leaders

  • This class will enable you to experience first hand what it takes to build a user interface from scratch
  • This class also can give you a sense on how long new features take to build
  • This class can provide understanding on what programmers on your team go through on a daily basis, giving insight on how to better direct the future of your product

Data Scientist

  • This class will take you away from writing code to analyze data to writing code to build products based on the data that you have analyzed
  • This course could also give insights on how to build better visualizations of the data that you may have not have considered before

ML Engineer

  • This class will enable you to build front ends that connect the user to the models that you train and release to the world
  • This class will help you be able to connect with full stack engineers and better understand their considerations and needs and can incorporate those concepts to your model/pipelines

Questions?