INFO 253 - Front End Web Architecture

Kay Ashaolu

Teacher and TA Introductions

Course Goals

  • -> "magic" -> web page
  • Demystify "magic"
  • Learn how to build "magic" with existing tools
  • With a focus on what you see in the browser
  • Know the challenges of building "magic"
  • What is the front end? Why should I care?

Course Layout

  • Wednesdays 12:30 pm - 3:30 pm
  • First half of semester: Two 50 minute lectures and a 50 minute office hour/demo session
  • Second half of semester: One 90 minute lecture and 90 minutes of group project work / weekly standups
  • All lectures, assignments, and class prep will be posted on our course GitHub repository
  • Course website:
  • All course communications will be conducted on CampusWire

Course Work

  • 5 individual homework assignments building an web application
  • 1 group project building an web application

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

More on the project

  • The group project is an opportunity to build something cool with other students
  • Must be in groups of 4-5. There are no exceptions to this rule
  • You will first form teams and draft up a proposal of what you would like to build, and we will give you feedback

More on the project

  • This will be assigned around the second half of the semester
  • There will be presentations and a report
  • All of this is due at 11:59 pm on the due date assigned
  • We will be publicizing the final project presentations this year, and your projects will be on the ischool website

More on the project

  • There is even more of a focus on the final project for this class
  • There will be no assignments assigned while you are working on your final projects
  • Last half of class for the second half of the semester will be devoted to working on your projects and doing your weekly standup

What is a standup?

  • Feedback that I have heard is that you like the practicality of this class
  • This year we will take a step further
  • During the second half of each class in the second half of the semester, each team will have a 10 min weekly "standup"

What is a standup?

  • Standup is a meeting that is from the Scrum/Agile methodology you see in many software engineering companies
  • It is a way to ensure that no one is blocked and stuck on any issue, as well as give an opportunity for team members to help each other

What is a standup?

  • TAs and I will take turns conducting a weekly standup for each team lasting 10 minutes
  • We will ask you the following three questions to each member of the team:
    • What were you able to complete last week?
    • What are you currently working on
    • Most Important: What are you currently blocked on?

What is a standup?

  • We will be using the Project feature in Github to create what is called a Kanban Board
  • Live example: Kanban Example
  • This is a tool to document all of the tasks that you need to complete and where you are with that task
  • This is done in industry


  • Assignments: 50%
    • Graded on a numeric basis
  • Group Project: 50%
    • Graded on a numeric basis
  • There is no midterm nor final

Technologies you will use

  • Languages/Libraries
    • HTML
    • CSS
    • JavaScript
    • React
  • Tools
    • Git
    • Unix / Terminal

But don't worry

  • This is not primarily a programming class
  • Grades are based on the demonstration of understanding the base concepts
  • Grades are not based on extra bells and whistles, but are reserved for extra credit
  • We are here to help

This is a Graduate class

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


  • Me
    • Explain core concepts
    • Understand design trade-offs
    • Introduce new technologies
    • Tie everything together
  • You
    • Understand lectures and do class prep if assigned
    • Explore new technologies
    • Work independently and in groups

Wait List

  • So I have emailed some of you earlier about how I resolve the wait list
  • However, I didn't expect to have 70 students to sign up, and there is only 49 openings for the class
  • As of now only School of Information students are automatically enrolled in the class
  • The iSchool will automatically release the hold for INFO students on Friday, so people on the wait list will be enrolled then

Wait List

  • Unfortunately I can no longer make any determinations concerning your being accepted in the class
  • If you are on the wait list, please check on Friday if you have been enrolled
  • Please be on the lookout for emails concerning getting set up on Friday for the class
  • Also this course website will be publicly available if you are not able to get into the class


Why are you in this class?

The Web is important

  • Democratizes information
  • Decentralized
  • Low barrier of entry

The Web is built on composable parts

  • Internet
    • How data gets from one network to another
  • Network Stack
    • How data gets from one computer to another
  • Browsers
    • One (of many) destinations data goes to
  • HTML/CSS/JavaScript/Images
    • One (of many) representations of data transmitted over the web

Highway vs Railway

Highway: Simple and Composable

  • Any machine with wheels can use it
  • Cars can drive on any highway, but also off-road
  • Motorcycles and trucks can use roads as well as highways
  • Uncoordinated

Railway: Complicated but Efficient

  • Must have the right track gauge
  • Must coordinate with other traffic
  • If you upgrade one part of the system, everything else must be upgraded
  • Need specially made vehicles for railway

The Internet is like a highway

  • More like an interconnected large set of highways
  • It’s the longest running computer system in the world
  • Protocols (UPS) are agnostic of their content (packages)
  • Pieces can be upgraded incrementally


  • A protocol is a system of rules of transmitting data
    • UPS has a system of trucks and vans that get packages from one place to another
  • Data is delivered to a destination (browsers)
    • Just like packages deliver to a destination (address)
  • Data can be interpreted, and used as information
    • Like packages can be appreciated in a number of different ways

Browsers interpret data into information

Browsers interpret data as text
  • HTML
  • CSS
  • JavaScript
Browsers interpret data as other media
  • Images
  • Music
  • Video