THE EXPERT PROGRAMMER’S ULTIMATE GUIDE
Guides in a variety of domains: Machine learning, Web development, software engineering, games programming, mobile app development …
Contents
- Summary
- Guides
- Get Job ready with 13 projects, 2 courses, and 10 books
- Job Ready Guide — JavaScript Edition 2.0
- Job Ready Guide — Python Edition
- Computer Science and Backend Development — Java Focus
- Computer Science and Web Development — comprehensive
- Web Development with Computer Science Foundations — comprehensive
- Data Science — comprehensive
- Video Game Programming — comprehensive foundations
- Native Android Programming — comprehensive
- Topic Specific Guides
- Regex
- Angular
- Vue
- React
- Practice/Speedrun Project lists — interview prep, portfolio building, practice for programming competitions
- Attribution
Summary
Resources for learners who want to dive deeper on their journey to becoming web developers / software engineers. There are multiple guides, the first outlines the bare minimum to be successful as an entry-level junior web developer, two dive much more deeply to prepare you for “beyond junior”, and one that focuses on game development.
Guides
Get Job ready with 13 projects, 2 courses, and 10 books
A structured plan of resources and activities for learners who want to beeline to “job ready” and get there reasonably prepared to be successful.
Goal: confident frontend developer ready to apply for junior positions.
Are you working through the FreeCodeCamp curriculum and want to be job ready (for a junior role) without finishing all three certifications? Want to short-circuit the process and get this done quick without getting laughed out of interviews?
Are you thinking “I’ll just finish the frontend certification” and start applying?
You’re looking at the wrong certification to get prepared and I’ll tell you why. The frontend certification does NOT teach you any of the real world skills that go along with programming that you’ll need on the job. It doesn’t teach you how to work in an editor on your own machine. It doesn’t teach you how to run a build process. It doesn’t teach you how to share your code in a git repository. And, it doesn’t teach you how to deploy your code to a real server on the net.
Have no fear there IS a FCC certification that will get you much, much closer to your goal. Combine it with just a few other resources and you can get there. The backend certification is the one you want to be aiming for.
Finish this list — and you’ll walk into interviews with a lot more confidence, and a much better chance of landing that job.
Read these books, complete these two courses, this certification, and these three projects
- Book: You Don’t Know JS: Up & Going
- Book: You Don’t Know JS: Scope & Closures
- Book: You Don’t Know JS: this & Object Prototypes
- Book: You Don’t Know JS: Types & Grammar
- Book: You Don’t Know JS: Async & Performance
- Book: You Don’t Know JS: ES6 & Beyond
- Course — CS50 on edX
- Book — JavaScript Allongé, the “Six” Edition
- Course: Programming for the Web with JavaScript on edX or Course: CS50’s Mobile App Development with React Nativeon edX (or both, your choice)
- The FCC Backend Certification — all projects, ignore the tutorials and just read the official docs if you want.
- Book — DOM Enlightenment
- Project — Portfolio from the frontend section of FCC
- Book — JavaScript Design Patterns
- Project — Clone the Netflix interface using React, Angular, or Vue — pulling data from the Movie DB API or an API in a backend you create yourself.
- Book — Open Data Structures
- Project — Clone this Admin template using React, Angular, or Vue
Special note: No, you’re not done until you finish every step, in order.
If you don’t have access to Netflix, or just want an alternative to the Netflix Project
Clone Spotify — you can sign up for a free account. Spotify
You can use their API to search pretty much all of the data they have available: Spotify Web API
You can’t actually pull full length versions of the media to play in your app, just play the demo track ;)
If you’re thinking, you’re nuts, I just want to be a frontend developer, this is too much
- No it’s not.
- This will actually do what the frontend cert alone wont. It will prepare you to do the job of a frontend web developer in today’s market. Writing some HTML and CSS isn’t all there is to the job. This will prepare you for the rest
- Don’t quit.
- Don’t panic!
Job Ready Guide — JavaScript Edition 2.0
A JavaScript-centric version of the Job Ready Guide, narrowly focused on building the skills likely necessary to beeline to “job ready” JavaScript Developer. This is an updated version of the original Job Ready guide which incorporates additional algorithms practice, additional projects, and a sequence that builds in additional activities to answer the “what should I be doing on the side” question.
Goal: confident web developer ready to apply for junior positions
A guide primarily focused on Frontend development, but including just enough of an introduction to Backend to enable an understanding of the “entire process” to prepare for productive entry to a Full Stack team as a confident and capable Frontend Developer.
- Tier 0 — Prep
- Tier 1 — Intro to Programming
- Tier 2 — Add Complexity
- Tier 3 — Practice
- Tier 4 — Wrap everything up and prep for interviews
- What now?
- FAQ for this guide
- Why is it so much longer than the original Job Ready Guide?
- Why so much Math and Algorithms?
- Where should I deploy my code?
- Why the change in Project selections?
- Do you have a list of helpful links to point me in the right direction if I need a productive break, or need to consult the official docs while I’m working through all this?
Tier 0 — Prep
Goal: Be comfortable with git by midway through Tier 1, and comfortable with Precalculus by midway through Tier 2.
Anything in Tier 0 can be studied before beginning Tier 1, or alongside the rest of the guide as you progress through the other Tiers.
- Book: College Algebra or Course: College Algebra and Problem Solving or thorough knowledge of Algebra.
- Book: Precalculus or Course: Precalculus or Khan Academy or thorough knowledge of Precalculus
- Videos: Git Videos or Book: Pro Git or thorough knowledge of Git.
- Project: JavaScript Interview Prep — sign up for this now and work through it alongside the rest of the guide.
- Project: take a quick read through the FAQ for this guide at the end of this document, particularly the helpful links, you’ll want to reference them as you work through the guide.
Tier 1 — Intro to Programming
Goal: Become Proficient with HTML, CSS and JavaScript.
- Book: You Don’t Know JS: Up & Going
- Course — CS50 on edX
- Book: You Don’t Know JS: Scope & Closures
- Course: Learn to Code HTML & CSS
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don’t Know JS: this & Object Prototypes
- Project: CSS Zen Garden — implement your own CSS design for the competition
- Course: Programming for the Web with JavaScript
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don’t Know JS: Types & Grammar
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don’t Know JS: Async & Performance
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
- Course: Learn to Code Advanced HTML & CSS
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
- Course: Getting Sassy with CSS
- Project: 100 Days of CSS in CodePen. Start one now and set a goal of finishing as many as you can by the end of Tier 3. Do them in any order you like. (Intent: Build a presence on CodePen as a proficient HTML/(S)CSS developer to add another online body of work alongside your growing GitHub profile.)
- Book: You Don’t Know JS: ES6 & Beyond
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
Tier 2 — Add Complexity
Goal: Become familiar with D3.js and React to strengthen your proficiency with JavaScript.
- Course: CS50’s Mobile App Development with React Native
- Course: Data Visualization and D3.js
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: Clone this Admin template using React, Angular, or Vue
- Book: JavaScript Allongé, the “Six” Edition
- Project: Clone this online resume template
- Project: Do a one week Speedrun of the FreeCodeCamp Backend Projects, finishing as many as you can in 7 days.
- Book: JavaScript Design Patterns
- Project: Revisit CSS Zen Garden — and implement a new design
- Project: Clone Twitter using Node.js on the backend, and your frontend framework/library of choice. Include all basic features: signup/login/logout, follow user, search, tweet, like/retweet, home page with stream of recent tweets.
Tier 3 — Practice
Goal: Practice Frontend Development in greater depth and continue studying JavaScript, ensuring you understand the algorithms and data structures you’re likely to encounter in interviews (and on the job).
- Project: Read How to Contribute to Open Source — and make two contributions to open source projects (of your choice) by the end of this Tier.
- Book: Open Data Structures
- Project: Finish all classic puzzles on CodinGame from easy through hard by the end of the Tier.
- Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose. Consider building it as a Chrome Extension, Mobile, or Electron App
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose. Consider building it as a Chrome Extension, Mobile, or Electron App
- Project: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) — Consider building it as a Chrome Extension, Mobile, or Electron App.
- Project: Full stack project of your choice (make it grand) — or do a one month Speedrun of the FreeCodeCamp Projects.
Tier 4 — Wrap everything up and prep for interviews
Goal: Interview with confidence.
- Project: Finish any questions you have remaining from JavaScript Interview Prep
- Project: Finish any of 100 Days of CSS you have yet to complete.
- Project: Create and polish your Portfolio site.
- Project: Create and polish your Resume/CV.
- Project: Study and complete all The HackerRank Interview Preparation Kit on HackerRank
- Project: Continue honing your skills as you interview. Prioritize contributing to open source.
What now?
- If you want to move on to Data Science— hit the Data Science Guide
- If you preferred the Algorithms and Data Structures — hit the CS-WD Guide
- If you mostly enjoyed the Web Development — hit the WD-CS Guide
FAQ for this guide
Why is it so much longer than the original Job Ready Guide?
What I’ve observed over the past 9 months is two phenomena, the first being that many “self-supplemented” with additional beginner projects and resources while working through YDKJS, so I expanded on the beginner section to alleviate the “but what else should I be doing” question. The second is that the most successful learners also supplemented with more involved projects towards the end of the guide, so I added more intricate/advanced projects to meet that need.
Why so much Math and Algorithms?
It’s not THAT much math, just through Precalculus so you won’t feel so behind the curve when you want to push beyond just “Job Ready” and tackle more involved programming projects. The algorithms — I’ve added them to ensure you’re prepared and confident you can handle anything you might encounter in an interview.
Where should I deploy my code?
For all projects — store your code on GitHub, GitLab or BitBucket (GitHub preferred if you want it to later be seen by potential employers) and for web projects deploy the code on the web using the service of your choice (GitHub or GitLab projects or Surge.sh are ideal for frontend only projects, while Heroku is a free alternative for backend/fullstack).
Why the change in Project selections?
To give you greater freedom, over the course of studying the guide, to create a portfolio that is unique to you — rather than a clone of the same exact projects that are on the portfolio of every other junior web dev out there.
Do you have a list of helpful links to point me in the right direction if I need a productive break, or need to consult the official docs while I’m working through all this?
Yes, yes I do:
- For when you need a quick/fun productive break that teaches you how to use CSS to layout a site (revisit this section in Tier 1 — Flexbox Zombies alone will prove extremely helpful learning to layout a page for the early projects.)
- CSS Diner
- FlexBox Defense
- FlexBox Froggy
- Grid Garden
- FlexBox Zombies
- For when you need a quick/fun productive break in which you also practice JavaScript
- Untrusted
- Elevator Saga
- Screeps
- For when you need assets/ideas
- pixabay
- Unsplash
- Pexels
- LibreStock
- Google Fonts
- FlatIcon’s Free Icon Sets
- Official Docs
- MDN HTML — for exploring all that HTML has to offer
- MDN CSS- for exploring all that CSS has to offer
- MDN JavaScript- for exploring all that JavaScript has to offer
- Sass — supercharged CSS
- Node.js — should be your primary reference for building backend projects
- Express — an excellent framework to accompany Node.js on the backend
- MongoDB — for storing data
- Mongoose — access to MongoDB from Node.js made easy(er)
- Passport.js — remember this link when you have to setup a login system
- D3 — for creating awesome graphs and charts
- Angular — option for creating single page apps on the frontend
- React — option for creating single page apps on the frontend
- Vue — option for creating single page apps on the frontend
- Redux — for managing state in a single page app
- Mocha — venture into testing
- Karma — venture into testing
- Jest — venture into testing
- Webpack — module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
- Babel — makes the new JavaScript work on old browsers (or node versions for that matter)
- Gulp — for automating your workflow
- ESLint — for helping to keep your code clean
- Prettier — more help keeping your code clean
- Travis — continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)
Job Ready Guide — Python Edition
A Python-centric version of the Job Ready Guide, narrowly focused on building the skills likely necessary to beeline to “job ready” Python Developer.
Get Job Ready — Python Edition
- Tier 0 — prep
- Tier 1 — Non-Python frontend necessities for Web Development
- Tier 2 — Python Basics
- Tier 3 — More Python and Basic CS
- Tier 4 — Wrap everything up and prep for interviews
- What now?
- FAQ for this guide
- Why is it so much longer than the other Job Ready Guide?
- Why so much Math and Algorithms?
- Where should I deploy my code?
- What Python should I use?
Tier 0 — Prep
Goal: Be comfortable with git by midway through Tier 1, and comfortable with Precalculus by midway through Tier 2.
Anything in Tier 0 can be studied before beginning Tier 1, or alongside the rest of the guide as you progress through the other Tiers.
- Book: College Algebra or Course: College Algebra and Problem Solving or thorough knowledge of Algebra.
- Book: Precalculus or Course: Precalculus or Khan Academy or thorough knowledge of Precalculus
- Videos: Git Videos or Book: Pro Git or thorough knowledge of Git.
Tier 1 — Non-Python frontend necessities for Web Development
Goal: Become Proficient with HTML, CSS and JavaScript, including the frontend framework/library of your choice plus D3.
- Book: You Don’t Know JS: Up & Going
- Book: You Don’t Know JS: Scope & Closures
- Course: Learn to Code HTML & CSS
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don’t Know JS: this & Object Prototypes
- Course — Programming for the Web with JavaScript
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don’t Know JS: Types & Grammar
- Book: You Don’t Know JS: Async & Performance
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
- Course: Learn to Code Advanced HTML & CSS
- Book: You Don’t Know JS: ES6 & Beyond
- Course: Data Visualization and D3.js
- Project — Clone this Admin template using React, Angular, or Vue
- Book: JavaScript Allongé, the “Six” Edition
- Project: Select an API from Todd Motto’s API List and build a frontend-only application powered by data fetched from the API you chose.
- Book: JavaScript Design Patterns
- Project: Clone this online resume template
- Project: Do a one week Speedrun of the FreeCodeCamp Projects, finishing as many as you can in seven days.
Tier 2 — Python Basics
Goal: Become familiar with Python, MongoDB, and the Flask or Django framework and begin building proficiency with creating full stack web applications with Python on the backend.
- Challenge: Python Interview Prep on Hackerrank. Sign up now and work problems alongside the guide as you progress.
- Course: M001: MongoDB Basics — note: this course is only intermittently offered, sign up at the start of the Tier, then proceed to the other courses and return to this one when it’s in session
- Course: MM220P: MongoDB for Python Developers — note: this course is only intermittently offered, sign up at the start of the Tier, then proceed to the other courses and return to this one when it’s in session
- Course: Introduction to Computer Science and Programming Using Python
- Study: The Flask User Guide or the Django documentation — pick based on which is more prevalent in your area, which you personally prefer, or any other criteria you choose, but pick one and study it thoroughly. Do the tutorials, read it all, learn testing, auth, databases, all of it.
- Project: Clone Twitter using Python on the backend, and your frontend framework/library of choice. Include all basic features: signup/login/logout, follow user, search, tweet, like/retweet, home page with stream of recent tweets.
- Course: Single Variable Calculus
- Project: participate in one Bot Programming competition.
- Book: Think Python
- Study: The pytest testing tool read the docs thoroughly, experiment with the examples and become proficient with pytest (including unittest and nose).
- Project: participate in one Bot Programming competition.
- Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
- Project: Do a one week Speedrun of the FreeCodeCamp Projects, finishing as many as you can in seven days.
Tier 3 — More Python and Basic CS
Goal: Learn Python to a deeper level, ensuring you understand the algorithms and data structures you’re likely to encounter in interviews (and on the job).
- Project: Finish all classic puzzles on CodinGame from easy through hard by the end of the Tier.
- Course: Introduction to Computational Thinking and Data Science
- Project: Your choice — Clone Netflix, Slack, Reddit, or Facebook (or a comparably involved site of your choosing). The clone should be functional and include all basic features.
- Course: Mathematics for Computer Science
- Course: Introduction to Algorithms (requires book purchase) or Book — Open Data Structures
- Project: participate in one Bot Programming competition.
- Course: Intro to Machine Learning
- Project: Titanic: Machine Learning from Disaster
- Course: Database Mini-Courses — take all mini-courses
- Project: Your choice — Clone Netflix, Slack, Reddit, or Facebook (or a comparably involved site of your choosing). The clone should be functional and include all basic features.
- Project: Create a Portfolio highlighting your best work.
- Project: House Prices: Advanced Regression Techniques
- Project: Do a one month Speedrun of the FreeCodeCamp Projects, finishing as many as you can in 30 days.
Tier 4 — Wrap everything up and prep for interviews
Goal: Interview with confidence.
- Project: Finish any questions you have remaining from Python Interview Prep
- Project: Refine and polish your Portfolio.
- Project: Create and polish your Resume/CV.
- Project: Cracking the Coding Interview on HackerRank
- Project: Continue honing your skills as you interview. Participate in more bot competitions on CodinGame, participate in competitions on Kaggle, contribute to open source JavaScript or Python projects, work on side projects that illustrate your frontend skill.
What now?
- If you really enjoyed the dip into Machine Learning — hit the Data Science Guide
- If you preferred the Algorithms and Data Structures — hit the CS-WD Guide
- If you mostly enjoyed the Web Development — hit the WD-CS Guide
FAQ for this guide
Why is it so much longer than the other Job Ready Guide?
The most notable difference between this and the original Job Ready guide is that it is significantly longer but still begins with YDKJS. This is because in order to use Python for web development, you also need some proficiency with the primarily frontend topics as well (HTML, CSS, JavaScript).
Python is typically used for far more than just server-side web development so I’ve tried to at least touch on the “grander scheme” without bogging down too much.
Why so much Math and Algorithms?
There is far more focus on algorithms — this reflects what you can expect in industry, you’re far more likely to be rigorously tested on algorithms and data structures in a python interview than a general or frontend web development interview.
Where should I deploy my code?
For all projects — store your code on GitHub, GitLab or BitBucket (GitHub preferred if you want it to later be seen by potential employers) and for web projects deploy the code on the web using the service of your choice (GitHub or GitLab projects or Surge.sh are ideal for frontend only projects, while Heroku is a free alternative for backend/fullstack).
What Python should I use?
When you get to Tier 2 — I highly recommend installing the Python 3 version of Anaconda for use in the Python-centric portion of the guide. It containerizes your Python environment to ensure nothing you do impacts the rest of your machine, contains all the plugins you’re likely to need, and even provides the Spyder IDE which is an ideal starter setup for Python development.
Computer Science and Backend Development — Java Focus
Deep dive into Computer Science with a focus on Java
“not in a rush” plan, with resources to increase the depth of knowledge gained in general computer science topics plus sufficient implementation practice to confidently enter the industry as a Software Engineer
Goal: proficient software engineer, well versed in the Java Programming language in particular, and Computer Science in general
If you have any questions, be sure to check the FAQ. In fact, before you even start anything, go read the FAQ. It has a plethora of hints, tips and answers to help you ensure you get the most out of this guide.
Note that at the end of each tier, there are a number of “choose your own” projects. Do not feel you have to wait until the end of the tier to complete them — whenever you want to “build”, just skip to the end of the tier, build something, check it off, then return to where you were.
Project suggestions: Above all, pick something you’re interested in building. It doesn’t have to be a “web page”, it could be a command line utility, a mobile app, some fancy arduino robot, or yes, a web page, or anything else you are inspired to build. Try to pick something substantial for the level you’re at — 40+ hours of effort. Try not to pick something so daunting it’ll take you months or (worse) you won’t be able to complete.
Specific Project Ideas
- Clone a popular website, with either emphasis on some fancy frontend, or the emphasis on a rock solid API with the minimal frontend necessary to test it
- Clone pretty much any template you find on the web, but do it in Kotlin as an Android app
- Build/clone a game
- Hit Kaggle and build a kernel for solving one of the problems there
- Hit HackerRank or CodinGame for a weeklong problem solving binge, finishing as many problems as you possibly can
- Build a command line utility that automates something you do frequently.
- Contribute a PR to the Open Source project of your choice
- Write a series of blog posts / tutorials that explain thoroughly some topic you’ve been studying
- Build an application you wish was available, but isn’t
Tier 1 — getting started
- Course: Introduction to Computer Science — CS50
- Project: Google Code Jam 2008 — Qualification Round (language of your choice)
- Article: Read Project Specification Documents and get in the habit of including every bit of information it details that makes sense for a project in the README.md or other supporting documentation for your projects
- Course: Effective Thinking Through Mathematics
- Project: Google Code Jam 2009 — Qualification Round (language of your choice)
- Course: How to Code: Simple Data
- Project: Google Code Jam 2010 — Qualification Round (language of your choice)
- Book: Precalculus
- Course: How to Code: Complex Data
- Project: Google Code Jam 2011 — Qualification Round (language of your choice)
- Project: Google Code Jam 2008 — Round 1A (language of your choice)
- Video Series: Essence of Calculus
- Course: Single Variable Calculus
- Book: Think Java — How to Think Like a Computer Scientist
- Project: Google Code Jam 2009 — Round 1A (language of your choice)
- Course: Software Construction: Data Abstraction
- Project: Google Code Jam 2010 — Round 1A (language of your choice)
- Book: Introducing Java 8
- Course: Software Construction: Object-Oriented Design
- Project: Google Code Jam 2011 — Round 1A (language of your choice)
- Project: The Java Tutorials Work through all of the tutorials
- Project: Spring Work through each of the Spring.io guides.
- Project: Build Something of your choice using what you’ve learned to this point.
Tier 2 — develop more expertise
- Book: Object-Oriented vs. Functional Programming
- Course: Software Engineering: Introduction
- Project: Google Code Jam 2008 — Round 1B (language of your choice)
- Book: Java Structures
- Article: Read Algorithms and Flowcharts and then familiarize yourself with Pencil … start flowcharting complex portions of your code logic as part of your documentation
- Book: Docker for Java Developers
- Course: Software Development Capstone Project
- Project: Google Code Jam 2008 — Round 1C (language of your choice)
- Course: Mathematics for Computer Science
- Course: UX Design for Mobile Developers
- Docs: Kotlin Work though all Reference and Tutorials
- Book: Don’t Panic: Mobile Developer’s Guide to The Galaxy
- Project: Google Code Jam 2009 — Round 1B (language of your choice)
- Book: Open Data Structures
- Project: Google Code Jam 2009 — Round 1C (language of your choice)
- Course: Algorithms, Part I
- Project: Google Code Jam 2010 — Round 1B (language of your choice)
- Book: Applied Discrete Structures
- Project: Google Code Jam 2010 — Round 1C (language of your choice)
- Course: Algorithms, Part II
- Project: Google Code Jam 2011 — Round 1B (language of your choice)
- Project: Google Code Jam 2011 — Round 1C (language of your choice)
- Project: Build Something of your choice using what you’ve learned to this point.
Tier 3 — add more rigor
- Book: Professor Frisby’s Mostly Adequate Guide to Functional Programming
- Project: Google Code Jam 2008 — Round 2(language of your choice)
- Book: Microservices for Java Developers
- Course: Software Testing
- Project: Google Code Jam 2008 — Round 3 (language of your choice)
- Book: Calculus
- Course: Software Debugging
- Project: Google Code Jam 2009 — Round 2(language of your choice)
- Course: Multivariable Calculus
- Project: Google Code Jam 2009 — Round 3 (language of your choice)
- Course: Software Architecture & Design
- Course: Classical Mechanics
- Book: Modern Java EE Design Patterns
- Project: Google Code Jam 2010 — Round 2(language of your choice)
- Course: Databases
- Project: Google Code Jam 2010 — Round 3 (language of your choice)
- Course: Agile Software Development
- Course: Introduction to Cloud Infrastructure Technologies
- Course: Intro to Theoretical Computer Science
- Project: Google Code Jam 2011 — Round 2(language of your choice)
- Course: Introduction to Probability — The Science of Uncertainty
- Project: Google Code Jam 2011 — Round 3 (language of your choice)
- Video Series: Essence of Linear Algebra
- Course: Linear Algebra — Foundations to Frontiers
- Course: Cryptography I
- Book: Cryptography: An Introduction
- Course: Cryptography II
- Project: Build Something of your choice using what you’ve learned to this point.
Tier 4 — polish the rough edges
- Course: Computer Architecture
- Project: Google Code Jam 2008 — World Finals (language of your choice)
- Book: Information Theory, Inference, and Learning Algorithms
- Course: Introduction to Cyber Security
- Project: Google Code Jam 2009 — World Finals (language of your choice)
- Book: Foundations of Computer Science
- Course: Differential Equations
- Course: Computer Graphics
- Project: Google Code Jam 2010 — World Finals (language of your choice)
- Book: The Quest for Artificial Intelligence
- Course: Artificial Intelligence
- Project: Google Code Jam 2011 — World Finals (language of your choice)
- Course: Machine Learning
- Book: Deep Learning
- Project: Google Code Jam 2012 All Rounds
- Book: The Philosophy of Computer Science
- Course: Operating Systems and System Programming
- Project: Google Code Jam 2013 All Rounds
- Book: Numeric Algorithms
- Book: Basics of Compiler Design
- Course: Compilers
- Project: Google Code Jam 2014 All Rounds
- Course: Robotics Fundamentals
- Project: Google Code Jam 2015 All Rounds
- Course: Computer Networks
- Project: Google Code Jam 2016 All Rounds
- Course: Parallel Computer Architecture and Programming
- Project: Google Code Jam 2017 All Rounds
- Project: Build Something of your choice using what you’ve learned to this point.
Computer Science and Web Development — comprehensive
Get prepared, over the long haul, to be an established senior level software engineer, capable of architecting solutions for the web (and beyond it)
“not in a rush” plan, with resources to increase the depth of knowledge gained in general computer science topics plus sufficient implementation practice to confidently enter the industry as a Web Developer or a Software Engineer in non Web related positions
Goal: proficient web developer and software engineer (this option has more of a computer science focus, but also web development)
If you have any questions, be sure to check the FAQ. In fact, before you even start anything, go read the FAQ. It has a plethora of hints, tips and answers to help you ensure you get the most out of this guide.
Tier 1 — getting started
- Book: You Don’t Know JS: Up & Going
- Book: You Don’t Know JS: Scope & Closures
- Book: You Don’t Know JS: this & Object Prototypes
- Course: Learn to Code HTML & CSS
- Project: Clone this online resume template
- Course: Introduction to Computer Science — CS50
- Book: You Don’t Know JS: Types & Grammar
- Book: You Don’t Know JS: Async & Performance
- Book: You Don’t Know JS: ES6 & Beyond
- Course: Learn to Code Advanced HTML & CSS
- Project: Portfolio from the frontend section of FCC
- Article: Read Project Specification Documents and get in the habit of including every bit of information it details that makes sense for a project in the README.md or other supporting documentation for your projects
- Course: Effective Thinking Through Mathematics
- Book: Setting Up ES6
- Book: JavaScript Allongé, the “Six” Edition
- Course: Getting Sassy with CSS
- Project: Build an online Towers of Hanoi solver that accepts a tower height between 5 and 10, and then displays a graphical (animated) solution, iteratively moving each piece until the puzzle is solved
Tier 2 — develop more expertise
- Course: How to Code: Simple Data
- Course: How to Code: Complex Data
- Course: Software Construction: Data Abstraction
- Course: Software Construction: Object-Oriented Design
- Course: Software Engineering: Introduction
- Course: Software Development Capstone Project
- Book: DOM Enlightenment
- Project: Simon Game from the frontend section of FCC
- Project: Complete all Classic Puzzles — Easy on CodinGame in JavaScript
- Course: Programming for the Web with JavaScript on edX or Course: CS50’s Mobile App Development with React Nativeon edX (or both, your choice)
- The FCC Backend Certification — all projects, ignore the tutorials and just read the official docs if you want.
- Course: Single Variable Calculus
- Book: JavaScript Design Patterns
- Project: Clone this landing page
- Course: Mathematics for Computer Science
- Article: Read Algorithms and Flowcharts and then familiarize yourself with Pencil … start flowcharting complex portions of your code logic as part of your documentation
- Project: Clone this Admin template using React, Angular, or Vue
- Book: Think Java — How to Think Like a Computer Scientist
- Book: Open Data Structures
- Course: Algorithms, Part I
- Course: Algorithms, Part II
- Project: Complete all challenges from the Code Jam Qualification Round 2015
- Project: Clone the front page of this website modifying it to highlight a different product or industry. Make special note of the secondary navigation bar at the top. Implementing that is the highlight of this project.
- Course: UX Design for Mobile Developers
- Course: Android Development for Beginners
- Project: Build the Pomodoro project from the FCC frontend curriculum — as an android app
Tier 3 — add more rigor
- Book: Professor Frisby’s Mostly Adequate Guide to Functional Programming
- Course: Software Testing
- Course: Software Debugging
- Project: Clone the Netflix interface using React, Angular, or Vue — pulling data from the Movie DB API or an API in a backend you create yourself.
- Course: Multivariable Calculus
- Project: Complete all Classic Puzzles — Medium on CodinGame in JavaScript
- Course: Software Architecture & Design
- Project: Complete all challenges from the Code Jam Round 1A 2015
- Book: Functional Light JS
- Project: Clone this blog template — note that there are multiple pages
- Course: Databases
- Course: Agile Software Development
- Project: Complete all ES6 Katas here
- Course: Introduction to Cloud Infrastructure Technologies
- Project: Complete all challenges from the Code Jam Round 1B 2015
- Project: Build Facebook: yes, all the functionality. See here for a list of requirements you should fulfill.
- Course: Intro to Theoretical Computer Science
- Project: Complete all challenges from the Code Jam Round 1C 2015
- Course: Introduction to Probability — The Science of Uncertainty
- Project: Write the CSS Necessary to create your own 12 column based grid layout — see here for an example
- Course: Linear Algebra — Foundations to Frontiers
- Project: Complete all Classic Puzzles — Hard on CodinGame in JavaScript
- Course: Cryptography I
- Project: Complete all challenges from the Code Jam Round 2 2015
- Course: Cryptography II
- Project: Clone Twitter — yes, all the functionality
Tier 4 — polish the rough edges
- Course: Computer Architecture
- Project: Complete all challenges from the Code Jam Round 3 2015
- Course: Introduction to Cyber Security
- Project: Complete all Classic Puzzles — Very Hard on CodinGame in JavaScript
- Course: Computer Graphics
- Course: Artificial Intelligence
- Project: Complete all challenges from the Code Jam World Finals 2015
- Course: Machine Learning
- Project: Design, implement, test, and deploy a game that is playable on the web, using the technologies of your choice. The only criteria are that it be playable online, and that it include a substantial AI component.
- Course: Operating Systems and System Programming
- Project: Create a node module that will convert markdown to properly formatted html
- Course: Compilers
- Course: Robotics Fundamentals
- Project: Clone Learn Harmony
- Course: Computer Networks
- Course: Parallel Computer Architecture and Programming
- Project: Complete all problems from all rounds of the Distributed Google Code Jam 2015 — scroll down to the appropriate section
- Project: Clone Slack — the functionality should be complete to the point that one user can create a room, invite other users, and all users of that room can real-time chat. The room should be secure and inaccessible to anyone but those invited.
- Project: Create an npm module that bootstraps a fullstack application, with Node.js on the backend, and the SPA library/framework of your choice on the frontend. Include a full test suite and comprehensive build processes. Publish it to NPM.
- Project: Complete all problems from all rounds of the Google Code Jam 2016 — scroll down to the appropriate section
- Project: Extend your CSS grid framework to include the CSS and JavaScript required to implement 5 to 10 material design components
Web Development with Computer Science Foundations — comprehensive
Get prepared, over the long haul, to be an established senior level web developer, at the level where companies would be lucky to have you and people would be following your blog because you’re an expert
“not in a rush” plan that focuses on pushing beyond beginner level, and intermediate level, to expert level as a web developer with a reasonable foundation in software engineering
Goal: confident web developer ready to apply for non-junior positions (this one primarily focuses on web development but includes enough computer science to lay a good foundation)
If you have any questions, be sure to check the FAQ. In fact, before you even start anything, go read the FAQ. It has a plethora of hints, tips and answers to help you ensure you get the most out of this guide.
Tier 1 — get started
- Book: You Don’t Know JS: Up & Going
- Book: You Don’t Know JS: Scope & Closures
- Book: You Don’t Know JS: this & Object Prototypes
- Course: Learn to Code HTML & CSS
- Project: Portfolio from the frontend section of FCC
- Course: Introduction to Computer Science — CS50
- Book: You Don’t Know JS: Types & Grammar
- Book: You Don’t Know JS: Async & Performance
- Book: You Don’t Know JS: ES6 & Beyond
- Course: Learn to Code Advanced HTML & CSS
- Project: Clone this online resume template
- Article: Read Project Specification Documents and get in the habit of including every bit of information it details that makes sense for a project in the README.md or other supporting documentation for your projects
- Course: Effective Thinking Through Mathematics
- Book: Setting Up ES6
- Book: JavaScript Allongé, the “Six” Edition
- Course: Getting Sassy with CSS
- Project: Build an online Towers of Hanoi solver that accepts a tower height between 5 and 10, and then displays a graphical (animated) solution, iteratively moving each piece until the puzzle is solved
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
Tier 2 — strengthen your foundation
- Course: How to Code: Simple Data
- Course: How to Code: Complex Data
- Course: Software Construction: Data Abstraction
- Course: Software Construction: Object-Oriented Design
- Course: Software Engineering: Introduction
- Course: Software Development Capstone Project
- Book: DOM Enlightenment
- Project: Simon Game from the frontend section of FCC
- Project: Read up on Gulp — try to incorporate it into your workflow if you aren’t using it regularly already
- Project: Read up on Mocha — try to use it to test your JavaScript, every chance you get
- Course: Programming for the Web with JavaScript on edX or Course: CS50’s Mobile App Development with React Nativeon edX (or both, your choice)
- The FCC Backend Certification — all projects, ignore the tutorials and just read the official docs if you want.
- Course: Single Variable Calculus
- Book: JavaScript Design Patterns
- Project: Clone this landing page
- Course: Mathematics for Computer Science
- Project: Build the Pomodoro project from the FCC frontend curriculum
- Article: Read Algorithms and Flowcharts and then familiarize yourself with Pencil … start flowcharting complex portions of your code logic as part of your documentation
- Project: Clone the front page of this website modifying it to highlight a different product or industry. Make special note of the secondary navigation bar at the top. Implementing that is the highlight of this project.
- Project: Complete all Classic Puzzles — Easy on CodinGame in JavaScript
- Book: Open Data Structures
- Project: Complete all challenges from the Code Jam Qualification Round 2015
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
Tier 3 — build on the foundation
- Course: Algorithms, Part I
- Course: Algorithms, Part II
- Project: Complete all Classic Puzzles — Medium on CodinGame in JavaScript
- Book: Professor Frisby’s Mostly Adequate Guide to Functional Programming
- Course: Software Testing
- Course: Software Debugging
- Project: Clone this blog template — note that there are multiple pages
- Book: Functional Light JS
- Visit the Angular, React and Vue web pages, work through their tutorials, and get a sense of how they differ and which you prefer. From here on out, try to use one of them on each frontend where it makes sense to do it as a single page app. Lean towards your favorite on most projects, but use each of the other two in at least one project before finishing the guide.
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Project: Clone Reddit
- Project: Complete all ES6 Katas here
- Course: Multivariable Calculus
- Project: Complete all Classic Puzzles — Hard on CodinGame in JavaScript
- Project: Clone this Admin template
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Course: Agile Software Development
- Project: Clone the Netflix interface- pulling data from the Movie DB API or an API in a backend you create yourself.
- Course: Software Architecture & Design
- Project: Write the CSS Necessary to create your own 12 column based grid layout — see here for an example
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Project: Clone FaceBook — yes, all the functionality. See here for a list of requirements you should fullfill.
Tier 4 — polish the rough edges
- Project: Read up on Travis CI — try to incorporate it into any project in active development or which you intend to keep running on the web
- Course: Linear Algebra — Foundations to Frontiers
- Project: Clone Twitter — yes, all the functionality
- Course: Computer Graphics
- Course: Artificial Intelligence
- Course: Machine Learning
- Project: Design, implement, test, and deploy a game that is playable on the web, using the technologies of your choice. The only criteria are that it be playable online, and that it include a substantial AI component.
- Project: Complete all Classic Puzzles — Very Hard on CodinGame in JavaScript
- Project: Create a node module that will convert markdown to properly formatted html
- Project: Create an npm module that bootstraps a fullstack application, with Node.js on the backend, and the SPA library/framework of your choice on the frontend. Include a full test suite and comprehensive build processes. Publish it to NPM.
- Project: Complete all problems from all rounds of the Google Code Jam 2016 — scroll down to the appropriate section
- Project: Extend your CSS grid framework to include the CSS and JavaScript required to implement 5 to 10 material design components
- Project: Clone Learn Harmony
- Project: Clone Slack — the functionality should be complete to the point that one user can create a room, invite other users, and all users of that room can real-time chat. The room should be secure and inaccessible to anyone but those invited.
Data Science — comprehensive
Learn the mathematics, science, and programming skills necessary to tackle machine learning, bioinformatics, artificial intelligence and other data science tasks.
“not in a rush” plan that pushes from beginner to advanced, including a bonus tier to push even further.
Goal: accomplished and capable data scientist, proficient in Python, R, Mathematics, Science, and the algorithms standard to data science.
A curriculum covering Data Science topics relevant to Machine Learning, Bioinformatics, and Artificial Intelligence. Includes necessary background in mathematics and the sciences.
Suggestions:
- Do all courses/books in order
- Don’t skip anything (if you’re tempted to skip a course because you think you already know it, take the final, if you pass, then skip).
- Projects are listed at the end of each Tier, you should consider them assigned at the beginning of the Tier, and due at the end — so work on them alongside the books and courses as you work your way through a Tier.
- For any project, feel free to use Python or R. Python is introduced earlier in the guide so it’s likely you’ll use it nearly exclusively for the earlier projects. It would be a good idea to lean more heavily on R in the latter projects to ensure you have substantial practice in both.
- Make a point of building your GitHub profile during your study so that over time you show a history of data science projects.
- If you haven’t already, begin blogging about what you’re learning on Medium (or elsewhere). Try to focus on tutorials for topics you’ve learned well that might be helpful to others.
Note: All items should have a free to audit option. There are two Algorithms courses which require a book purchase (Cormen), but I have provided alternate courses which do not.
Blogs
Bookmark these blogs and try to read at least one article from one of them per week.
- Data School
- Machine Learning Mastery
- No Free Hunch — Kaggle’s blog
- Pete Warden’s Blog
- The Unofficial Google Data Science Blog
- Data Science Central
- R Bloggers
Tier 0 — prep
- Course: Question Everything: Scientific Thinking in Real Life
- Book: College Algebra or Course: College Algebra and Problem Solving or thorough knowledge of Algebra.
- Book: Precalculus or Course: Precalculus or Khan Academy or thorough knowledge of Precalculus
- Course: Introduction to Computer Science and Programming Using Python
- Course Series: Data Science Path on Cognitive Class
- Book: Think Python
- Project: Do all problems in Rosalind’s Python Village
- Project: Titanic: Machine Learning from Disaster
- Project: Complete one Bot Programming Competition on CodinGame
Tier 1 — foundations
- Course: M001: MongoDB Basics — note: this course is only intermittently offered, sign up at the start of the Tier, then proceed to the other courses and return to this one when it’s in session
- Course: MM220P: MongoDB for Python Developers — note: this course is only intermittently offered, sign up at the start of the Tier, then proceed to the other courses and return to this one when it’s in session
- Course: Introduction to Biology — The Secret of Life
- Course: Single Variable Calculus
- Course: Introduction to Probability and Statistics
- Course Series: Deep Learning Path on Cognitive Class
- Course: Introduction to Computational Thinking and Data Science
- Course: Data Science
- Book: Think Stats
- Course: Programming for the Web with JavaScript
- Course: Introduction to Solid State Chemistry
- Course: Multivariable Calculus
- Book: An Introduction to Statistical Learning
- Course: Principles of Biochemistry
- Book: The Elements of Statistical Learning
- Course: Intro to Machine Learning
- Project: Complete the Hackerrank Python Track
- Project: Do 10 problems (of your choice) on Rosalind
- Project: House Prices: Advanced Regression Techniques
- Project: Complete one competition of your choice from Crowd Analytix
- Project: Complete one Bot Programming Competition on CodinGame
- Project: Complete Deep Learning — TensorFlow on CodinGame
Tier 2 — develop more expertise
- Course: MongoDB Performance — note: this course is only intermittently offered, sign up at the start of Tier 2, then proceed to the other courses and return to this one when the next session opens up.
- Book: Biology
- Course: Linear Algebra
- Book: Think Bayes
- Course: Proteins: Biology’s Workforce
- Course: Mathematics for Computer Science
- Course: Python for Data Science
- Course: Data Visualization and D3.js
- Course: Statistics and Probability in Data Science using Python
- Book: Think DSP
- Course: DNA: Biology’s Genetic Code
- Course: Machine Learning
- Book: Think Complexity
- Course: Database Mini-Courses — take all mini-courses
- Course: Deep Learning
- Project: Do 20 problems (of your choice) on Rosalind
- Project: Digit Recognizer
- Project: Complete the Hackerrank Probability Challenges
- Project: Complete the Hackerrank Linear Algebra Foundations Challenges
- Project: Complete one competition of your choice from Crowd Analytix
- Project: Complete one Bot Programming Competition on CodinGame
Tier 3 — add more rigor
- Course: Introduction to Algorithms (Python — requires book purchase) or Algorithms, Part I and Algorithms, Part II (Java)
- Course: Design and Analysis of Algorithms (Python — requires book purchase) or Analysis of Algorithms (Java)
- Book: The Art of R Programming
- Course: Mathematical Biostatistics Boot Camp 1
- Course: Mathematical Biostatistics Boot Camp 2
- Course Series: Big Data Path on Cognitive Class
- Course: Convex Optimization
- Book: R for Data Science
- Course: Probability: Basic Concepts & Discrete Random Variables
- Course Series: Hadoop Path on Cognitive Class
- Course: Probability: Distribution Models & Continuous Random Variables
- Course: Introduction to Mechanics, Part 1
- Course: Electricity & Magnetism, Part 2
- Course: Statistics for Applications
- Course: Intro to Hadoop and MapReduce
- Course: Differential Equations
- Project: Do 30 problems (of your choice) on Rosalind
- Project: Complete one competition of your choice on Kaggle
- Project: Complete the Hackerrank Algorithms Challenges
- Project: Complete one competition of your choice from Crowd Analytix
- Project: Complete one competition of your choice from Analytics Vidhya
Tier 4 — practical applications
- Book: Machine Learning with R
- Course: Statistics and R for the Life Sciences
- Course: Introduction to Linear Models and Matrix Algebra
- Book: The Quest for Artificial Intelligence
- Course: Statistical Inference and Modeling for High-throughput Experiments
- Course: High-Dimensional Data Analysis
- Course: Introduction to Bioconductor: Annotation and Analysis of Genomes and Genomic Assays
- Course: High-performance Computing for Reproducible Genomics
- Course: Case Studies in Functional Genomics
- Course: Quantum Mechanics for Everyone
- Course: Artificial Intelligence (AI)
- Course: Machine Learning
- Book: Multiagent Systems
- Course: Robotics
- Course: Animation and CGI Motion
- Project: Do 30 problems (of your choice) on Rosalind
- Project: Complete one competition of your choice on Kaggle
- Project: Complete one competition of your choice on Kaggle
- Project: Complete the Hackerrank Artificial Intelligence Challenges
- Project: Complete one competition of your choice from Crowd Analytix
- Project: Complete one competition of your choice from Analytics Vidhya
- Project: Complete one competition of your choice from Driven Data
Tier 5 — Bonus Round — Advanced
- Course: Topics in Mathematics of Data Science
- Book: Bayesian Methods for Hackers
- Book: Bayesian Methods in the Search for MH370
- Course: Mathematics of Machine Learning
- Book: Mining of Massive Datasets
- Book: Informatics in the Future
- Course: Discrete Stochastic Processes
- Book: Bisociative Knowledge Discovery
- Course: Dynamic Systems and Control
- Book: New Horizons for a Data-Driven Economy
- Book: The Challenge of Chance
Video Game Programming — comprehensive foundations
Develop a variety of games, first in JavaScript, then C++ while learning the computer science principles important in game development … while having fun in the process.
Goal: learn how to code video games
I list a lot of games to clone in this list. I do not mean make the exact same game down to the assets and name and everything. I mean make a game that uses the same mechanics. Don’t get yourself sued for copyright violation. There are references at the bottom of this list to answer some common questions relevant only to this guide (and thus not present in the FAQ which contains a plathora of information pertinent to not only this guide, but the others as well.)
Tier 0 — Beginner “taste” of Game Programming — JavaScript based
Get familiar with JavaScript (Feel free to skip this and come back and “unskip it” if at any point you feel daunted by what comes later)
- Book: You Don’t Know JS: Up & Going
- Book: You Don’t Know JS: Scope & Closures
- Book: You Don’t Know JS: this & Object Prototypes
- Book: You Don’t Know JS: Types & Grammar
- Book: You Don’t Know JS: Async & Performance
- Book: You Don’t Know JS: ES6 & Beyond
Get some experience doing graphics with JavaScript using processing.js
- Course: Intro to JS: Drawing & Animation
- Project: Build all assignments in the Drawing and Animation course
- Course: Advanced JS: Games & Visualizations
- Project: Build all assignments in the Games & Visualizations course
- Course: Advanced JS: Natural Simulations
- Project: Build all assignments in the Natural Simulations course
- Project: Build a “pet project” game on Khan Academy using all the skills you’ve learned with processing.js. Make sure it has, at minimum, a “start game” screen, at least one level of a playable game that keeps score, and a “game over” screen.
Learn a smidge of math and algorithms so you can compute things
- Book: Precalculus (feel free to skip if you’re already doing 30 minutes a day of math on Khan Academy)
- Course: Algorithms
Get Familiar with Phaser and setup your bookmarks to Phaser Docs and helpful links for getting/creating assets
- Tutorial: Getting Started with Phaser
- Tutorial: Making Your First Phaser Game
- Bookmark: Phaser docs
- Bookmark: Phaser examples
- Bookmark: Tiled
- Bookmark: OpenGameArt
- Bookmark: Gimp
- Article: Pixel Art Tutorial
- Article: The Total Beginner’s Guide to Better 2D Game Art
Build these — in order — the complexity builds with each one
- Game: Concentration (Reference Wikipedia)
- Game: Tic-Tac-Toe (unbeatable AI opponent) Wikipedia
- Game: Minesweeper Wikipedia
- Game: Sokoban Wikipedia
- Game: Snake Wikipedia
- Game: Pong (Reference Tutorial Pong — Tutorials 1 through 7)
- Game: Galaga
- Game: Breakout
Tier 1
- Course: Introduction to Computer Science — CS50
- Course: Effective Thinking Through Mathematics
- Game: Hangman
- Book: Precalculus
- Book: Fundamentals of C++ Programming and labs
- Game: Adventure (see text adventure games)
- Exercises: Code Monk, then CodinGame — begin working through these lessons, make them a daily habit as you continue on
- Article: Read Algorithms and Flowcharts and then familiarize yourself with Pencil … start flowcharting complex portions of your code logic as part of your documentation
- Course: Video Game Design History
- Book: An Introduction to Design Patterns in C++ with Qt 4
- Game: Zork (see text adventure games)
- Article: Building a Game on Your Own
- Article: How do I Make Games
- Article: So You Want to Be a Game Programmer?
- Article: Finishing a Game
- Article: Pixel Art Tutorial
- Article: The Total Beginner’s Guide to Better 2D Game Art
- Article: 2D Tutorial Series Introduction
- Game: Pong (Reference Tutorial Paddle Battle)
- Course: Single Variable Calculus
- Game: Duck Hunt
- Course: The Rise of Superheroes and Their Impact On Pop Culture
- Game: Sokoban, Snake, or Minesweeper — your choice
Tier 2
- Course: Product Design
- Book: Game Programming Patterns
- Game: Galaga
- Course: Mathematics for Computer Science
- Tutorial: Introduction to OpenGL Graphics Programming
- Tutorial: Beginning Game Programming v2.0
- Game: Frogger
- Course: Software Development Process
- Book: Applied Discrete Structures and assignments
- Game: Space Invaders
- Course: Algorithms, Part I
- Course: Algorithms, Part II
- Game: Tetris (Reference tutorial Falling Blocks (Tetris))
- Course: Software Architecture & Design
- Article List: Amit’s Game Programming Information
- Article: General Concepts for Beginning Developers
- Article: OpenGL Math Primer
- Game: Breakout (Reference tutorial Block Breaker (Breakout))
- Course: Multivariable Calculus
- Course: Intro to Physics
- Game: Asteroids
- Course: Agile Software Development
- Game: Puzzle Bobble
Tier 3
- Article: AI
- Article: Tiling
- Article: Making a Level Editor
- Game: PacMan
- Course: Databases
- Course: Software Testing
- Course: Software Debugging
- Game: Super Mario Brothers
- Course: Linear Algebra — Foundations to Frontiers
- Book: Linear Algebra and answers to exercises
- Game: Sonic the Hedgehog
- Course: Cryptography I
- Course: Cryptography II
- Book: Artificial Intelligence
- Game: Zelda
- Book: Open Data Structures
- Course: Compilers
- Course: Artificial Intelligence
- Game: Gauntlet
- Book: Data Structures and Algorithm Analysis and assignments
- Course: Computer Graphics
- Game: Doom
Tier 4
- Course: Machine Learning
- Game: Final Fantasy
- Course: Computer Networks
- Course: Parallel Computer Architecture and Programming
- Game: Multiplayer card game (your pick) with both AI and networked (human) players
- Course: Computer Architecture
- Tutorial: Programmed Introduction to MIPS Assembly Language
- Course: Operating Systems and System Programming
- Course: Interactive 3D Graphics
- Getting Started Get Started with UE4
- Tutorials: Unreal Engine 4 official video tutorials
- Documentation: Unreal Engine 4 Documentation
- Book: The Blender Manual — study every section
- Game: Pick any prior game and re-do it in 3d using Unreal Engine
- Game: Diablo
- Game: Your choice — include AI
- Game: Your choice — Multiplayer
- Game: Your choice — with leaderboards
- Game: Your choice :D
- Game: Your choice :D
Tier 5
Tier 5 involves branching out to target the platforms you’re most interested in and developing skills in the relevant technologies. At this point, you have a strong foundation in maths and algorithms, significant practice working with graphics, hands on experience building a variety of games, exposure to AI and Machine learning, exposure to networking and hardware concerns, and should have learned various software engineering practices (design, testing, debugging) so that you’re writing quality code.
Now that you’ve got a really strong foundation, the sky’s the limit. Pick the platform you want to develop for, Android, iOS, Windows, Linux, Mac, Web, XBox, Playstation, whatever — and start reading. Start with official docs, read them all. Find blogs dedicated to that platform. Rebuild some of the easiest projects you’ve done thus far, targeting that platform.
Use the Force :D
Bookmarks you should have
- surge.sh — deploy your frontend projects here (or use github pages)
- MDN — look HTML, CSS, and JavaScript stuff up here
- Heroku — deploy your fullstack projects here (or hyperdev)
- Firebase or mLab — database hosting
- Material Design — lean on this when you need a structure for creating a minimalistic but awesome looking site
- Material Palette — for selecting color schemes
- GitHub — store your code here
- Gimp — image editor
- Blender — 3d creation suite
- Inkscape — vector drawing
- Tiled — tilemap editor
- Leshy SpriteSheet Tool — HTML5 tool for creating, packing, and modifying sprite sheets and texture atlases.
- OpenGameArt — open source game art (check the copyright, some are more open than others)
- Wirify — for quickly turning a web page into a wireframe so you can see the big picture instead of all the graphics
For every game project
- Mockup the game screens by hand, using Pencil, or in graphics software — before you start coding the game
- Write a document describing the game, win conditions, lose conditions, and features you intend to include — before you start coding
- Create a minimal demo before building out the whole things
- Store your mockups, design documentation, and game progress in a versionable repository (GitHub)
- Include tests :D
- Include documentation on how to build and run the game
If you need a productive break from a course or book to clear your head, BUILD A GAME, then get back to the list. Here’s some ideas (some are already present in the lists above):
- Pong
- Zork
- Mastermind
- Memory Puzzle
- Galaga
- PacMan
- Breakout
- Solitaire
- Flappy Bird
- Space Invaders
- Super Mario Bros
- Fruit Ninja
- Last Stand
- Tetris
- Angry Birds
- Bejeweled
- Sokoban
- Katamari Damacy
- Blackjack (with AI opponents)
- Checkers (with AI opponent)
- Donkey Kong
- Tron (two player, with option for multiplayer or AI opponent)
- Pokemon
- Monopoly (1–4 player, with option for multiplayer or AI opponent)
- Bomberman
- Diablo
- Zelda
- Scythe
- Minecraft
- Risk
- Lunar Lander
- Streetfighter
- Castlevania
Native Android Programming — comprehensive
Learn native Android Programming, including Java at a rigorous level, including the math and computer science topics necessary to ensure you’re prepared to tackle any Android development task.
Goal: Become a proficient and capable Android developer
This guide makes heavy use of “official docs” for Java and Android, plus projects and cources from the Udacity Android Nanodegree programs, augmented with a Tier of “Computer Science” to ensure that your ability to craft expert level Android applications won’t be hampered by lackluster math or algorithm training.
Note: For many assignments and projects in this guide, you are tasked with creating a “sample” type application, or with cloning an application which already exists. Use good judgement when you get to the point that you are actually deploying apps to the app store. Only publish apps which are your original creations, using your original content and assets. Don’t get sued publishing something you copied or cloned.
Tier 0 — CS / Java Foundations
- Tutorial: Getting Started
- Course: Java Programming Basics
- Tutorial: Learning the Java Language
- Tutorial: Essential Java Classes
- Tutorial: Collections
- Course: CS106A — Programming Methodology
- Bookmark: Java SE8 API Specification — reference this frequently throughout the rest of the guide
- Bookmark: Android API Guides — reference this frequently throughout the rest of the guide
- Book: Precalculus Complete by end of Tier 1.
Tier 1 — Android Fundamentals
- Course: Android Basics: User Interface
- Project: Build a Single Screen App
- Course: Android Basics: User Input
- Project: Court Counter App
- Project: Quiz App
- Course: Android Basics: Multiscreen Apps
- Project: Musical Structure App
- Project: Report Card
- Project: Tour Guide App
- Course: Android Basics: Networking
- Project: Book Listing App
- Project: News App
- Course: Android Basics: Data Storage
- Project: Habit Tracker App
- Project: Inventory App
Tier 2 — Intermediate Android
- Course: Single Variable Calculus Complete by end of Tier 2
- Course: Developing Android Apps
- Project: Popular Movies, Stage 1
- Project: Popular Movies, Stage 2
- Course: Gradle for Android and Java
- Project: Build it Bigger
- Course: Material Design for Android Developers
- Project: Make Your App Material
- Project: Capstone, Stage 1 — Design
- Project: Capstone, Stage 2 — Build
Tier 3 — More CS
- Course: Multivariable Calculus Complete by the end of Tier 3
- Course: Introduction to Programming in Java
- Book: Think Java — How to Think Like a Computer Scientist
- Course: Algorithms, Part I
- Project: Complete all challenges from the Code Jam Qualification Round 2015
- Course: Mathematics for Computer Science
- Project: Complete all challenges from the Code Jam Round 1B 2015
- Book: Open Data Structures
- Course: Algorithms, Part II
- Project: Complete all challenges from the Code Jam Round 1C 2015
- Course: Intro to Artificial Intelligence
Tier 4 — Advanced Android
- Project: 2D Game Development with libGDX
- Project: Outbreak
- Course: Google Location Services on Android
- Course: Monetize Your Android App with Ads
- Course: Add Google Maps to your Android App
- Course: Android Performance
- Course: How to Make a Platformer Using libGDX
- Project: Space Kerfuffle
- Course: Advanced Android App Development
- Project: Stock Hawk!
- Bookmark: Android API Guides You bookmarked this back in Tier 0. Take the time to thoroughly review all of the content now. Study it as if it were a book and you needed to know “it all”.
- Project: Your choice — ideas listed below
Advanced Project ideas
- clone any game from the game programming guide (or any other game you enjoy) as a native Android application
- create a real time chat application (clone your favorite instant messenger) — note you’ll need to build a backend in order to make this work. Use any backend you like, suggestion: check out firebase.
- create an educational app, useful for learning and practicing subject matter you’re highly familiar with (like android programming)
- create an app for a non-profit in your area, whatever they need
- contribute to open source, on any android or java project
- make any android app you want from your original idea, deploy it to the app store
Topic Specific Deep Dives
Comprehensive review of narrow topics.
Regex — Topic Deep Dive
The following is a deep dive, designed to familiarize you thoroughly with regex for pattern matching.
This guide is currently “in Beta” awaiting a resource for Tier 2.
Tier 1 — basics
- Tutorial: RegexOne Interactive Tutorial
- Playlist: Learn Regular Expressions — complete tutorial
- Resource: Regexr — study all sections of the Reference, paying special attention to “lookaround”
Tier 2 — practice
- Practice: Regex Classroom — created by the amazing Chingu @ksmai
Tier 3 — linux regex magic
- Tutorial: Using sed
- Tutorial: Using awk
- Tutorial: Regex tutorial for Linux
Tier 4 — practice
- Challenge: Hackerrank REGEX Challenge
Angular — Topic Deep Dive
The following is a deep dive, designed to familiarize you thoroughly with Angular. It is not the “easy path to just learning ‘enough’” — it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of TypeScript, Karma, Jasmine, and Protractor and hands on non-Angular TypeScript practice to ensure a rock solid foundation in everything Angular.
Tier 0 — reference only if you need pre-Angular basics
- Course: Introduction to Computer Science — CS50 (If you want more confidence programming)
- Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
- Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
- Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
- Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
- Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven’t studied these books, do yourself a favor and study them alongside whatever else you might be doing)
- Official Docs: ESLint — thoroughly review the User Guide
- Official Docs: Axios npm package — thoroughly review, you’ll want this for making API calls
Tier 1 — basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
You NEED to know JavaScript — if you’re shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features — and hit YDKJS.
For each project:
- Use a git workflow (If you wonder what this is, read the articles in Tier 0)
For at least one project:
- Use Angular Material
- Use Bootstrap
- Official Docs: TypeScript in 5 minutes
- Official Docs: Angular — About Angular, all sections, pay special attention to the resources section, and within it: Angular CLI, Augury, Codelyzer, Lite-Server, and Ionic.
- Official Docs: Angular — Getting Started
- Official Docs: Angular — Tutorial, all sections
- Official Docs: Flexbox
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: Karma — all intro sections
- Official Docs: Jasmine — getting started (Jasmine Standalone)
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Podcast: Adventures in Angular — listen to one episode of your choice.
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Podcast: AngularAir — watch one episode of your choice.
- Project: CodeWars — complete 10 problems using TypeScript
- Official Docs: CSS Grid Layout
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 2 — beyond basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
For at least one project:
- Use Angular Material
- Use Bootstrap
- Official Docs: TypeScript basics types through Project Configuration of the TypeScript Handbook
- Project: CodeWars — complete 20 problems using TypeScript
- Official Docs: Karma — all config sections
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: Angular — Fundamentals, all sections
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Podcast: Adventures in Angular — listen to one episode of your choice.
- Podcast: AngularAir — watch one episode of your choice.
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using TypeScript
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 3 — intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Utilize Sass
- Implement end-to-end testing
For at least one project:
- Use Angular Material
- Use Bootstrap
- Official Docs: Angular — Techniques, all sections
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: Jasmine Docs — study in their entirety
- Book: TypeScript Deep Dive
- Official Docs: Protractor Quickstart
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Official Docs: Protractor Setup
- Project: Google Code Jam — complete the qualifying round of any past contest using TypeScript
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Podcast: Adventures in Angular — listen to one episode of your choice.
- Podcast: AngularAir — watch one episode of your choice.
- Official Docs: MDN Client-side storage
- Official Docs: RxJS Docs
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using TypeScript
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 4 — beyond intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Utilize Sass
- Implement end-to-end testing
For at least one project:
- Use Angular Material
- Use Bootstrap
On two projects of your choice — use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.
- Official Docs: Angular — API, all sections
- Official Docs: Protractor Tests
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Official Docs: Protractor Reference
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Podcast: Adventures in Angular — listen to one episode of your choice.
- Project: CodeWars — complete 20 problems using TypeScript
- Podcast: AngularAir — watch one episode of your choice.
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Official Docs: Webpack Docs
- Official Docs: Gulp Docs
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Project: Pick a template from here, here or here and implement an Angular application with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build an Angular application powered by data fetched from the API you chose.
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
- Project: Utilize everything you’ve learned to create a comprehensive portfolio that showcases your ability with Angular, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.
Bonus — advanced
- Official Docs: Ionic Framework Study thoroughly, then refactor any previous project into a mobile app using Ionic
- Project: Make an open source contribution to a project you use
- Official Docs: MDN Accessibility
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
- Write an extensive tutorial on Angular — post it publicly
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in TypeScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using TypeScript
- Project: Make an open source contribution to a project you use
Helpful links
- How to not f-up your local files with Git part1, part2 and part 3
- surge.sh
- Learn to Code HTML & CSS
- Learn to Code Advanced HTML & CSS
- Getting Sassy with CSS
- Programming for the Web with JavaScript
- Data Visualization and D3.js
- YDKJS
For when you need assets/ideas
Official Docs
- MDN HTML — for exploring all that HTML has to offer
- MDN CSS- for exploring all that CSS has to offer
- MDN JavaScript- for exploring all that JavaScript has to offer
- Sass — supercharged CSS
- D3 — for creating awesome graphs and charts
- Angular — option for creating single page apps on the frontend
- Karma — venture into testing
- Jest — venture into testing
- Webpack — module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
- Babel — makes the new JavaScript work on old browsers (or node versions for that matter)
- Gulp — for automating your workflow
- ESLint — for helping to keep your code clean
- Prettier — more help keeping your code clean
- Travis — continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)
Vue — Topic Deep Dive
The following is a deep dive, designed to familiarize you thoroughly with Vue. It is not the “easy path to just learning ‘enough’” — it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of Vue’s ecosystem and hands on non-Vue JavaScript practice to ensure a rock solid foundation in everything Vue.
Tier 0 — reference only if you need pre-Vue basics
- Course: Introduction to Computer Science — CS50 (If you want more confidence programming)
- Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
- Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
- Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
- Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
- Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven’t studied these books, do yourself a favor and study them alongside whatever else you might be doing)
- Official Docs: ESLint — thoroughly review the User Guide
- Official Docs: Axios npm package — thoroughly review, you’ll want this for making API calls
Tier 1 — basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
You NEED to know JavaScript — if you’re shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features — and hit YDKJS.
For each project:
- Use a git workflow (If you wonder what this is, read the articles in Tier 0)
For at least one project:
- Code all CSS yourself
- Use Bootstrap
- Official Docs: Vue.js Guide — All sections in Essentials
- Official Docs: Flexbox
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue DevTools
- Official Docs: Vue.js Style Guide — Priority A Rules
- Official Docs: CSS Grid Layout
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue.js Examples — Review all examples and pick one to implement yourself
- Official Docs: Vue Loader
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: vue-test-utils
- Project: CodeWars — complete 10 problems using JavaScript
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 2 — beyond basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
For at least one project:
- Code all CSS yourself
- Use Bootstrap
- Official Docs: Vue.js Guide — All sections in Transitions & Animation
- Official Docs: Vue.js Guide — All sections in Reusability & Composition
- Project: CodeWars — complete 20 problems using JavaScript
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue.js Guide — All sections in Tooling
- Official Docs: Vue.js Style Guide — Priority B Rules
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue.js Examples — Review all examples and pick one to implement yourself
- Official Docs: Vue Router
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: Jest Docs
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 3 — intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Utilize Sass
- Implement end-to-end testing
For at least one project:
- Code all CSS yourself
- Use Bootstrap
- Official Docs: Vue.js Guide — All sections in Scaling Up
- Official Docs: Vue.js Guide — All sections in Internals
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue.js Style Guide — Priority C Rules
- Official Docs: Vue.js Examples — Review all examples and pick one to implement yourself
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Vue.js API — All sections
- Official Docs: Webpack Docs
- Official Docs: RxJS Docs
- Official Docs: Gulp Docs
- Project: Google Code Jam — complete the qualifying round of any past contest using JavaScript
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Official Docs: Jest API
- Official Docs: MDN Client-side storage
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 4 — beyond intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Utilize Sass
- Implement end-to-end testing
For at least one project:
- Code all CSS yourself
- Use Bootstrap
- Implement state using Vuex
- Implement state using Redux
On two projects of your choice — use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.
- Official Docs: Vue.js Style Guide — Priority D Rules
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Official Docs: Vue.js Examples — Review all examples and pick one to implement yourself
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Official Docs: Webpack Template
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: Vuex
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Official Docs: Vue.js Server-Side Rendering Guide
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Official Docs: Redux docs
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build an Vue application powered by data fetched from the API you chose.
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
- Project: Utilize everything you’ve learned to create a comprehensive portfolio that showcases your ability with Vue, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.
Bonus — advanced
- Official Docs: Weex official documentation Study thoroughly, then refactor any previous project into a mobile app using Weex
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Official Docs: MDN Accessibility
- Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
- Write an extensive tutorial on Vue — post it publicly
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
Helpful links
- How to not f-up your local files with Git part1, part2 and part 3
- surge.sh
- Learn to Code HTML & CSS
- Learn to Code Advanced HTML & CSS
- Getting Sassy with CSS
- Programming for the Web with JavaScript
- Data Visualization and D3.js
- YDKJS
For when you need assets/ideas
Official Docs
- MDN HTML — for exploring all that HTML has to offer
- MDN CSS- for exploring all that CSS has to offer
- MDN JavaScript- for exploring all that JavaScript has to offer
- Sass — supercharged CSS
- D3 — for creating awesome graphs and charts
- Vue — option for creating single page apps on the frontend
- Karma — venture into testing
- Jest — venture into testing
- Webpack — module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
- Babel — makes the new JavaScript work on old browsers (or node versions for that matter)
- Gulp — for automating your workflow
- ESLint — for helping to keep your code clean
- Prettier — more help keeping your code clean
- Travis — continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)
React — Topic Deep Dive
The following is a deep dive, designed to familiarize you thoroughly with React. It is not the “easy path to just learning ‘enough’” — it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of React’s ecosystem and hands on non-React JavaScript practice to ensure a rock solid foundation in everything React.
Tier 0 — reference only if you need pre-React basics
- Course: Introduction to Computer Science — CS50 (If you want more confidence programming)
- Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
- Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
- Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
- Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
- Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven’t studied these books, do yourself a favor and study them alongside whatever else you might be doing)
- Official Docs: ESLint — thoroughly review the User Guide
- Official Docs: Axios npm package — thoroughly review, you’ll want this for making API calls
Tier 1 — basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
You NEED to know JavaScript — if you’re shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features — and hit YDKJS.
For each project:
- Use a git workflow (If you wonder what this is, read the articles in Tier 0)
For at least one project:
- Code all CSS yourself
- Use React-Bootstrap
- Video: React Community Videos Pick and watch one video — don’t worry about understanding every detail
- Official Docs: Intro To React — All sections
- Official Docs: Flexbox
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: React Quick Start — all sections from Hello World to Thinking in React
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: JSX In Depth
- Official Docs: React DevTools
- Official Docs: CSS Grid Layout
- Official Docs: Typechecking With PropTypes
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: Static Type Checking
- Project: CodeWars — complete 10 problems using JavaScript
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
- Official Docs: React FAQ read all sections of the FAQ, from AJAX and APIs through Virtual DOM and Internals — make a mental note of everything in case you need to refer back to it during projects
Tier 2 — beyond basics
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
For at least one project:
- Code all CSS yourself
- Use React-Bootstrap
- Include at least 20 automated tests
- Video: React Community Videos Pick and watch one video — don’t worry about understanding every detail
- Official Docs: Refs and the DOM
- Official Docs: Uncontrolled Components
- Official Docs: Optimizing Performance
- Project: CodeWars — complete 20 problems using JavaScript
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: React Router
- Official Docs: React Without ES6
- Official Docs: React Without JSX
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: Reconciliation
- Official Docs: Context
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: Jest Docs
- Official Docs: Enzyme Docs
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 3 — intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Implement end-to-end testing
For at least one project:
- Code all CSS yourself
- Use React-Bootstrap
- Video: React Community Videos Pick and watch one video — ensure you understand everything, pause and research if necessary
- Official Docs: Fragments
- Official Docs: Portals
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: Error Boundaries
- Official Docs: Web Components
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Official Docs: Higher-Order Components
- Official Docs: Render Props
- Project: Google Code Jam — complete the qualifying round of any past contest using JavaScript
- Official Docs: MDN Client-side storage
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Official Docs: Styled Components
- Official Docs: Jest API
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
Tier 4 — beyond intermediate
Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
For each project:
- Use a git workflow
- Include at least 20 automated tests
- Implement end-to-end testing
For at least one project:
- Code all CSS yourself
- Use React-Bootstrap
- Implement state using Redux
On two projects of your choice — use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.
- Video: React Community Videos Pick and watch one video — ensure you understand everything, pause and research if necessary
- Official Docs: Webpack Docs
- Official Docs: RxJS Docs
- Official Docs: Gulp Docs
- Official Docs: Integrating with Other Libraries
- Official Docs: Redux docs
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Official Docs: Accessibility
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Official Docs: Code-Splitting
- Project: CodeWars — complete 20 problems using JavaScript
- Official Docs: React Reference — all sections
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto’s API List and build an React application powered by data fetched from the API you chose.
- Official Docs: JavaScript Guide on MDN study thoroughly three chapters
- Project: Utilize everything you’ve learned to create a comprehensive portfolio that showcases your ability with React, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.
Bonus — advanced
- Official Docs: React Native Study thoroughly, then refactor any previous project into a mobile app using React Native
- Official Docs: Flow Study thoroughly, then refactor any previous project to use Flow.
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Official Docs: MDN Accessibility
- Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
- Write an extensive tutorial on React — post it publicly
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
- Project: Google Code Jam — complete one round of any past contest using JavaScript
- Project: Make an open source contribution to a project you use
Practice Speedrun
Topic specific practice, to build out a portfolio, gain additional experience in an area, or for a preset list of assignments to tackle for a hands-on boosting speedrun to drive your ability to the next level (check the Algorithms section for interview prep or practice for programming competitions in Python, Java, C++ or JavaScript):
- Algorithms and Data Structures
- Android
- Frontend Web Development
- Fullstack Web Development
- Game Development
Attribution
- Many of the courses listed closely mimic the list from Open Source Society University — Computer Science
- Many of the topics selected to augment were inspired by Google Interview University
- Many of the projects were inspired by (or are directly taken from) Free Code Camp, The Odin Project and Udacity
Conclusion
This article was inspired by P1xt. Recompiled and published by Tobiloba Adejumo.