Cracking the Code: A Beginner's Roadmap
Recently a friend of mine expressed that they want to learn how to code. They were unsure of what they wanted to learn and felt a bit lost since there are many languages and free courses. It can be difficult or even overwhelming to choose what to focus on at first. I get it - I was in the same place five years ago.
Before I changed careers I wanted to know that coding is something I would be able to do. I thought you have to be obsessed with technology to be good at it. I also thought that you have to be really clever to be a programmer. Both traits I did not have! Now I know that not being 'clever' or into technology aren't dealbreakers, but you need to like problem-solving.
If you are also considering a tech career these are the steps I shared with my friend and now you. Everything listed in this article has a free tier and that's the only one you will need. A little disclaimer - these are the things I did to find out if I wanted to get into programming. Please do not take them as gospel. If you are interested - give it a try but if you find you are not enjoying it, try sometime else. What worked for me may not work for you and that's okay!
Before we get started
You do not need any prerequisites for this. I will be using words like "backend" and "frontend". The frontend is what you see on the web - what you are looking at right now. The backend is hidden from you. The logic of adding your email to the list and sending emails out after you subscribe is done by the backend.
Let's start with a question. Have you ever seen a website you like? Why? Is it easy to use or beautiful? If you can't answer that - how about another question? Have you ever used an awful website, that made you feel frustrated or didn't work? Maybe you wonder why it is not working or how it's built. Whatever the answer, if you are using Chrome, right-click anywhere on the page and click Inspect and a sidebar will open. You should see something like the screenshot below. The Elements tab is what we will focus on right now.
What you are seeing is HTML which stands for Hyper Text Markup Language. On a high level, it groups and positions different elements of the page. For example the text or a picture. HTML goes hand in hand with CSS - Cascading Style Sheets. CSS is for styling e.g. font sizes, text colours, background colours etc. That's a great first thing to learn because once you understand HTML and CSS, that's enough to make basic websites! Even if in the future you decide the frontend is not for you, it's good to understand how it works.
Steps
1. Complete the free HTML & CSS course on Codeacademy.
Once you complete it, it's good to put this new knowledge to use. Build something, anything in HTML & CSS. Did your mind go blank? Mine did too! Don't worry, you can pick a website and copy it.
2. Pick a website template you like - you can find them on colorlib or Elements. Make sure it has enough elements for you to work with e.g. header, main body and a footer.
3. Try to recreate it using just HTML & CSS - do not worry about the functionality. Focus on how it looks. It doesn't have to be perfect! So don't stress if you can't get something to work - it's a cool way to explore and built something.
You can do it online with HTML editors but I do highly encourage you to download a source code editor. I promise it's straightforward. It will help you with prompts, auto-completing and formatting of the code so it's easier for you to read. I use Visual Studio Code, but there are other free tools out there. If you want extra help there are lots of youtube tutorials on how to get started with Visual Studio Code.
Top Tip! For photos you can use Pexels and for icons Fontawesome - both have plenty of free icons and photos for you to use!
Once you complete this step - well done! You've built a website template and acquired a frontend skill. Next on our list is to explore something in the back end.
4. I will give you a choice. Choose either Python (it's more human-readable) or JavaScript (you can run it in the browser which is cool in my opinion). I would again suggest you pick one of the free courses on Codecademy, Codefy or freeCodeCamp.
In the tutorials, you follow along step by step, but once you complete them it's good to do some practice on your own. I struggled with the idea of loops and how to apply them, break out of them etc. I remember I cried one night over it because I couldn't get it. I found a website with loop exercises and did around 10 of them and then something clicked. It felt amazing! If there is a concept you are struggling with, trust me you are not alone. If that happens search for some exercises online.
The next step is for practising the syntax and problem-solving skills in your newly acquired language.
5. Hakerrank is great for that! Go to Problem-solving and filter by 'easy' and complete 10 (or more!) challenges.
Top Tip! There are other websites you can use which are listed in this medium article
If you completed the steps and you are still interested in becoming a developer - fantastic! There are other skills you should consider. I'm not sure if touch typing is common. I certainly couldn't do it before changing careers, but it's a crucial skill to have. You can check your code as you are typing it and you can focus on what to type not on typing itself. The bootcamp I did require a minimum speed of 40-50 words per minute for normal typing and 30-40 words per minute for code typing.
6. Learn touch typing. I used Typingclub and for code typing I used Speedcoder.
I hope this learning journey was fun for you. My journey was a rollercoaster of emotions but I don't regret it. Initially, a big blocker for me was my perception of what a programmer should be like. I could never fit that narrow description. My perception was off by miles and I'm glad I gave it a shot. Once I completed the steps I decided I want to be a software engineer and I enrolled in a professional bootcamp. Being a programmer provided me with a lifestyle I love and I could not imagine doing anything else. Whether you choose this path or another I hope this has helped. Best of luck on your journey!
Here's a list of all the resources I linked in the article. None of this is sponsored - these are the tools I used in the past or continue to use.
Here are some other resources in case you are hungry for more: