It's easy to feel lost in the world of tech or not know where to start. We created Hackschool to give you a place to start in this wonderful universe of possibilities. We wanted to fill the gaps between what is taught in class and what is needed to build change you'd like to see in the world. Over the next 8 weeks, we'll alternate between Learn and Hack sessions, where we'll introduce a new topic with mentors on-hand to help, and then spend the following week building out a mini-project to apply it. By the end, you'll have glimpsed a little bit of everything behind the websites you visit every day.
In this repository, you'll find a guidemap to all the topics we introduce this quarter, and links to helpful resources.
We hope you have a blast this quarter, and encourage you to reach out to any of us if you have any questions or comments. Private concerns can be addressed to the current Hackschool Director, Shannon Phu, at skphu@ucla.edu.
- Course Curriculum
- Essential Links
- What You'll Need for the Entire Course
- Helpful Docs & Tools
- Learning Beyond Hackschool
Each week, we will alternate between "Learn" and "Hack" sessions. During Learn sessions, students will be taught new material and follow along with our instructors in writing some basic code. During Hack sessions, students will apply the knowledge gained from the previous teach session to build a project that we will guide you in making.
- Week 1: Learn HTML & CSS
- Week 2: Build a personal website
- Week 3: Learn Bootstrap and JavaScript
- Week 4: Build an interactive photo gallery
- Week 5: Intro to backend web development: Node.js
- Week 6: Build your first web app
- Week 7: Advanced backend topic: databases
- Week 9: Finish your first web app
-
A positive attitude. We'll encounter plenty of frustration along the way, but that makes the later joy all the better.
-
A text editor. We recommend Sublime Text 3 as a default choice, but VS Code and Atom are also excellent choices. If you already use another editor, that's perfectly fine. Don't worry about using the "best" one; any modern editor is more than enough for what we'll tackle this quarter.
-
Google Chrome: it has the best developer tools and the most market share of any web browser
Bonus items (if you have time; these are not needed for frontend web development):
-
Create a GitHub account
-
If you're on a Mac, you may later run into issues where software is missing. To prevent this, install Xcode from the App Store. Then run
xcode-select --installin Terminal. This will install command-line tools that we'll need later on. Here's a tutorial with screenshots -
Download and install the LTS version of Node.js. We don't recommend using the latest version because of how quickly new Node versions are introducing, often leading to unexpected breakages when the newest version is incompatible with other code you're using.
-
(Advanced) If you're on a Mac, you'll eventually want Homebrew to manage installing command-line tools and n to manage different versions of Node.js.
-
http://jsbin.com/ for quick in-browser prototypes
-
Mancy if you want an interactive JavaScript prompt (called a REPL: Read, Evaluate, Print, Loop)
-
http://codepen.io/ to share ideas with other people
-
You'll find the Mozilla Developer Network (MDN) documentation very helpful for looking up the particulars of a built-in function or CSS property.
For HTML and CSS:
- Interneting is Hard is a beautiful and complete tutorial
For JavaScript:
-
Codecademy if you've never programmed before
-
A Reintroduction to JavaScript if you've touched JS a bit before
-
JavaScript 30 for a free 30-day series of daily mini-projects
-
You Don't Know JS to learn the language more deeply
-
freeCodeCamp for a massive, highly comprehensive curriculum covering everything you would need to know to start a new career as a software engineer