How to Learn CS + Become a Full-stack web Software Engineer

This is a very opinionated guide on how to start studying to become a software engineer, assuming at least an intro-level computer science knowledge. There’s many guides like this one - this guide in particular focuses on the important stuff - solid foundations, basic algorithms that you’ll actually use in your job, and key web development material.

In addition, the later parts of this guide focuses on web development specifically. If you’re interested in security, embedded systems, graphics, crypto, etc., then unfortunately those parts won’t be as relevant :)

Step 1 - Data Structures

[Basic] Data structures

* Array

* List

* Linked List

* Hashmap

* Set

* Tree

* Trie (can learn later)

* Stack

* Queue

* Heap (can learn later)

*** also for each of above: know time complexity - O() notation - of each for insertion, deletion, reading

* Intro into time complexity https://medium.com/@ariel.salem1989/an-easy-to-use-guide-to-big-o-time-complexity-5dcf4be8a444

Step 2 - Algorithms

[Basic] Algorithms

* Breadth-first search

* Depth-first search

* Binary search

* General basics of some sorting algorithms (most people don’t expect you to code these from scratch, but just be familiar with how they work, advantages/disadvantages)

* Recursive tree traversals (in-order, pre-order, post-order)

[Advanced] Algorithms

* Dynamic programming techniques

* Sliding window technique - https://www.geeksforgeeks.org/window-sliding-technique/

* Fast runner/slow runner for linked lists - https://codetype.wordpress.com/2012/09/13/cracking-the-coding-interview-linked-list-the-runner-technique/

*** know time complexity for each of above

Step 3 - And Beyond

After studying data structures and algorithms, there’s two main branches of progress: studying for technical interviews, and studying actual languages/tech stacks/frameworks that are widely used to build real applications.

1. Study for tech interviews

1. Cracking the Coding Interview book

2. Leetcode and Hackerrank problems - try a bit, then look at solutions, repeat, come back to those you gave up on, like Mathcounts

3. Languages - Java or Python or JavaScript

1. for Java/Python: learn their standard library functions which comes with lots of built-in data structures

2. Study actual languages/frameworks/tech stacks used in companies

1. For web dev, start with https://www.freecodecamp.org

2. Make a Github and code often and regularly

3. https://github.com/microsoft/frontend-bootcamp

4. Nodejs - https://nodejs.dev/

**** by the way, install proper tools

* Linux/Mac (If you use Windows, use the Windows Subsystem for Linux (WSL))

* VS Code with useful extensions (put in effort to learn a few shortcuts)

* Learn how to use the command line (Bash)

* Learn Git (used by a large number of companies + most open source software)

Tools: https://missing.csail.mit.edu/

Applied python - https://github.com/Asabeneh/30-Days-Of-Python

Do https://www.theodinproject.com/tracks/full-stack-ruby-on-rails (mostly for Rails/SQL + alternative paradigm to Node.js)

* Be sure to do all the projects

* Alternatively basically do all of https://open.appacademy.io/learn/full-stack-online

* Doesn’t cover modern React (eg. React hooks)

React hooks - https://reactjs.org/docs/hooks-intro.html

React context - https://reactjs.org/docs/context.html

NOTE: One of the key advantages of using common frameworks/languages (eg. Python with Pip and Flask, JavaScript with Node.js and NPM, or Ruby with Rails and Gems) is that there are many third-party libraries/frameworks that you can install, instead of writing yourself. Libraries for authentication, creating servers, interfacing with databases, storing sessions, adding cookies, generating UUIDs, etc. save an incredible amount of dev time.

Similarly, when using a modern frontend framework (eg. React or Vue.js), there are many component libraries to help with UI development (eg. spinners, fetching data, dropdowns, supporting key shortcuts, multi-select, CSS frameworks, etc.)

Doing Projects:

Creating side-projects and learning from them is vital to improving. The best way to learn how to build real-applications is to actually just jump in and start building. Initially the projects you build will be very common, but later as your skills expand, you’ll be able to build more unique and creative applications from your own ideas from scratch.

Do ~10 of Project based learning with any langs https://github.com/tuvtran/project-based-learning

And

https://github.com/florinpop17/app-ideas

Other Resources:

Learn web dev by doing projects (MICROSOFT) - https://github.com/microsoft/Web-Dev-For-Beginners

Developer roadmap flowchart: https://github.com/kamranahmedse/developer-roadmap

Good websites - https://github.com/sdmg15/Best-websites-a-programmer-should-visit

Learn web dev guide (kwuang) - https://docs.google.com/document/d/1WzJ_camy7mS4H7z4RTUSFyCGuII5lzQ2o4dyW6xcyZk/edit?usp=sharing

Solid list of open courses that approximate a CS undergraduate degree - https://github.com/ForrestKnight/open-source-cs

* Mostly for theory, do when you have time

Coding university (this is pretty comprehensive) - https://github.com/jwasham/coding-interview-university

* Mostly for interviewing

Good sites for exposure to more random tips:

> browse these daily, set aside ~30 minute block a day to expose yourself to new concepts that may have been missed in other links. Good to remove holes in knowledge, familiarize yourself with new technologies/fields/techniques

* https://dev.to/

* https://news.ycombinator.com/

* https://hackernoon.com/

* https://scotch.io/

* https://dzone.com/

* https://www.reddit.com/r/programming/ (don’t need an account to see)