Want to learn how to code? This article guides you through the jungle of technologies and resources, helping you go from no knowledge to building fast, interactive, modern websites.
I have spent the last three months learning to code, and though challenging at times, it has been a highly rewarding experience.
One of the trickiest challenges was choosing what to learn and where to learn it. There are so many languages, frameworks, and libraries - and lots of conflicting advice.
Plus, some learning resources were much better than others. If I had known what resources to focus on, I might have progressed even faster.
In that spirit, I thought I’d share what has worked for me. If it feels like a lot, I was lucky enough that I could spend several hours a day learning this material. How fast you do it isn’t a sign of your potential as a developer, so don’t worry if it takes longer to get through the material. But, if you can dedicate the time, it can be done in three months.
At the bottom of the article, there’s a full list of my recommended resources.
These are the three core languages of all web applications, and it’s (almost) impossible to build anything on the Internet without using them.
If you’ve never done any coding before, then HTML is a great place to start. It is the core building block of the Internet, and unlike most other languages, it gives learners immediate visual feedback on the code they are writing.
I had picked up bits and pieces of HTML before I began taking coding more seriously, but if I had to choose one resource to learn it today, I would go with freeCodeCamp. It’s well-paced, quick and simple - and it’s free!
CSS is the natural companion to HTML. On the surface, it’s very simple, although there are certain concepts - especially related to layout and positioning - that can take some time to get your head around.
Once again, freeCodeCamp is a good choice for CSS. I didn’t spend much time learning CSS via courses, as the syntax is pretty simple, so most of my learning came from trying things out in my own projects.
The most difficult part of CSS is understanding layout. Most of my layout questions had been asked by users on StackOverflow, so a quick Google search solved most of my problems.
CSS3 has two powerful layout tools, and it can help to dive deeper into these: I often go back to the Flexbox Guide and Grid Guide, by CSS Tricks, and I followed roughly half of Wes Bos’s free CSS Grid Tutorial before I felt ready to move on.
Part 2: Other must-have parts of any developer’s toolkit
Git and GitHub
Git is what’s called a “version-control system” and GitHub is the most popular, cloud-based Git service.
In simpler terms, Git allows you to backup your files, keep track of changes, share your progress with other developers, and work on collaborative projects.
When you’re just learning, and have no need to use Git, it can feel like a chore to learn. But it’s a worthwhile one: not only do the vast majority of professional developers rely on GitHub (or similar services), but having an active GitHub profile can help you secure work.
The sooner you start committing your work to GitHub, the more evidence you’ll have of your experience as a developer. I used Codecademy’s Git Tutorial to help me get started.
The Command Line
The best way to use Git is via the “terminal” or “command line”, and this is also essential for modern web developers, allowing you to easily add 3rd party packages to your websites via NPM (Node Package Manager) or Yarn. As above, I took my first steps here using Codecademy.
A note for Windows users: I strongly recommend you download https://gitforwindows.org/ and use it for Git and NPM/Yarn. It allows you to use commands familiar to Linux and Mac users and - as far as I can tell - it is an all-round improvement on the Command Prompt that’s built-in.
Part 3: Building your skill set
For web developers, here’s what I’d recommend.
Sass is a CSS pre-processor. It takes basic CSS, and adds several new functionalities that make it better, easier to write, and easier to maintain. It’s also very easy to learn. Simply follow the official guide. Once I began using Sass, it was very difficult to go back to regular CSS!
Bootstrap is a component library, developed by Twitter. It allows developers to build prototypes very quickly. Instead of custom coding that slider, or navbar, or accordion, Bootstrap can help you deploy one in seconds.
Like with Sass, it doesn’t take long to get comfortable with Bootstrap’s basics. I recommend learning Bootstrap because it can help you set up a project very quickly. This is particularly useful if you’re making a test project to learn another technology, and don’t want to spend time on your site’s appearance.
Having said that, as I learner I wouldn’t rely too heavily on Bootstrap. You’ll learn a lot by building common components (navigation bars, light boxes, sliders, etc) by yourself!
2019 may be a turning point for jQuery, as increasing numbers of developers turn to frameworks like React.js and Vue.js, where jQuery’s style of manipulating of the DOM is seen as bad practice.
Of all these libraries and frameworks, React appears to be the most popular and fastest growing. It was developed by Facebook, and its approach to DOM manipulation also gives it an advantage over Angular.
I really like React. It was harder to learn than jQuery, and it takes longer to write. But the benefits become apparent even in small personal projects. React’s modular nature, use of state, and speed make it a pleasure to work with.
The best free resource to learn React was its own tutorial.
WordPress and PHP
If you have aspirations to work as a web developer, either freelance or as part of a larger company, you’ll likely encounter WordPress.
Developers may have mixed feelings about WordPress and PHP, the language that underlies it, but it is the go-to solution for many businesses and powers almost a quarter of the web.
The reason for its continued success is familiarity. Many people have experience using it as a CMS (content management system) and - with the right optimizations - it can be as fast and versatile as many more modern CMS solutions.
I completed PHP problems on CodeWars for a week or so, just to get familiar with the basic syntax and methods, and that was enough for me to dive into WordPress. In particular, I recommend this fantastic tutorial for beginners to WordPress, which explains how to get started with custom themes. I would also read up on the Underscores Starter Theme. When you have problems, the place to go is https://developer.wordpress.org/.
Part 4: What’s next?
Minus one or two technologies, this is everything I learnt to get to a comfortable level in my first three months.
My list of things to learn includes Node, Next, Express, Redux, Gatsby.js, and GraphQL. That’s a lot of technologies, and I’m not (yet!) equipped to tell you about any of them. Better get back to it!
TL;DR: Summary of Resources
As above, plus:
As above, plus:
Git and GitHub
WordPress and PHP