The Best Programming Languages to Learn First — A Roadmap for the Indecisive Beginner

The most time-efficient and cost-effective way to learn and the free and paid courses to take

Anyone can learn to code, but what programming languages should absolute beginners learn first? There are so many choices! If you are suffering decision paralysis, then I encourage you to stop researching and instead use the time to learn something that will get you off to a flying start.

The following is a roadmap that will get you into the world of programming in the most frictionless, time-efficient, and cost-effective way possible. I won’t give you a multitude of choices. I will show you the exact courses to take so you don’t have to do any more searching.

The languages in this roadmap are going to be around for a long time. Even if you change your mind later on, they will give you a solid foundation. You won’t be sorry you learned them.

Before getting on to the roadmap, it’s important to know what part of the huge development world you will be operating in, and why I recommend this roadmap. Therefore, the following section has a brief description of the branches of software development.

The Branches of Software Development

The following are the branches of software development according to Wikipedia:

• Software engineering
• Computer programming
• Video game development
• Web development *(I recommend this one)
• Web application development
• Mobile application development

Unless you definitely know that you want to start with any of the other branches, then the branch that I recommend that you start with is web development.

Why web development? For the following reasons:

• Web developers create everything you see on websites across the world, and their skills are in high demand. According to U.S. News, web developers rank #3 in Best Technology Jobs and #23 in All Jobs. A web developer’s median salary in 2018 was $69,430 with the best-paid 25 percent making $95,020. According to CollegeGrad.com, “employment of web developers is projected to grow 8 percent over the next ten years [2019–2029], much faster than the average for all occupations.”
• The basic web development languages (HTML, CSS, and Javascript) rank amongst the easiest to learn. Some argue that HTML and CSS are not programming languages, but call them whatever you want, you cannot build a website without them — they are coding languages. In fact, you can get a job knowing only HTML and CSS.
• With web development, you can teach yourself to program in your spare time, and you can practice your new craft by building your own websites, or websites for clients. The point is, that the barrier to practice what is learned is lower for web developers than for the other software development branches. For instance, a client who will hire you to make a web site is easier to find than one who wants you to make a video game.
• A basic laptop is all that is needed to practice your craft. Other development branches like video game development require higher-end, more expensive computers.

There are a few things you need to have before you can start learning to code by following the roadmap. I will briefly outline these in the next section.

Stuff You Need, and Stuff You Need to Know

The following is stuff you cannot do without:

A laptop/desktop

You can follow video and text tutorials on your mobile, but when you want to start practicing what you’ve learned, you’re going to need a laptop or desktop. A laptop is better because it is portable. Get the best you can afford. You don’t need anything fancy. A $150 laptop can do the job. Web development doesn’t require high-end graphics cards or CPUs.

The operating system doesn’t matter either. Windows 10, Mac, Linux, and Chrome OSs are all fine.

Some data to download tutorials

Might seem obvious but you have to budget for this. If you watch a lot of video tutorials you will need between 1GB to 10GB of data. Written tutorials are way less data-hungry, but you will find that in the beginning, you will watch more videos because it’s much easier to follow along.

A code editor

A code editor is a program similar to Microsoft Word that you use to write your code. Choosing the right code editor makes a huge difference in how easy it is to write the code. While still learning, it helps if you use the same editor as the tutorial you are following, because then you can follow along click for click.

The most popular editor is Visual Studio Code. This editor is free, maintained by Microsoft, and is used by most professional developers. I highly recommend this editor. You will find that most online tutors use it.

Here are some YouTube tutorials for you to get started: Getting started with Visual Studio Code (5:03) A Light Intro (YouTube) Visual Studio Code Tutorial for Beginners — Introduction (33:48) An in-depth tutorial (YouTube) Visual Studio Code Crash Course (1:32:34) An in-depth tutorial (YouTube)

A browser with special tools for developers

Web development is all about creating websites, and you need a browser that has special tools for developers to work on their website.

I recommend Chrome. Yes, the same Chrome that you use for browsing the internet! In Chrome, there are hidden developer tools that you can toggle on and off by pressing F12. Try it!

The following tutorial is 3 years old, and some of the Chrome buttons and icons may have moved, but it is a good place to start and will give you a good intro for beginners: Google Chrome Developer Tools Crash Course (51:19) An in-depth tutorial (YouTube)

The following is stuff you need to know:

Frontend and backend

Everything you see when you visit a website is the frontend.

When you log in to a website with your password, the code on a remote server that checks your details is the backend. When you log into your bank account and transfer money, the code on the server that does the transfer is the backend code.

Database and storage

‘Database’ is the term used for the place on a server that stores structured text information, for instance, your name, address, etc. An example is this: {name: Mark, address: 100 Main Street.}

‘Storage’ is the term used for the place on a server that stores files, such as JPGs, PDFs, and other documents.

Frameworks

Some languages like CSS and Javascript have frameworks. The point of these frameworks is to bundle things into small reusable parts so that a user doesn’t have to keep doing things manually. A good example of a CSS framework is Bootstrap, which bundles things like button styles.

See this YouTube video for more info. Web Development Framework Pros & Cons (20:21)

Single Page Application (SPA) vs Multi Page Application (MPA)

MPAs are the traditional way that websites work. Every time you click on a link, a new page is downloaded from a server.

SPAs, on the other hand, download a codebase that allows you to navigate on the web page as if it were an app. SPAs are must faster and only structured text data is fetched from a database during user interaction. Javascript frameworks are used to make SPAs.

See these YouTube videos for more information: Dynamic Websites vs Static Pages vs Single Page Apps (SPAs) (12:11) SPAs vs MPAs/MVC — Are Single Page Apps always better? (15:59)

Free vs paid courses

Don’t be fooled that you have to take expensive, fancy courses to learn to program. Approximately 80% of everything you learn will be from free sources. YouTube is probably the best resource, and there are many more, including many written articles on the internet.

You will also find that, as you become more experienced, you will be able to read programming documentation directly from the source without needing any tutorship.

Always start with the free crash courses, and then if you want to dig deeper, find a paid course, or use one recommended in this article.

1. HTML (HTML5)

Difficulty level: 1/10

Use On: Frontend

About HTML is an acronym for Hypertext Markup Language. Don’t be scared off by the long name, this language is a cuddly kitten.

Why HTML? Because you can’t build a web page without it. This page you’re reading is displayed using HTML. HTML tells the browser what and where to display things like text, pictures, forms, and buttons.

The Courses If you want to dive deep (recommended), then follow the four-part YouTube mini-series below: HTML Course — How the Web Works | Beginner’s Tutorial | #1 (23:34) HTML Course — How Web Developers Work | Beginner’s Tutorial | #2 (9:39) HTML Course — Diving into HTML | Beginner’s Tutorial | #3 (27:49) HTML Course — Diving Deeper into HTML | Beginner’s Tutorial | #4 (46:49)

If you want to dive straight into the HTML then start with this YouTube mini-course: HTML Crash Course For Absolute Beginners (1:00:41)

How Long To Become Proficient About 30 hours of lessons + practice

2. CSS

Difficulty level: 3/10

Use On: Frontend

About CSS is an acronym for Cascading Style Sheets. The objective of CSS is to make HTML look pretty. HTML and CSS go together like a car and paint.

Why CSS? You can leave the HTML without any CSS style, but it won’t look good.

The Courses This is a good intro course: CSS Crash Course For Absolute Beginners (1:25:11) YouTube mini-course

If you really want to dive deep then take this paid course on Udemy for about US$12 (wait for specials that are offered every couple of weeks). You will have lifetime access to the course: CSS — The Complete Guide 2020 (incl. Flexbox, Grid & Sass) (22.5 hrs)

How Long To Become Proficient About 60 hours of lessons + practice

CSS Frameworks CSS frameworks bundle pre-built styles so that you don’t have to start from scratch. They are dead simple to use. The one I recommend to get started is Bootstrap.

Here are some Bootstrap courses: Bootstrap Beginner Crash Course (1:13:27) YouTube mini-course Bootstrap 5 tutorial — crash course for beginners (1:25:45) YouTube mini-course

3. Javascript

Difficulty level: 6/10

Use On: Frontend and backend

About Javascript is the language that does all the heavy lifting on a website. Javascript is used every time you submit a form, sign in, or retrieve any data from a server. It also produces special effects such as making things move on a web page.

Javascript has a few quirks such as the ‘this’ keyword. Don’t worry about it now, but you will come across them soon enough.

Why Javascript? It’s difficult to build a website without Javascript. You can have a page to show without it, but no interaction is possible.

The Courses JavaScript Crash Course For Beginners (1:40:29) YouTube mini-course

If you really want to splash out, then take this paid course on Udemy for about US$12. JavaScript — The Complete Guide 2020 (Beginner + Advanced) (52 hrs)

How Long To Become Proficient About 120 hours of lessons + practice

Javascript Frameworks See below.

4. Javascript Frameworks

Difficulty level: 8/10

Use On: Frontend

About I’ve put Javascript frameworks in their own section because they are a major topic. You don’t need to learn a framework if you just want to create a normal website. They are much more complicated to use than just plain HTML + CSS + Javascript. They bundle together HTML + CSS + Javascript into a framework that makes it easy to create a web app.

If you want to only spend money when absolutely necessary, then Javascript framework courses are where you should spend your money.

Why Javascript Frameworks? Javascript frameworks allow you to create a fast app-like experience (SPA) on your website.

Here are two Javascript frameworks you can try:

a) Angular (+ Typescript)

Angular is a huge framework that will provide everything you need to create your SPA.

You have to use Typescript with Angular, instead of Javascript. Don’t worry they are almost exactly the same, you will get the hang of Typescript very quickly.

Here are some courses you can take. You might have to take a paid course if you want to become 100% proficient though. But start with the free crash courses to get an idea of what it is about.

The Courses Angular Crash Course (1:24:09) YouTube, crash course TypeScript Crash Course (46:09) YouTube, crash course

You can splash out on an Udemy paid course (wait for specials): Angular — The Complete Guide (2020 Edition) (33.5 hrs) Understanding TypeScript — 2020 Edition (15 hrs)

How Long To Become Proficient About 120 hours of lessons + practice

b) React

Another huge framework.

The Courses React JS Crash Course (1:38:23) YouTube, crash course

I also recommend this paid course on Udemy: React — The Complete Guide (incl Hooks, React Router, Redux) (40.5 hrs)

How Long To Become Proficient About 120 hours of lessons + practice

Angular vs React

Which one should you learn? React has become more popular lately. But both are good frameworks. I prefer Angular.

Angular is older, therefore has more learning resources, and is maintained by Google.

Take the free crash courses for each and see which one appeals to you.

Angular vs React vs Vue [2020 Update] (28:08) YouTube

5. Git and GitHub

Difficulty level: 1/10

Use On: Frontend

About As soon as you start coding you will have to save your project files somewhere. Git allows you to save all the versions of your files in an easy to retrace format. It is a Version Control System. No professional developer works without it.

Every time you ‘commit’ to your Git repository, Git will record who made the changes, when the changes were made, and what files changed. Git allows you to have multiple developers working on the same project at the same time. You can revert to an earlier version of your project at any time.

GitHub is just a copy of your Git repository in the cloud that is synchronized with your local Git repository.

Git is built into Visual Studio Code, which is another reason that I recommend this editor.

Why Git? If you have a superhuman memory, don’t use Git. If you are sure your laptop won’t crash or be stolen, or don’t need to collaborate with other developers, don’t use GitHub.

The Courses Git & GitHub Crash Course For Beginners (32:42) YouTube, crash course Git Tutorial for Beginners - The Basics (47:07) YouTube, crash course Git Tutorial for Beginners — Crash Course (29:38) YouTube, crash course GitHub Tutorial for Beginners | The Basics (19:03) YouTube, crash course

How Long To Become Proficient About 20 hours of lessons + practice

6. Hosting Service + Database + Storage + Authentication

Difficulty level: 5/10 (If using Firebase, as described below)

Use On: Backend

About After you create your website, you need somewhere on the internet to host it. There are many hosting services on the internet, but I am going to recommend Firebase, the Google Backend-as-a-Service — BaaS, where you can host your projects.

Why Firebase? Firebase can manage all your backend requirements, like hosting, database, storage, authentication, and analytics, amongst many more services. The advantage of all these services is that it makes it easy for beginners to provide a backend for their website, without having to build everything manually.

There is a generous free tier for Firebase services, which you can use for your beginner projects. In all likelihood, you won’t pay anything until you have a few thousand users.

The combination of Angular + Firebase is particularly synergistic because both are maintained by Google.

The Courses Firebase — Back to the Basics (25:22) YouTube, short intro to Firebase Google’s Firebase YouTube Channel Watch all the Firebase on the web videos

How Long To Become Proficient About 100 hours of lessons + practice

7. RxJS Library (Reactive Extensions for JavaScript)

Difficulty level: 9/10

Use On: Backend + Frontend, and link frontend to backend

About RxJS is a Javascript library. A Javascript library is just a collection of functions that you can add to your code and use. This is so that you don’t have to write repetitive code from scratch. For instance, a common function is to find the smallest number in an array of numbers.

I’ve put this at #7, but in all likelihood, you will have to learn it when you start using a Javascript framework, or when hooking up your frontend with Firebase.

RxJS uses observables to listen for changes to a database or to listen to changes of any other observable. This is extremely useful because it avoids the necessity of constantly checking to see if there are any changes in data. When using RxJS, any changes to a remote server’s database are communicated within milli-seconds to the frontend code, without having to manually check.

Why RxJS? Because that’s what the pros use. An extremely useful library with an enormous range of use cases on the backend and frontend. You need to learn RxJS to incorporate advanced functionalities, such as asynchronous programming, into modern websites.

The Courses and resources A playlist with a good introduction to RxJS YouTube, a playlist RxJS Top Ten — Code This, Not That (14:43) YouTube, a quick rundown RxJS Quick Start with Practical Examples (15:32) YouTube, a quick rundown Learn RxJS in 60 Minutes for Beginners — Free Crash Course (59:49) YouTube

Websites for RxJS: LearnRxJS Rxmarbles

These articles are helpful: Learn to combine RxJs sequences with super intuitive interactive diagrams RxJS switchMap, concatMap, mergeMap, exhaustMap (this link may break in the future, as the site is being migrated)

Udemy paid courses: RxJs 6 In Practice (with FREE E-Book) (4.5 hrs) Reactive Angular Course (with RxJs) (5.5 hrs)

How Long To Become Proficient About 100 hours of lessons + lots and lots and lots of practice

Final Thoughts

The learning process can be a stressful one for beginner programmers. Choosing the language roadmap shouldn’t add to that stress. Many beginners give up because there are too many gaps in the roadmap, and they cannot find their way to the destination.

Don’t begin your journey haphazardly in the middle of nowhere. If you are not sure of what to start with, I highly recommend using the roadmap above.

Thanks for reading and I wish you all the best. If you enjoyed this article, consider subscribing here to Medium membership to get access to thousands of other articles.

You might also like: