How I started learning to code: the resources I’ve used in the first three months

Introduction

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.

Part 1: HTML, CSS, and JavaScript

These are the three core languages of all web applications, and it’s (almost) impossible to build anything on the Internet without using them.

HTML

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!

If you’re looking for an environment to practice what you’ve learnt, I recommend CodePen, which is a sandbox for the core languages of the web (HTML, CSS, and JavaScript).

CSS

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.

JavaScript

HTML and CSS aren’t fully fledged programming languages, and so you won’t get a full sense of what programming really is until you start learning one. JavaScript is the programming language of the web.

That makes JavaScript an extremely safe choice to learn. Plus, it’s increasingly being used for other purposes, through technologies like Node.js.

For beginners, JavaScript is not as approachable as HTML or CSS, and I recommend you jump between a variety of different sources to reinforce the core concepts.

• Beginners: As with HTML and CSS, I highly recommend freeCodeCamp’s JavaScript course. I several other courses, the most useful of which were Codecademy and a free introductory course from Flatiron School.
• Intermediate: Once I had a better understanding of JavaScript, I started completing problems on https://codewars.com. CodeWars is fantastic, but its problem difficulty grading is hit-and-miss, some of the problems supposedly for beginners can seem very demanding! I suggest starting with several problems at the lowest tier. If you get stuck, searching for JavaScript methods on the MDN website can be very useful.

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

Once you have working knowledge of HTML, CSS and JavaScript, the choice of technologies which you could learn can feel overwhelming.

For web developers, here’s what I’d recommend.

Sass

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

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!

jQuery

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.

However, I would still recommend learning jQuery. Not only is there a huge amount of jQuery still in use on the Internet (and you’re almost guaranteed to encounter it as a professional web developer), but I found that learning jQuery really helped me develop my knowledge of JavaScript. For me, the best place to learn jQuery was its official site.

Nowadays, when I am trying to achieve an effect in vanilla JavaScript, which I know exists in jQuery, I look at jQuery’s source code. jQuery’s code is well-written, fast, and highly-compatible, and it’s helped me understand a lot about what vanilla JavaScript can do. I certainly benefited from learning jQuery before picking up a more modern technology like React.

Other libraries, such as Lodash and Underscore, make use of similar principles to jQuery. Often, I prefer to try and understand the source code of these technologies and write in Vanilla JavaScript. That said, there’s no need to reinvent the wheel: if you find yourself with multiple places where Lodash (for example) would be useful, then go for it!

React

There are several modern JavaScript libraries out there, including Ember, React, Vue, and Angular. There’s no single right choice here, but after doing some research I chose to focus on React.

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 only programming course I have paid for is Wes Bos’s React for Beginners. This is because programming in React can feel quite different to programming with “traditional” JavaScript: it exploits many features specific to ES6 JavaScript, and there’s a good chance you won’t have encountered JavaScript’s class system before using React.

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.

I was planning on going deeper into PHP. But, then I decided that, for now, I am happier in JavaScript land! There are so many options for next steps, depending on what you’re interested in.

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!

Summary of Resources

HTML

• https://www.freecodecamp.org/
• https://codepen.io/

CSS

As above, plus:

• CSS Tricks
• Wes Bos’s free CSS Grid Tutorial

JavaScript

As above, plus:

• Codecademy
• Flatiron School’s free Intro to JavaScript
• CodeWars
• MDN

Git and GitHub

• Codecademy

Command Line

• Codecademy

Sass

• Official documentation

Bootstrap

• Official documentation

jQuery

• Official documentation

React

• Wes Bos’s React for Beginners (the only paid course I’m recommending)
• Official tutorial

WordPress and PHP

• CodeWars
• Tania Rascia’s article on creating a custom WordPress theme
• The WordPress developers site
• The Underscores Starter Theme