Full Stack DeCal

I founded and ran UC Berkeley’s first official course on full-stack web development. In 5 semesters, we’ve grown the course to over 200 students per semester with a full set of readings, homework, and projects. These materials are updated every semester to reflect changes in the development ecosystem and align with student feedback. The class is sponsored by Professor Josh Hug.

Founding the Full-Stack DeCal has been one of the proudest accomplishments of my college career due to the sheer number of students who have gone through the curriculum (1000+) and the number of individuals who have audited the course or learned through our publically available materials - over 30,000 unique people have gone through our website and our materials! The scale of the impact this course has had is not the only piece, with many, many people having told me or other members of course staff that this course has helped them land a software engineering role, start a startup, or generally break into computer science. Of particular importance is the course’s friendliness to those without CS backgrounds and those who have achieved the this without a traditional programming background - anecdotally, there have been quite a few! I’m sure that the Full-Stack DeCal will continue to thrive and educate even more people while providing endless opportunities to anyone willing to participate.

Course Curriculum:

Part 1: HTML/CSS/JavaScript

This part of the course introduces students to web development fundamentals and lasts about 3 weeks. I didn’t want a programming background to be a barrier to taking this course, so the entire course, but especially this section, is geared toward fundamentals. For one of our assignments, we took a few of the early assignments from UC Berkeley’s Introduction to Computer Science and refactored them into JavaScript, along with additional questions to test JavaScript concepts.

Part 2: React.js

This is probably the hardest part of the course since the jump in the skill curve from vanilla JS to React is so high, especially for students who have just learned JavaScript a week or two prior. I tried to center the curriculum around explaining the fundamentals of react, such as components with JSX, props, and state in a way similar to how many CS courses introduce concepts, which is to introduce the problem that each of them solves and to build up a real-world analogy using these concepts. I found that taking the scary useState method and explaining it in terms of a house, something everyone is familiar with, helped a lot with understanding. The assignments were also fundamental, such as creating a basic social media platform.

Part 3: Backend concepts

To round out a full-stack education, we covered backend concepts using Node as the server-side language, express as our API construction, and MongoDB as our database. This way, students experience the full range of the MERN stack and have a way to build truly full-stack apps.

We also cover basic networking and cloud concepts, teaching HTTP/HTTPS, UDP, and TCP at a high level. Finally, we cover common AWS services, why they are used, and how they can connect to a full-stack project to replace certain backend, DevOps, and deployment functionalities.

Final Project:

To have students experience a larger portion of hands-on learning outside of smaller homework and 2-week long projects, the course has a final project that students, in groups of 4-5, complete over the last 6 weeks of the semester. The project is required to be full-stack in nature, using the full range of the MERN stack. There are checkpoints to ensure project proposals fulfill requirements, and each project group is assigned an experienced mentor from Web Development at Berkeley to oversee the project progress and answer technical questions.