Skip to content

CSS and React workshop

Photo of Candace Lazarou
Hosted By
Candace L.
CSS and React workshop

Details

IMPORTANT: SEE THIS REPO FOR THINGS YOU SHOULD DOWNLOAD AND INSTALL BEFORE THE WORKSHOP
https://github.com/michelle/compokemon-go#prerequisites

Please join us for a 2 part workshop on CSS (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS) and React (https://facebook.github.io/react/docs/why-react.html), hosted by Michelle Bu. This is a collaboration between WWCode East Bay and WWCode SF (which means that it will probably fill up faster than usual, so be sure to RSVP soon), and the event is taking place at Stripe's offices in SAN FRANCISCO!

Overview
When building UIs, we often find ourselves writing the same code again and again because in the typical codebase, it's hard to find and tease out the components that are reusable. We can get around this by building UI components--the building blocks of our web app--first. Modern web frameworks like React make writing clean, testable, and reusable UI components easy. Let's build one ourselves!

Parking
Stripe is near the 16th st. BART station, and street parking is usually doable around their office. Bikes can be parked inside the building.

Schedule
6:00-6:15 Arrive, enjoy snacks and beverages provided by Stripe

6:15-6:30 A word from Stripe: technologies used, and how to join the Stripe team

6:30-6:40 Why would I want to write a component library?

6:40-7 Setting up the foundation for our component library (HTML/CSS recap and tips for how to write maintainable HTML/CSS)

7-7:20 React 101(7:20-7:25: basic git for folks who haven't used git.)

7:20-8 Let's build a component*!

  • There will be a variety of components to choose from--beginner/intermediate/advanced & practical/useless.
    What to do BEFORE the workshop:
  1. If you don’t have one, set up a GitHub account (https://github.com/join)

  2. Know the basics of git (newbies, check this tutorial (https://try.github.io/levels/1/challenges/1). we can help you out during the workshop)

  3. Know the basics of HTML/CSS, how the DOM works, and the fundamentals of programming (newbies, check out CodeAcademy's HTML/CSS tutorial (https://www.codecademy.com/learn/web), this Javascript tutorial (https://www.codecademy.com/courses/javascript-intro/0/1), and this explanation of the Document Object Model (https://css-tricks.com/dom/) at css-tricks.com)

  4. Download Michelle’s repo with everything you’ll need for the workshop ( https://github.com/michelle/compokemon-go#prerequisites - make sure to do this at home because you won’t have time to actually participate if you wait until the event!)

What to bring:

  1. Your laptop

Want to learn more about how components can be helpful? Here’s Michelle's talk at CSSConf (https://www.youtube.com/watch?v=ALEGHlwMXxs).

Want to learn more about React? https://facebook.github.io/react/docs/why-react.html / https://facebook.github.io/react/docs/thinking-in-react.html (https://facebook.github.io/react/docs/thinking-in-react.html)

Michelle Bu is an engineer at Stripe, where she currently works on the machine learning products team. She's also previously worked with (fun) things like generating PDFs, automating faxes, and faking debit card refunds. See Michelle's GitHub repo (https://github.com/michelle) and blog (http://blog.michellebu.com/2013/03/21-nested-callbacks/) for more info.

This event is intended for women, and trans/non-binary folks are emphatically welcome. If you have any questions, please email candace@womenwhocode.com

Photo of Women Who Code East Bay group
Women Who Code East Bay
See more events
Stripe
3180 18th St · San Francisco, CA