Hi there! These are written notes, code demos, and checkpoints for a workshop that I (Matt, he/him) ran at UCLA Engineering's Transfer Accelerator '21. The focus of this workshop is to teach a variety of engineering students how to code and deploy their own personal portfolio website. We teach HTML, CSS, and a working knowledge of git and GitHub - all without assuming any prior programming experience. By the end of the workshop, they'll come away with their own workshop.
As a note: this is technically "one workshop", but it's broken up into bite-sized chunks - feel free to take a peek at whatever interests you. Each chunk contains everything (code, etc.) you need to start it!
This repository has a lot of stuff going on, and it's a long workshop! Here's an itinerary with each logical part, and a link on how to get started/how to catch up.
- intros | 9:00 - 9:15
- intro to HTML & CSS: structure and style | 9:15 - 10:00
- ~ inspo interlude ~ and selling yourself | 10:05 - 10:30
- intro HTML & CSS: position and layout | 10:30 - 11:30
- Work Period | 11:30 - 12:00
- Lunch Break! | 12:00 - 12:30
- using
git, GitHub, and GitHub Pages | 12:30 - 1:00 - Work Period | 1:00 - 2:00
- showcase and next steps! | 2:00 - 2:30
The Transfer Engineering Center graciously recorded parts of the workshop us! Here they are, broken up in chunks:
- overview + intro to HTML & CSS: structure and style
- intro HTML & CSS: position and layout
- using
git, GitHub, and GitHub Pages - next steps
The other portions were not recorded - but feel free to refer to the notes!
The short answer: just how to use a computer! We don't assume any prior programming experience :)
(However, we do assume that you have any email account, and that you have internet!)
Yup! You've got a few options:
- reach out in the transfer accelerator Discord - our student mentors and instructors will be able to help you out!
- ask matt! he's in the transfer accelerator Discord, but you can also reach him at matt@matthewwang.me
- see the below section :)
I've got a question on a topic that's not directly covered in this workshop. Where should I look for help?
Good question! Luckily for us, the internet has tons of great resources, including Google! If a quick Google isn't super helpful, consider:
- asking during the workshop!
- checking out documentation - the MDN docs are the defacto gold standard for anything web
- use StackOverflow! There's no shame, and it's likely that many others have run into your problem too!
- ask us in the mentor discord! we don't byte :)
Glad you asked! I (Matt) am an incoming fourth-year CS & Math-Econ major at UCLA, and the current president of ACM at UCLA. I'm really passionate about education, technology, and their intersection - which is something that I love doing at ACM! I'm also focused on about making tech a more diverse and welcoming place, which is an issue that definitely needs some work. I also used to run our outreach wing, ACM Teach LA I spend a lot of time working on EdTech, training developers, and doing mentorship - feel free to ask me about that!
In terms of work experience, I'm definitely not an absolute professional, but I've done quite a bit of web development over the years! I've worked with web technologies in a variety of contexts - in a startup, in a mid-sized company, at a handful of big tech companies, and in personal projects. HTML and CSS (the content of htis workshop) are the bread and butter of everything I do; beyond that, I've spent a bit too much time with React. The bigger list includes:
- web design with Photoshop, Figma
- frontend javascript: React, Angular, jQuery, typical vanilla JS, many libraries!
- backend-adjacent: webservers with Python (Flask, Django), PHP, Java
- databases: SQL, Firebase/Firestore/RTDB, some MongoDB
- devops: CI/CD (GitHub Actions, Netlify, Travis CI, AppVeyor), Docker, Kubernetes
- misc: git(hub), Electron, a handful of AWS things, static site generators
If you've got questions about these things, or more broadly anything related to web development, feel free to hit me up through Discord or via email!
Matt has taught a few variants of these workshops before; past iterations include:
- Learning Labs Crash Course - Lesson 01: Intro to HTML & CSS
- Learning Labs Crash Course - Lesson 02: Intermediate CSS: The Box Model & Positioning
- Learning Labs Crash Course - Lesson 04: Intermediate CSS: Flexbox & Grid
- Learning Labs Crash Course - Task 1: Make a Portfolio Website!
He'd also like to thank:
- Leo for co-writing the Learning Labs Crash Course
- ACM Hack for providing some of the examples that we used to write the Learning Labs Crash Course
- the Mozilla Developer Network for providing many of the documentation examples for our code
- our ACM mentors Advaith, Ellie, John, Raph, Reiya, and Stephen for helping out on the day-of!
- our accelerator mentors Aditya, Allaine, Chris, Harvey, JJ, and Ryan for helping out on the day-of!
The contents of this repository are dual-licensed under the MIT License and the Creative Commons Attribution 4.0 License; feel free to use whichever license suits your purpose better.
I'd love to hear if you found this helpful, or if you have any suggestions! Please send me an email at matt@matthewwang.me.