MrPentatonic
Superstar
Note: This Guide is heavier on web development than the other, if you want less practical web development but more rigorous coverage of computer science you might want to check out Guide: Computer Science and Web Development - comprehensive path 68 as well and pick the one that most meets your goals.
Note: @MARKJ78 has ported the entire list into a Trello board you can clone to keep track of your progress you can find the Trello board here83.
Prerequisite
The only things that you need to know are how to use Git and GitHub. Here are some resources to learn about them:
Note: Just pick one of the courses below to learn the basics. You will learn a lot more once you get started!
There WILL be math. And, it's important. If the thought frightens you, or bores you, or has you thinking "this isn't for me", head to Khan Academy35 right now, sign up, and start devoting 30 minutes a day. This is an investment that will pay off. I'm not making this up.
- Try Git31
- Git - the simple guide20
- GitHub Training & Guides17
- GitHub Hello World8
- Git Immersion14
- How to Use Git and GitHub19
The list - work down it in order
Tier 1 - get started
Tier 2 - strengthen your foundation
- Book: You Don't Know JS: Up & Going75
- Book: You Don't Know JS: Scope & Closures16
- Book: You Don't Know JS: this & Object Prototypes8
- Course: Learn to Code HTML & CSS59
- Project: Portfolio from the frontend section of FCC
- Course: Introduction to Computer Science - CS5028
- Book: You Don't Know JS: Types & Grammar7
- Book: You Don't Know JS: Async & Performance2
- Book: You Don't Know JS: ES6 & Beyond4
- Course: Learn to Code Advanced HTML & CSS34
- Project: Clone this66 online resume template
- Article: Read Project Specification Documents29 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 Mathematics25
- Book: Setting Up ES616
- Book: JavaScript Allongé, the "Six" Edition11
- Course: Getting Sassy with CSS12
- 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 here41 and create a new template with it as your inspiration (do not use it's assets)
Tier 3 - build on the foundation
- Course: How to Code: Systematic Program Design - Part 139
- Course: How to Code: Systematic Program Design - Part 23
- Course: How to Code: Systematic Program Design - Part 34
- Book: DOM Enlightenment12
- Project: Simon Game from the frontend section of FCC
- Project: Read up on Gulp10 - try to incorporate it into your workflow if you aren't using it regularly already
- Project: Read up on Mocha11 - try to use it to test your JavaScript, every chance you get
- Course: Introduction to MongoDB using the MEAN Stack3 on edX
- The FCC Backend Certification - all projects, ignore the tutorials and just read the official docs if you want.
- Course: Calculus One15
- Book: JavaScript Design Patterns9
- Project: Clone this21 landing page
- Course: Mathematics for Computer Science8
- Project: Build the Pomodoro project from the FCC frontend curriculum
- Article: Read Algorithms and Flowcharts5 and then familiarize yourself with Pencil4 ... start flowcharting complex portions of your code logic as part of your documentation
- Project: Clone the front page of this15 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 CodinGame9 in JavaScript
- Book: Open Data Structures3
- Project: Complete all challenges from the Code Jam Qualification Round 20156
- Project: Pick a template from here41 and create a new template with it as your inspiration (do not use it's assets)
Tier 4 - polish the rough edges
- Course: Algorithms, Part I27
- Course: Algorithms, Part II4
- Project: Complete all Classic Puzzles - Medium on CodinGame9 in JavaScript
- Book: Professor Frisby's Mostly Adequate Guide to Functional Programming3
- Course: Software Testing8
- Course: Software Debugging6
- Project: Clone this10 blog template - note that there are multiple pages
- Book: JavaScript Spessore7
- 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 here41 and create a new template with it as your inspiration (do not use it's assets)
- Project: Clone Reddit
- Project: Complete all ES6 Katas here8
- Course: Calculus Two: Sequences and Series1
- Project: Complete all Classic Puzzles - Hard on CodinGame9 in JavaScript
- Project: Clone this Admin template6
- Project: Pick a template from here41 and create a new template with it as your inspiration (do not use it's assets)
- Course: Agile Software Development4
- Project: Clone the Netflix interface- pulling data from the Movie DB API2 or an API in a backend you create yourself.
- Course: Software Architecture & Design1
- Project: Write the CSS Necessary to create your own 12 column based grid layout - see here5 for an example
- Project: Pick a template from here41 and create a new template with it as your inspiration (do not use it's assets)
- Project: Clone FaceBook - yes, all the functionality. See here11 for a list of requirements you should fullfill.
Bookmarks you should have
- Project: Read up on Travis CI8 - 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 Frontiers2
- Project: Clone Twitter - yes, all the functionality
- Course: Computer Graphics5
- Course: Artificial Intelligence4
- Course: Machine Learning5
- 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 inculde a substantial AI component.
- Project: Complete all Classic Puzzles - Very Hard on CodinGame9 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 20167 - 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 Harmony15
- 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.
- surge.sh19 - deploy your frontend projects here (or use github pages)
- MDN7 - look HTML, CSS, and JavaScript stuff up here
- Heroku8 - deploy your fullstack projects here (or hyperdev)
- Firebase8 or mLab2 - database hosting
- GitHub3 - store your code here
- Material Design18 - lean on this when you need a structure for creating a minimalistic but awesome looking site
- Material Palette16 - for selecting color schemes
- Wirify18 - for quickly turning a web page into a wireframe so you can see the big picture instead of all the graphics
:computer: Guide: Web Development with Computer Science Foundations - comprehensive path
Been following this for the past couple days. Trynna have this done by this time next year so I can have a good portfolio and get some side gigs while I work on my hustles.
The I know HTML and CSS pretty much from a long time ago and since I have been learning C# since summer, javascript ain't as hard as when I first learnt C#, my mind getting more used to thinking logically.