- Fundamentals for all coding professions
- Command-line interfaces
- Mac/UNIX and Linux: Bash
- Windows: Command prompt (cmd), Git Bash, Powershell and Terminal
- Source-code editors
- VS Code
- Other source-code editors
- Version control
- Git
- Repo hosting
- Github
- Markdown
- Command-line interfaces
- Choose your adventure
- Front-end skills
- HTML, CSS and Javascript
- CSS
- CSS Grid
- Flexbox
- Bootstrap
- Tailwind
- Javascript
- React
- Vite
- Turbopack
- Next.js
- Typescript
- Astro
- Redux
- React
- Back-end developer skills
- Further skills for all coding professions
- Testing
- Unit testing
- Testing
If I had to pick one meta-resource for choosing your learning materials it would be:
- Class Central
If I had to pick a small number of resources for getting started in each of these skills it would be:
- VS Code:
- YouTube;
- Git, GitHub, HTML, CSS, Javascript and React:
- Scrimba, Microsoft Learn, YouTube, EdX, Coursera, Udemy;
- SQL:
- DataCamp, Codecademy, SoloLearn, W3 Schools, EdX (Stanford), Coursera, Udemy;
- Computer Science:
- EdX and Coursera (Harvard, MIT, Stanford, Princeton);
- Python:
- EdX and Coursera (Harvard, MIT, UMichigan);
- Java:
- Codecademy or Coursera (Princeton, Duke and UC San Diego);
- Testing:
- Coursera (UMichigan), FreeCodeCamp, Udemy and ISTQB;
- Anything else:
- Look it up on Class Central, Udemy and YouTube
Although these skills can be learnt in many different orders, rather than starting with a specific coding language, I'd recommend starting with the fundamentals that everyone needs to know like your text editor features and version control. Other roadmaps tend to delay the learning of these fundamental skills or even forget to mention some of them entirely, but since they are essential to the workflow of any language, you may as well get them right from the start.
You don't need to be a master of each of these skills to move onto the next step in the road map. The basics are enough for now. In fact, generally speaking, you should just learn the bare minimum you need to move onto the next skill, as the add-on tool skills like React are often more practical and don't generally require comprehensive mastery of the previous levels. You can then come back and deepen the more fundamental skills as needed.
If you don't know what a command-line interface is, or anything else mentioned in this roadmap for that matter, and a link is not provided, web search it (Google it) and have a quick read of the definition.
If you're more interested in the back-end, you might start coming across skills that you don't feel you need once you get to the front-end skills section. That's where it becomes a choose your own adventure, but honestly I think even if you want to become a back-end developer, you need to know the absolute basics of HTML and CSS, and it isn't a bad place to start. As a markup language, HTML is much simpler than even python, so it's a great language to practice with while you're still mastering the basics of VC Code and Version Control. Building your own portfolio website to show off your back-end skills is not necessary to find back-end developer work, but it's not a bad idea, and if you want to do it, it will require front-end skills. Meanwhile, you don't need back-end skills to show off your front-end skills. You can immediately start showing off what you've learnt with GitHub pages for example.
On the other hand, the corresponding argument can also be made that even if you want to be a front-end web developer, learning python fairly early on isn't a bad idea in order to automate the boring stuff. In addition, there are high quality freemium courses in Python program from universities like Harvard and MIT, some of which also serve as a good general introduction to computer science. I'd still lean towards learning HTML and CSS first because it's probably easier for most people, but it's not a bad idea to learn python early on too.
Another back-end skill you may want to learn fairly early on even if you want to be a front-end developer is SQL, if only because for many entry level positions this seems to be the skill that help the most for getting the job, and you can always keep learning front-end development in your own time if you aren't learning enough on the job.
Here are some of the best resources overall for coding skills. You can check them out for any of the skills in this roadmap to see what's available.
- EdX (Harvard, Stanford, MIT)
- Microsoft Learn (Free)
- FreeCodeCamp
- SoloLearn
- W3Schools
- YouTube
- Documentation
- Scrimba
- Coursera
- Codecademy
- DataCamp
- Udemy
- Exercism
- Leetcode
- Hackerrank
- Neetcode
- GeekForGeeks
- CodingStudio
- HackerEarth
- CodeWars
- W3Schools
Read some cheat sheets of the most basic commands in the command-line interfaces of your system: bash (Mac/UNIX, Linux and Git Bash on Windows) and cmd (Windows only). Here are some general cheat sheet resources for both systems:
- Twitter thread of command-line and markup cheat sheets
- Mastodon toot of command-line and markup cheat sheets
- Geeks For Geeks Windows vs Linux command line table
Tip: Ctrl+C can be used to terminate any process. For example, if you type "mk" and hit enter without naming the new directory, you will be asked some questions that no beginner is likely to understand, so type Ctrl+C to cancel.
Mac/UNIX and Linux: Bash (Bourne Again Shell)
It'll probably be on your Mac or Linux system already, but you may wish to update to the latest version, using a web search for instructions.
Windows vs Linux Geeks For Geeks command line cheat sheet
Courses:
- DataCamp
- FreeCodeCamp Relational Database Certificate
Windows: Command prompt (cmd), Git Bash, Powershell and Terminal
These should be on your Windows system already, but you may wish to understand the difference between them, for example from these two articles:
- https://www.makeuseof.com/windows-terminal-vs-powershell/
- https://www.atlassian.com/git/tutorials/git-bash
or if you prefer video that much, from some of these videos:
- https://www.youtube.com/results?search_query=cmd+vs
- https://www.youtube.com/results?search_query=git+bash+vs
- https://www.youtube.com/results?search\_query=powershell+vs
- https://www.youtube.com/results?search\_query=windows+terminal+vs
Tip: Windows often has more than one version of PowerShell installed. Searching for "pswh" instead of "PowerShell" will generally bring up the more recent version.
Some roadmaps neglect to mention that learning to use a code editor efficiently is a non-trivial skill, and since you'll be using some kind of editor from the beginning, you may as well learn to use it efficiently right at the start, perhaps before you've even started to learn a coding language such as a programming language or markup language, or perhaps simultaneously with learning the basics of your chosen language. HTML is a great choice for initial practice in a code editor.
VS code is what is generally recommended, and with good reasons. It is a great editor (and more), but there are plenty of great free resources on how to use it efficiently, including YouTube videos and playlists, and some basic introductory articles such as this one from Codecademy, or if you want to buy a short course, there are some on Coursera and Udemy.
There are basically two types of alternative to VS Code that are meaningfully different in functionality: command line editors that are designed to be used without a mouse like Vim and NeoVim, and IDEs like those from JetBrains, which are designed to offer more features (that you probably won't need as a beginner), and are often premium paid products. The best bet, until you have a very good reason not to, is to use VS Code.
Complete the following steps, using documentation or tutorials where necessary.
- Decide what e-mail address to use for Git commits, perhaps setting up a new one for that purpose if you want privacy but also want people to be able to contact you through your commit email address.
- Create a GitHub account. If you do settle on a real email address rather than a no-reply address, use that to create your account.
- Create a new repository on GitHub
- Follow a tutorial on how to set up Git on your machine through your command line.
- Link Git to your GitHub account and clone your GitHub repository down to your machine.
- Follow a tutorial like Colt Steele's that shows how to do things in the opposite order, initializing an account and a repo on the machine and pushing it up to GitHub.
- Complete a course like Colt Steele's that goes into detail about using both.
If you don't want to use GitHub at all, just do a Git-only tutorial, like the first half of Colt Steele's course, but I wouldn't recommend this.
- YouTube/FreeCodeCamp/Microsoft Learn (Free)
- Colt Steele (Free/Paid)
Markdown is a a great tool. It's a markup language that is generally used for README files, to give them basic formatting, which makes them look much better than a plain text file while being easy to write in any plain text editor. GitHub supports Markdown README files by default, such that the file you will see open when you open a repository is the formatted readme.ms file if one is present.
Markdown can also be easily converted to HTML with various tools such as the Markdown All in One extension in VS Code (I recommend turning off "Auto update TOC on save" at the bottom of the settings), https://markdowntohtml.com and $md = ConvertFrom-Markdown in Windows PWSH. This a great way to start any website that requires a fair amount of text and basic formatting, because it's easier way to format text with markdown than with HTML. More detail on conversion options can be found here: https://adamtheautomator.com/convert-markdown-to-html/
Although my suggestion is to learn the fundamental language-agnostic skills like VS code, Git and GitHub first, I otherwise think the roadmaps at roadmap.sh look great, especially the Frontend and Backend road maps. Feel free to use those from this point onwards, but here are the courses that I've tried myself, or that I'm planning to try, and those that look the best value as alternatives.
Thread on some additional project tutorial & challenge resources
- Alphabetical list: https://www.w3schools.com/TAGS/default.asp
- Thematic list: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- HTML vs Markdown: https://www.markdownguide.org/basic-syntax
- Obsolete HTML-Only Styling Elements: https://www.w3docs.com/learn-html/deprecated-html-tags.html
- Scrimba Learn HTML and CSS (Free)
- FreeCodeCamp (Free)
- Microsoft Learn (Free)
- EdX
- W3C (180-190 hours) (Freemium)
- IBM (Freemium) (4-8 hours)
- Youtube project tutorials
- Coursera
- John Hopkins University (Freemium) (40 hours)
- Meta Front-End Developer Certificate (180-190 hours) (HTML, CSS, JS, Git/GitHub, React)
- Colt Steele (Free/Paid)
- Udemy projects
- Scrimba (Free)
- Youtube project tutorials
- Udemy projects
- Scrimba (Free)
- Youtube project tutorials
- Udemy projects
- FreeCodeCamp (Free)
- Scrimba (Free)
- Udemy/Youtube/Microsoft free project tutorials
- John Hopkins University (Freemium)
- Hong Kong University (Paid with free trial)
- Udemy projects
- Youtube/Udemy project tutorials
- YouTube project tutorials and courses
- Microsoft Learn (Free)
- IBM (Freemium)
- Stanford Computer Science 101 (24-36 hours)
- Harvard University (Python and Javascript) (Freemium) (70-110 hours)
- YouTube projects
- Udemy projects
- https://javascript30.com (Build 30 things in 30 days with 30 tutorials)
- FreeCodeCamp (Free)
- John Hopkins University (Freemium)
- Scrimba (Free)
- Traversy Media
- FreeCodeCamp (Free)
- Hong Kong University (Paid with free trial)
- Udemy projects
- Official resources
- YouTube
- Android official resources
- YouTube including Free Code Camp
- Class Central
- Harvard University (Freemium)
- CS50P (30-90 hours)
- Python & Javascript (70-110 hours)
- MIT (Freemium)
- Scrimba (Free)
- Automate the boring stuff
- Project ideas: automate bold headers in markdown
- FreeCodeCamp x 2
- Angela Yu (YouTube, 100 Days Of Code)
- Fred Baptiste & other Udemy projects
- W3Schools (Free)
- FreeCodeCamp (Free)
- SoloLearn (Freemium)
- Stanford University (Freemium)
- Intro (16-20 hours)
- Data Camp (Paid)
- Udemy projects
- Princeton University (Freemium)
- Duke University (Paid with free trial)
- UC San Diego (Paid with free trial)
- Codecademy (Free)
- Microsoft Learn
- YouTube
- SoloLearn
- Coursera/Google
- EdX
- YouTube (Free)
- FreeCodeCamp (Free)
- EdX and Coursera
- Udemy projects
- Microsoft Learn
- Youtube/Codecademy
- UC Irvine
- Udemy
- Microsoft Learn
- Youtube
- Class Central
- Scrimba (Free)
- Class Central