Hacker's Roadmap

Table of Contents

• Full-Stack Web Development
  • Frontend Topics
    • Basic Frontend Web Development
    • Intermediate Frontend Web Development
    • Advanced Frontend Web Development
  • Backend Topics
• iOS Mobile App Development
• Data Science & Machine Learning

Full-Stack Web Development

Basic Frontend Web Development

Topics: HTML, CSS, Responsive Design, Javascript

1. Learn HTML & CSS
   • Option 1:
     1. Codecademy
     2. Tutorial: Make a website on your own computer
   • Option 2: Interneting is Hard
     1. Chapter 1: Introduction to Web Development
     2. Learn HTML
        • Chapter 2: Common HTML Tags
        • Chapter 3: Links and Images
     3. Learn CSS
        • Chapter 4: Intro to CSS
        • How to link CSS to your HTML
        • Chapter 5: Box Model
        • Chapter 6: Selectors
        • Chapter 7: Float
        • Chapter 9: Positioning
2. 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
3. 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
4. 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.
5. Javascript
   • Why JS?
   • Codecademy: Learn JS
   • Intro to the DOM
   • Using JS to interact with a website
     • Interacting with Forms
     • Altering the DOM
6. Project: Add animation, interaction, or a form to your website using Javascript!
7. Congratz! You know enough to build static frontend websites! Keep practicing by making websites till you feel more comfortable.

Intermediate Frontend Web Development

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.

1. jQuery Overview
   • 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.
2. Templating Engines
   • Introduction
   • Handlebars.js Example
3. CSS Preprocessor: Sass
   • Sass
   • Code Example
4. Using 3rd Party Javascript Libraries
   • Tutorial: Isotope Tile Library
   • Referencing External JS Libraries: CDNs

Advanced Frontend Web Development

Topics: NPM, React.js, and Redux

0. Installation
   1. Install npm and node.js
1. Package/Dependency Managers
   • What is npm?
   • Basic npm commands
2. React.js
   • Introduction
   • Hello, world Example
   • Build a tic-tac-toe game
3. react-router
4. Project: Build a restaurant menu using React.js while trying to separate the view from the underlying data.
5. Redux
   • Introduction
     • Part 1
     • Part 2
   • Intro Code Example
   • Video Series: egghead.io
     • Videos
     • Additional Commentary
   • Code Example: Todo List
6. Project: Build a new react app using redux.

Backend Web Development

1. What is frontend & backend development
2. Client-server Architecture Introduction & Analogy
3. What is an API?
   • Another Analogy
4. What is HTTP?
   • POST vs. PUT
5. What is REST?
   • What is the difference between HTTP & REST?
   • Designing a RESTful API: Best Practices
   • Designing a RESTful API: Another Example
6. Server-side Web Frameworks
7. Databases: what & why
   • Relational vs. non-relational databases
8. Piecing everything together: Full-Stack Application Architecture
9. 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

10. 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
11. Congratz! 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.

iOS App Development

1. Learn Swift
   • Part 1: Variables & Expressions
   • Part 2: Types & Operations
   • Part 3: Flow Control
   • Part 4: Optionals
     • Part A
     • Part B
   • Part 5: Classes
2. iOS Core Concepts
   • Option 1: Video Series
     • What is a view controller?
     • View Controller Life Cycle
     • More on IBOutlets & Common Mistakes
     • How to get help with UIKit
   • Option 2: Apple's Official Tutorial
     • Build the Basic UI
     • Connect the UI to the Code
     • More on IBOutlets & Common Mistakes
     • View Controllers
     • View Controller Life Cycle
     • Custom Views
     • How to get help with UIKit
3. Guided Tutorials
   • Build a Card Matching Game: Video Series
   • UITableViewController
   • Build a SoundBoard App: Video Series
   • Animation Tutorial
4. 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)
5. CocoaPods
   • Installation
   • AlamoFire Tutorial
   • Firebase Tutorials
6. Build your own app!
7. Other Advanced Topics
   • Delegates & Protocols
     • What is it?
     • Example
   • Memory Management

Data Science & Machine Learning

Topics: Python, pandas, numpy, matplotlib, traditional ML models, guided & unguided projects

1. Learn Python
2. 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
3. Introduction to pandas
   • Note: you can follow along with as much of the tutorial as you want till feeling comfortable with Pandas
4. Introduction to numpy
   • Part 1
   • Part 2
5. Matplotlib Tutorial: Political Tweets
6. Machine Learning Concepts
   • Option 1:
     • Guide from Adit Deshpande from ACM AI @ UCLA
   • Option 2:
     • Introduction:
       • A visual introduction
       • A more in-depth introduction
     • Linear Regression
       • Introduction
       • Cost Functions & Gradient Descent
       • More on gradient descent & overfitting
       • Code Example
     • K Nearest Neighbors (kNN)
       • Introduction
       • Terminology, Applications, and Trade-offs
       • Algorithm Visualization
       • Code Example: Breast Cancer
       • Code Example: Iris Flower
     • Support Vector Machines (SVM)
       • Introduction
       • Code Example
     • Logistic Regression
       • Introduction
       • Sigmoid Function & Mathematical Introduction
       • Code Example: Glass Identification
     • K-Means
       • Introduction
       • Video: Clustering Introduction
       • K-Means vs. kNN
       • Video Series: Code Example
         1. Part 1
         2. Part 2
       • Elbow method
       • Code Example: Self-implementation of Clustering
       • Additional Topics
         • Principal Components Analysis: Dimensionality Reduction
     • Decision Trees
       • Introduction
       • Code Example: Iris Flower
       • Additional Topics
         • Entropy
         • Information Gain
     • Neural Networks
       • Do Sections 8-10 under "Learning Machine Learning"
       • Credits: Adit Deshpande from ACM AI @ UCLA
7. Optional for more mathematical intuition: Andrew Ng's Stanford Coursera Course
8. Guided Data Cleaning Project
   • Video Game Reviews
   • Thanksgiving Foods
9. Guided Data Storytelling Projects
   • NYC Education
   • Fannie Mae Loan Foreclosure
   • Video Series: Predicting the stock market
10. 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.
11. Congratz, you've learned and done enough to gain enough knowledge to onboard to more complex data science and machine learning projects in the future!