Hacker's Roadmap

Full-Stack Web Development

HTML & CSS
- Intro to HTML
- Learn to Code HTML & CSS
Project: Build your personal website using just HTML/CSS!
- Don’t worry if you don’t know how to start! Revisit the tutorials and Google your questions! Starting is always the hardest part.
- Optional for debugging: If you use Chrome, use Chrome Developer Tools by right-clicking and selecting “Inspect” to debug and edit any website in-browser
Responsive Web Design
- What does responsive mean?
- Examples of responsive web design
- What is Bootstrap?
- Check out Bootstrap Components
  - Note: Bootstrap’s documentation has example code snippets which show you how to use different components/widgets which you can just copy and paste into your code.
- Bootstrap Grids Tutorial
- Bootstrap Nav Bar Tutorial
Project: Upgrade your personal website to be responsive and use a nav-bar component!
- Note: you can use different frontend frameworks such as Foundation, Materialize, SemanticUI, etc if you prefer.
Javascript
Project: Add animation, interaction, or a form to your website using Javascript!
You know enough to build static frontend websites! Keep practicing by making websites till you feel more comfortable.

This section is not required, but encouraged if time permits. If you do read anything here, read up on #2: Templating Engines and #4: Using CDNs.

jQuery
- Note: jQuery is typically not used for large projects, and is seen more in small purely frontend projects. So having some idea of what it looks like is useful.
Templating Engines
- Introduction
- Handlebars.js Example
CSS Preprocessor: Sass
- Sass
- Code Example
Using 3rd Party Javascript Libraries
- Tutorial: Isotope Tile Library
- Referencing External JS Libraries: CDNs

Installation
1. Install npm and node.js
Package/Dependency Managers
- What is npm?
- Basic npm commands
React.js
react-router
Project: Build a restaurant menu using React.js while trying to separate the view from the underlying data.
Redux
- Introduction
  - Part 1
  - Part 2
- Build a Todo List
- Build a Reddit Feed
Project: Build a new react app using redux.

Framework Specific Tutorials

Try choosing 1 particular framework (ie Node.js, Django, Ruby on Rails (RoR), etc.) and stick with it till you are comfortable with implementing the concepts you read about above. Then feel free to experiment with other frameworks to gain exposure in how they also implement the same thing.
Note: UCLA students tend to have more experience with Node.js due to UCLA ACM mentors/workshops/events, so it’s recommended you learn Node.js first if you are a UCLA student for the larger support community.

Node.js	Django	RoR
Installation	Installation	Installation
Video Tutorials	Official Tutorials: Part 1 - 7	Michael Hartl’s RoR Book
Build a Web API	Build a Web API	Build a Web API
Build an online shopping cart	Build a blog Tutorial

Project: Build your own full-stack web app using any frontend/backend technology you want!
- Suggestions:
  - social media app
  - finance tracker app
  - event, food, etc. recommendation app
  - workout buddy finder app
  - Meetup, Twitter, Reddit, etc. clone
This completes your full-stack web development roadmap! Continue working on your own projects till you feel comfortable building your own API and web app.

Learn Swift
iOS Core Concepts
Important Concepts
Guided Tutorials
- Build a Card Matching Game: Video Series
- UITableViewController
- Build a SoundBoard App: Video Series
- Animation Tutorial
Introducing Other Types of View Controllers
- in iOS apps you often put different view controllers together to create the full app storyboard (i.e. UITableViewController, UITabBarController, UICollectionViewController)
CocoaPods
Build your own app!
Other Advanced Topics
- Delegates & Protocols
  - What is it?
  - Example

Topics: Python, pandas, numpy, matplotlib, machine learning concepts and project tutorials

Learn Python
Setup virtualenv to create and work in a Python virtual environment
- Why use it?
- How to use virtualenv
- What is requirements.txt?
  - A Better pip Workflow
  - pip freeze
Introduction to pandas
- Note: you can follow along with as much of the tutorial as you want till feeling comfortable with Pandas
Introduction to numpy
- Part 1
- Part 2
Matplotlib Tutorial: Political Tweets
Machine Learning Concepts
Feature Engineering Tutorials
- Video Game Reviews
- Thanksgiving Foods
Data Storytelling Tutorials
- NYC Education
- Fannie Mae Loan Foreclosure
- Video Series: Predicting the stock market
Do your own project!
- Choose a dataset from Awesome Public Datasets, clean the data, try to extract meaning/trends, and make predictions and classifications similar to the guided projects above.
Congrats, you’ve learned and done enough to gain enough knowledge to onboard to more complex data science and machine learning projects in the future!