reginawang3495 / learning-lab-crash-course-su20

notes & code samples for learning labs (front end web dev) crash course over summer '20

Learning Labs Summer Crash Course (Summer '20)

Hey there! This is a repository that contains all of the notes for ACM @ UCLA's Learning Labs Crash Course, which we held online during the summer of 2020. We developed this series to give developers with zero prior web development experience enough of a primer to make high-quality beautiful and interactive front-end applications.

While these notes are a good starting point, simply reading through all of these notes is not nearly enough to become a pro web developer! We aimed to give enough of a foundational background and a primer into each relevant area; however, to make great web applications, developers need to practice aggressively.

Table of Contents

Lessons:

• Lesson 01: Intro to HTML & CSS
• Lesson 02: Intermediate CSS: The Box Model & Positioning
• Lesson 03: Intro to JS
• Lesson 04: Intermediate CSS: Flexbox & Grid
• Lesson 05: A Brief Flyover of CSS Frameworks
• Lesson 06: A CSS Animations Primer
• Lesson 07: Intro to React
• Lesson 08: Intro to Design with Figma (guest lecturer: Tomoki!)
• Lesson 09: Intermediate React (Concepts & Patterns)
• Lesson 10: Intro to SASS
• Lesson 11: React Hooks
• Lesson 12: JS Library Tour
• Lesson 13: Accessibility on the Web (guest lecturer: Karen!)
• Lesson 14: Misc. DevOps
• Lesson 15: Async & Fetch
• Lesson 16: Intro to Backend Development
• Lesson 17: Intro to Testing in JS
• Lesson 18: Intro to Firebase

And two tasks:

1. Make a portfolio website!
2. Make a to-do list!

You can also find recorded videos of our summer sessions on the ACM YouTube channel, in this playlist.

Licensing and Attribution

These notes were mostly written by Matthew Wang (@mattxwang) and Leo Krashanoff (@krashanoff). Many thanks to our guest lecturers, Tomoki and Karen. They would like to also thank ACM Hack, the Mozilla Developer Network, and W3Schools, for providing inspiration for some of these notes.

These notes are published with the Creative Commons Attribution 4.0 International License (link to legal), and all of the code samples with the MIT License. You are free to use them however you wish. If you do, let us know - we'd love to know how you used them, and how we can make them better.