Introduction
INFO 153A/253A: Front End Web Architecture
Kay Ashaolu
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 lectuer and lab time as well as learn the same material
- Course work differs for each class
Course Layout
- M 12:00 pm - 2:00 pm PDT (in-person)
- F 1 pm - 2 pm PDT (in-person)
- All lecturers will be recorded for future viewing, but no remote join allowed
- Lectures: A short lecture followed by two activities/programming exercies
- Lab: Time to start lab + answer questions
Setup Checklist
-
Fill out survey form before Monday's class
-
Find our Bcourses website for syllabus, assignments, and schedule of class
-
Join our Discord Server for communications for the class
-
Send your github username through the form so we can add you to our github organization
-
Set up your coding environment (we will do this in monday's class together)
Course Work
-
Activities/programming assignments given every lecture
-
2 major homework assignments building a web application
-
6 Labs (253A), 9 Labs (153A)
-
Group project (253A), Take home exam (153A)
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 on the last lecture of class during RRR week
More on the Take Home Exam
- INFO 153A only
- During first week of finals, will be given a take home practical
- Will be similar to an assignment, but meant to be done in 2 hours or less
- Will have seven days to complete
Grade Breakdown
INFO 253A | INFO 153A |
---|---|
Class Participation: 20% | Class Participation: 20% |
Labs: 20% | Labs: 30% |
Assignment: 30% | Assignment: 30% |
Group Project 30% | Take Home Exam: 20% |
What counts as class participation?
- This class will be a reverse classroom this year
- This means you will be given material to learn and practice what we are learning outside of class
- And then we go to class to do live activities
- Each lecture will have a short section in the beginning to highlight hard points in the reading
- And then we will do programming activities in class as teacher + ta help students. We then present student's solutions and talk about them
What counts as class participation?
- In class attendance is mandatory in order to do these activities
- Class participation will be graded by the following
- Lectuer: If you attempt to do the activity and push the code to github during lectuer? Full credit for the day. If not, no credit
- Lab: If you attempt to do the lab and push the code to github during lab? Full credit for the day. If not, no credit.
- Activities will not be graded for content. Labs will be graded for content, but they are due the next Tuesday
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 four courses from there for our readings:
- Modern HTML and CSS from the Beginning (Including Sass) by Brad TraversyLinks to an external site.
- Modern JavaScript from the Beginning - Second Edition by Brad TraversyLinks to an external site.
- Tailwind CSS From Scratch - Learn by Building Projects by Brad TraversyLinks to an external site.
- React Front to Back 2022 by Brad TraversyLinks to an external site.
Technologies you will use
Languages/Libraries
- HTML/CSS
- Sass and Twisted (possibly)
- JavaScript
- React
Tools
- Git
- Unix/Terminal
- Microsoft Visual Code
- Chrome with React Development Tools
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
- 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
You
- Understand lectures and do class prep if assigned
- Explore new technologies
- Work independently and in groups
Wait List
-
INFO 253A is set aside for Grad Students: there are 39 spots for this class. School of Information students have priority until today. After today it is a first come first served basis
-
INFO 153A is set aside for Undergrad students: there are 10 spots for this class. This comes as a first come first served basis
-
The waitlist order for both classes will be honored after today
Wait List
-
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
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
Backend/Data Engineer
- 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
UI Designer
- 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
UX Designer
- 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
Computer Scientist
- 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 the data structures and coding constructs (e.g. functional programming) that you learn from classes are inherent in building user interfaces
Product Manager / Business Leader
- 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
Questions?
Introduction - Frontend Webarch
By kayashaolu
Introduction - Frontend Webarch
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 836