All Resources I Used To Teach Myself How To Code (From Day 1 Til I Got A Job)
Tags: beginners, tutorial, productivity, codenewbie
Published: 2022-12-09 23:33:53


![github activity tracker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjrpge36ntt2arzohd1o.png)

*If you are short on time and just want to get the resources, I posted all links at the end of the post*

It took me 7 exact months. I only missed 3 days(some days I forgot to commit my changes).

From learning how to declare a variable, to landing my first software developer job. 

These are the resources I used.


## Roadmap
Note: I started by following the front-end dev path and ended up landing a full-stack role. I'd still recommend starting with front-end even if you know you want to pursue a back-end dev career.

I guided myself based mainly on the below roadmap referred by a master software developer and dear friend(😘 Jorge).

* [roadmap.sh/frontend](https://roadmap.sh/frontend)

This video gives a less overwhelming path. 
* https://www.youtube.com/watch?v=vtsvokdIqwY



## Web Foundation - HTML/CSS/JS

I need to mention that I was not completely raw. I worked for 2 years with IT Support and went to college for IT(which included some coding) before quitting a year and a half later. 

The IT experience ended in 2011, and the timeline of this post starts 10 years later. I basically didn't remember anything code related. Nothing.

After a refresher on how the internet/browser works, and what is HTTP/DNS, I started on FreeCodeCamp. 

FreeCodeCamp (https://www.freecodecamp.org/)
* Responsive Webdesign Certification(I didn't finish this one)
* JavaScript Algorithm and Data Structure Certification

I did not go through the recommended path of doing the responsive Webdesign first and then moving to the javascript certification.

I followed my curiosity(it always gives me motivation) and jump-started the JavaScript certification. Finished the foundation subsection and with my curiosity satisfied,  I went back to the Webdesign certification. 

And finally, after getting bored with HTML and CSS I returned and finished the JavaScript certification.

At this point, I needed to build something, I had plenty of input and was eager to see what could come out, so I started looking for projects to build.

Stumbled upon John Smilga's 15 JavaScript Projects course on [freeCodeCamp's youtube channel](https://www.youtube.com/watch?v=3PHXvlpOkf4)

It was an instant hit. I did the whole thing and had a great time.

**Getting more out of my learning**
Since this is a javascript course, John won't go over the HTML and CSS for the projects. 
What I did was, I would take a look at the final version of his website and recreate it myself before starting the project. That way I got pretty confident in HTML and CSS while working on my javascript.

Once I finished his free youtube course, I wanted more, so I bought John's JavaScript full Course on Udemy.

Here is John's website with all his courses.
* [johnsmilga.com](https://www.johnsmilga.com/)



## Computer Science Into

Also, through freeCodeCamp's website, I found Harvard's CS50 intro to computer science. It is bloody awesome and absolutely essential for a self-taught as myself.

* [Harvard's CS50](https://www.youtube.com/watch?v=YoXxevp1WRQ)

**worth mentioning**
* I watched it on youtube 
* I didn't watch lecture 6 python and lecture 9 flask
* I didn't do the exercises, just tried to understand what was going on.
* I didn't try to learn C syntax, I was interested in the CS concepts.
* Whenever I got lost, I'd go back and watch again or pause and try to understand what was going on.
* I was my passive learning, whenever I was not hands-on coding I was watching CS50


## JavaScript Framework - React.js

This was a no-brainer to me after consuming John's JS course.
I bought his React.js course, which goes over almost the same projects built on the javascript course but this time in React.js. 
At first, this was a downer, I didn't want to do the same projects again, but after pondering over it, it was the best thing I could do to cement my knowledge.

Again, twice the exposure to the same concepts, twice the changes of consolidating the knowledge(repetition).



## Back-End - Node.js + SQL

There is no way around it, you have to know the basics of backend development, even if you plan on being a front-end dev. 

The thing is, creating a more interesting/custom project will require a database and a simple server. 

At this point, I was curious to know how the back end worked, how to connect the database to the server, and all that fun stuff. I had no idea, reason why it was so interesting.

Also, most people on the internet were saying that for a project to stand out or at least be considered worthy of being added to your portfolio, it had to perform the CRUD(Create, Update, Delete) operations at least. Hence needing a server and database.

In practice, it didn't take more than a few days to learn the basics of node and SQL, enough to rig up a simple back-end with DB.

Learned the basics of **SQL**(just what I needed for my CRUD projects):
* [W3Schools] (https://www.w3schools.com/sql/default.asp)
* [SQL crash course](https://www.youtube.com/watch?v=nWeW3sCmD2k&t=2853s)

Basics of Node.js
* [John's Node.js course](https://www.johnsmilga.com/) (did just 5% of the course)



## Algorithms and Data Structures
Whether you like them or not, there is no code without algorithms and data structures. Everything you do code-wise gravitates around them.

It was very hard at first, then became just hard. 

Once you have learned a few techniques and sharpened your problem-solving skills, it gets less hard.

I'd focus mostly on doing exercises tackling arrays, hashes, strings, and numbers since they will probably be your bread and butter at work.

In my case, in addition to the above, and again following my curiosity, I included: linked lists, trees/AVL/Binary, graphs, and DFS/BFS algorithms. (I am planning on going back to explore from where I left off)

Here are some of the resources I used:
* [Data Structures and Algorithms in JavaScript - Full Course for Beginners] (https://www.youtube.com/watch?v=t2CEgPsws3U)
* [Algorithms and Data Structures Tutorial - Full Course for Beginners](https://www.youtube.com/watch?v=8hly31xKli0)
* [mycodeschool](https://www.youtube.com/@mycodeschool)
* [NeetCode](https://www.youtube.com/@neetcode)
* [Nick White](https://www.youtube.com/@NickWhite)

**Note**: I almost burned out pushing myself too hard on this. Don't do the same. Take it slowly and steadily, or else you risk throwing your computer out the window and never using one again.


## Git/Github and SCSS

* [Git crash course](https://www.youtube.com/watch?v=RGOj5yH7evk&t=909s)
* [devEd's SCSS crash course](https://www.youtube.com/watch?v=Zz6eOVaaelI&t=143s)



## Did a bunch of projects and code challenges along the way.
 
* 60+ CodeWars challenges
* 16 LeetCode challanges
* Build 20+ small projects along the way.

Here is a short list of some of the small projects I build:
* https://gustavupp.github.io/all-projects/all-projects.html

The main projects that composed my portfolio:
* https://gustavupp.github.io/

## What I consider key factors
With a few exceptions, I did not follow anything linearly, from top to bottom, beginning to end. 

I had a "north" and let my curiosity take the lead as a general rule. 
That gives me:
* persistence to understand a complex topic.
* Experimenting (reinforces learning)
* Extra motivation

When building projects I either:
* Had the idea and looked for similar projects on the internet to see what they had done and googled when stuck.
* Fused two tutorials into a unique project.
* Used a tutorial to do the front end and did my own back end (or the reverse)

I also:
* If following a tutorial, never used the same variable names(forced me to understand what is going on and not just blindly follow)
* Change the theme (if following a tutorial on how to build a movie app, I'd do a book app instead)

With all that said, I ended up landing a job whose tech stack is:
* C#, .NET MVC, SQL, Vue.js, JQuery

I had 10 days before the second interview to show that I knew enough to land the position...

That is a story for another post.

Thanks for reading!

Follow me on Twitter for shorter-form content [@theguspear](https://twitter.com/theguspear)

Catch you later,

Gus


## All Links

**Roadmaps**
* [roadmap.sh/frontend](https://roadmap.sh/frontend)
* https://www.youtube.com/watch?v=vtsvokdIqwY

**Web Foundation - HTML/CSS/JS***
* FreeCodeCamp (https://www.freecodecamp.org/)
    * Responsive Webdesign Certification
    * JavaScript Algorithm and Data Structure Certification
* [15 JavaScript Projects Course] (https://www.youtube.com/watch?v=3PHXvlpOkf4)
* [johnsmilga.com](https://www.johnsmilga.com/) (JavaScript)
* [And for any JS question](https://developer.mozilla.org/en-US/)

## Git/Github and SCSS

* [Git crash course](https://www.youtube.com/watch?v=RGOj5yH7evk&t=909s)
* [SCSS crash course](https://www.youtube.com/watch?v=Zz6eOVaaelI&t=143s)

**JavaScript Framework - Reacj.js**
* [johnsmilga.com](https://www.johnsmilga.com/) (React.js)

**Computer Science Into**
* [Harvard's CS50](https://www.youtube.com/watch?v=YoXxevp1WRQ)

**Backend + SQL**
* [W3Schools](https://www.w3schools.com/sql/default.asp)
* [SQL crash course](https://www.youtube.com/watch?v=nWeW3sCmD2k&t=2853s)
* [johnsmilga.com](https://www.johnsmilga.com/) (Node)

**Algorithms and Data Structures**
* [Data Structures and Algorithms in JavaScript - Full Course for Beginners] (https://www.youtube.com/watch?v=t2CEgPsws3U)
* [Algorithms and Data Structures Tutorial - Full Course for Beginners](https://www.youtube.com/watch?v=8hly31xKli0)
* [mycodeschool](https://www.youtube.com/@mycodeschool)
* [NeetCode](https://www.youtube.com/@neetcode)
* [Nick White](https://www.youtube.com/@NickWhite)
* [abdul_bari](https://www.youtube.com/@abdul_bari)