Coding Road Map
Hi Everyone, my name is Amina and I recently became a software engineer after switching from the film industry.
Coding was a huge learning curve for me and there’s so much information out there to get you started in the tech industry. I decided to put together a beginner friendly document with resources that I’ve used and continue to use and I hope you find it useful!
CONNECT WITH ME:
TWITTER: @yeahshewrites
INSTAGRAM: @yeahshewrites_
YOUTUBE CHANNEL: Develop with Amina
Inspired by: https://medium.com/level-up-web/developer-roadmaps-all-in-one-place-75c0402db0e0
This map is heavily influenced by my job role and since it’s my first tech job, it made sense for me to personalise my roadmap according to what I use at work. If you are completely new to tech like I was in 2018, I would recommend learning HTML and CSS at the very minimum then think about where you would like to go from there. It’s perfectly fine if you don’t know what kind of programmer you want to be. I still don’t myself and I’m constantly finding new things in the tech world I want to consider pursuing so don’t worry yourself too much about it. Whatever you decide to do, just make sure you actually start even if it’s 15 minutes a day.
Before you continue, I would recommend reading this article: https://medium.com/@assafweinberg/so-you-want-to-be-a-developer-25c92c0d11a7
It’s very easy to get ahead of yourself and jump straight into coding until you realise… you have no idea where to start and you’re not a tech geek. That was my first mistake when I first started my coding journey. I was so eager to learn everything at once I over complicated things and found myself unable to progress. Luckily, you won’t have to make the same mistake I did with these links below.
Before you jump right in….
How computers work
* https://www.explainthatstuff.com/howcomputerswork.html
Introduction to OS:
* https://medium.com/cracking-the-data-science-interview/how-operating-systems-work-10-concepts-you-should-know-as-a-developer-8d63bb38331f
* https://www.geeksforgeeks.org/introduction-of-operating-system-set-1/https://www.guru99.com/operating-system-tutorial.html
What is a Virtual Machine?
* https://www.howtogeek.com/196060/beginner-geek-how-to-create-and-use-virtual-machines/
Tech terms you should be aware of:
* https://skillcrush.com/2015/03/26/99-tech-terms/
LEARN GIT!
* https://www.youtube.com/watch?v=HVsySz-h9r4
I learn best by listening and doing therefore YouTube videos are a huge part of my learning.
I make the most out of video tutorials by pausing and rewatching bits I’m not sure of and I don’t continue until I feel comfortable enough to do so. It’s highly suggested that you type the code alongside the tutorial you’re watching. What I also like to do is pause the video after I’ve copied some code, comment it out and rewrite it again a few times so that I can get used to writing it that way. It’s tedious but it helps me remember things a bit more easily.
Tech Channels I use most frequently
* The Futur: https://www.youtube.com/user/TheSkoolRocks
* Corey Schafer: https://www.youtube.com/user/schafer5
* The coding Train: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
* Eli the computer guy: https://www.youtube.com/user/elithecomputerguy
* FreeCodeCamp: https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
* Programming with Mosh: https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA
This is probably my favourite part of coding and what got me into tech to begin with. What I love to do is go on websites that look really appealing to me and inspect the page. You do this by right clicking and choosing ‘inspect’ and you can see how the site was roughly put together. As you start learning HTML and CSS, this process will become more meaningful, fun and inspirational. Good luck!
HTML & CSS
Targets/Goals
Learning Resources
* Practice setting up your folder structures. Don’t bloody overcomplicate it - KISS!
* Create a homepage first using just HTML & CSS to practice and remember the general structure. Then sketch out what you want the rest of your site will look like. This is where I can practice building my nav pages properly and start practicing bootstrap framework
* Get better at structuring my pages properly and using bootstrap classes more efficiently. Close your bloody
* Explore SCSS and Foundation to use alongside bootstrap and incorporate it to your html pages. Don’t bloody over complicate it!
NOTE/REMINDER: Keep practicing with git even though most of your projects are being built by yourself. Ask the team if there are any projects I can set up a branch on so that I can practice pushing, pulling, merging and code rebasing. If not, create a separate repository and practice making and working on your own branches.
1. W3Schools
2. HTML for beginners
3. Code Academy: HTML & CSS Basics
4. Developer Mozilla - Basic web development
5. HTML Crash Course
6. CSS Crash Course
7. The 2019 Frontend Developer Crash Course
8. HTML CSS Tutorial for Beginners
9. HTML Crash Course
10. CSS Crash Course
11. The 2019 Frontend Developer Crash Course
12. HTML CSS Tutorial for Beginners
Once you feel comfortable with HTML and CSS, I would recommend learning Javascript first BEFORE jumping into a scripting language (learning this the hard way). I am personally finding it quite a challenge to get my head around Javascript but it’s super useful and worth the frustration I face. You will learn a lot of programming fundamentals that will help big time when it comes to learning other languages.
Angular is a framework which uses Javascript. You DO NOT have to learn to use this as there are many JavaScript framework options to choose from. I am using Angular because that’s the framework my team uses in their roles and it is what I was first exposed to. The learning curve is STEEP - there’s a lot to Angular that I’m still learning but it’s really interesting so far and it’s something I am aiming to get really good at.
JavaScript & Angular
Targets/goals
Learning Resources
JavaScript:
* Get the hang of writing proper logic that’s efficient for what you want your functions to do.
* Work on 2 mini projects using pure Javascript. Could potentially add it to one of the front end projects for HTML & CSS and play around with it.
Angular:
* Recap how to use observables and Resolvers
* Revise Reactive & TD forms for work project ( follow the article with the number validation to help with validating integers in my tracker tool).
* Refactor some of the functions you have in your .ts files and separate the frontend & backend. Split some of the functions because there’s way too much going on and it’ll make writing your tests a nightmare.
* May need to rename some components and change the routing.
* Update my tabs components and relearn how to use it again. When done, move the code you have in your app component, and create a separate one to store it all in. Then all you have to do in your app-routing.ts file is use ‘ReDirect’ in one of your path structures that will take the user to the main dashboard of your webapp. This might save you the hassle of having to make big changes to your code if you decide to change the way certain components in your app work (Don’t make the same mistake as last time!).
*
1. Javascript for kids
2. JavaScript - Full course for beginners
3. Beginner's guide to Javascript
4. Angular 8 (latest version) for beginners
5. Angular Crash Course for beginners
6. JavaScript W3Schools
7. JavaScript Crash Course
8. Who said JavaScript was easy?
9. Angular's official documentation
10. Step by step guide for Angular 7
11. How to set up tabs in Angular app
12. Reactive forms (including validation)
If you’re looking to learn your first backend scripting language, I would personally recommend python because compared to other backend programming languages, the syntax is way more friendly and easier to grasp. There’s so much you can do with Python and it’s been great learning it so far and using it at work. Flask is a web framework that’s commonly used with Python to build web apps. MongoDB is a language used for high volume data storage. Pymongo is a python library which uses Python to integrate and interact with MongoDB databases. Don’t worry if this
sounds too complicated, it’s a lot to take in and requires patience and time.
Python, Flask & MongoDB
Targets/goals
Learning Resources
* Re learn the basic structure of mongoDB e.g adding a collection.
* Practice structuring your data (don’t over complicate it!!!!)
* Recap Flask and how APIs work then rewrite some of your methods in your flask backend (have a separate python file with just your functions then call them in your route. Fix your bloody naming conventions so you don’t confuse yourself!
1. Freecodecamp - Python for beginners
2. Python for beginners (Tutorial series)
3. Python Flask Tutorial
4. Intro to MongoDB
5. Python for beginners
6. Python Tips & Tricks
7. Understanding Python virtual Environments
8. My go-to for MongoDB basics
Django (with python) with REST Framework & PostgresQL
Target/goals
Learning resources
* Understanding the overview of Django and how the files are structured (views, models, settings, core files & overall architecture)
* Installing Django and required packages properly including setting up the environment properly if working on a remote machine.
* Using Django’s RESTFUL framework to build APIs
* Mapping and connecting API requests successfully to front end (views.py)
1. Quick overview of Django
2. Django’s official documentation
3. Django with pytho