Skip to content

learn how to code your own portfolio website (from scratch!) with HTML & CSS, and then deploy it with GitHub Pages! part of SEAS transfer accelerator!

License

Notifications You must be signed in to change notification settings

uclaacm/transfer-accel-portfolio-website-workshop

Repository files navigation

code your own website! (@ transfer accelerator '21)

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!

Table of Contents

Workshop Schedule

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.

FAQs

Where can I find videos?

The Transfer Engineering Center graciously recorded parts of the workshop us! Here they are, broken up in chunks:

The other portions were not recorded - but feel free to refer to the notes!

What do I need to know to take this workshop?

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!)

I'm a bit stuck on my website. Can I get help?

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 :)

Who is Matt?

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!

Resources and Thanks

Matt has taught a few variants of these workshops before; past iterations include:

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!

Licensing

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.

About

learn how to code your own portfolio website (from scratch!) with HTML & CSS, and then deploy it with GitHub Pages! part of SEAS transfer accelerator!

Resources

License

Stars

Watchers

Forks