A few years ago, I blindly stumbled my way into tech. I vividly recall having a conversation with a friend who was majoring in Computer Science at the time, saying that I wanted to learn how to code. I even had a naïve plan: I would learn HTML, CSS, Rails, and how to create iPhone apps.

Did I say anything about Ruby? Nope.

How far did I get with Objective-C? Two chapters into a book.

Why did I give up? It's because I didn't know how to actually start learning.

It was incredibly naïve of me to think that I should learn the Rails framework before touching the underlying language to begin with -- it sounded like the cool new thing at the time and certainly must have been worth saying I knew.

Here we are, a few years later, and I can't help but notice the same pitfalls that a lot of beginners end up in when they want to learn to code. I don't blame them one bit -- tech is a really fun sector to break into, but there's just so much noise out there.

There's a running joke in the JavaScript community that there always seems to be a new framework of the week. Backbone, Ember, Meteor, Angular, React! What's next? Does it really matter? Beginners are so overwhelmed with these terms that it's really difficult to find a good place to start.

With the rise and influx of coding bootcamp programs, one concern I see time and time again is with what each program teaches: Does (insert coding bootcamp name) teach Angular 1 or 2? Which ones teach React? Are there any coding bootcamps that teach Swift? How many of these programs will teach me how to build (insert popular app)?

This post is for the beginner. The person who's really interested in learning how to code, but gets completely overwhelmed by all the choices out there. It's tailored towards people interested in learning web development, but really you could take the lessons learned here and apply it to just about anything.

Note: Before we get started, I want to address the importance of understanding technical vocabulary. It's a major roadblock for beginners -- it certainly was for me. I heavily encourage you to Google any term you don't quite understand here, since the ability to find answers to the things you don't know is incredibly important.

Where do I start?

Start with the Fundamentals of programming. These aren't the flashy technologies that you get to play buzzword bingo on a resume with, but they're going to solidify your experience and teach you how to rely on yourself.

Before I give you a list, I want you to take out a sheet of paper and list off the steps it takes for you to get cash from an ATM.

Your list might have looked something like this:

1. Put debit card into ATM  
2. Enter PIN  
3. Choose dollar amount  
4. Receive cash  
5. Remove card  

Now, what if you had to teach this action to someone who's never gotten cash from an ATM before? Take a few minutes to write down some steps with that.

That list might look like this:

1. Remove your (bank name) debit card from your wallet  
2. Put the debit card into the slot on the ATM that says "Insert Card", following the image on the ATM to determine what direction to insert it  
3. Using the number pad below the screen on the ATM, enter your PIN when asked and press Enter  
4. Decide whether or not you want a receipt for this transaction and press the appropriate response on the touchscreen (yes, you can touch it!)  
5. Tap on the option to Withdraw Cash  
6. Tap on the amount you wish to withdraw, in multiples of $20, as long as you have enough in your bank account to cover the withdrawal  
7. Confirm that the amount you selected is correct  
8. Wait a few minutes for the ATM to process the request  
9. Follow the on-screen instructions to locate the slot where the cash is dispensed from the ATM  
10. Remove the cash, put it into your wallet  
11. Tap yes or no when it asks if you want a receipt  
12. Take the receipt if you asked for one  
13. Take your debit card from the ATM and put it back in your wallet  

That's quite a paradigm shift -- teaching someone things that you would normally take for granted. This is the same with a computer. It knows the information that you feed it and can access information from external sources, but only if you tell it how to do so. If we were to rewrite this list to teach a computer how to withdraw money from an ATM, we would basically start by teaching it the concept of currency.

Obtaining this mental model where we have to explicitly teach something in bite sized steps and make sure we don't miss any details -- especially ones we would take for granted -- is probably the most important thing you should learn when it comes to software development.

Once you can grasp that, you should choose a language and use it to learn the basics of programming:

Building a rock solid foundation

Syntax: the arrangement of words and phrases to create well-formed sentences in a language. Learn the JavaScript (or insert your starter language of choice here) syntax. It's important ot make sure the code you write will be understood by the interpreter. I heavily recommend Code School's JavaScript Road Trip lessons for everything up to and including Functions on this list.

Operations: Discover how operations are done in JavaScript. Start with simple things like addition and subtraction, then move up from there. Learn about how variables can store information, how to access them, and how to change their values.

Conditionals: Start creating conditional logic -- it's code that only fires when certain conditions are met.

Arrays and Objects: All of the programming languages I've interacted with have support for what's called an Array -- a set of items, in some determined order, that can be added to/removed from/shifted around. Objects are another form of data structure. They hold information in key-value pairs, allowing you to access that information in a simple way.

Looping: One of the first basic things you can learn to do with a data structure is to loop through it -- telling the computer to take an Array or Object, and systematically go through that data structure's entire contents one by one.

Functions: Figuring out how to chain what you've learned above to make the computer accomplish a goal, Functions are recipes for your computer to do something. Maybe it's something as simple as addition or subtraction, or a more complex operation like going off to the internet to grab some data and then doing something with that data you get back.

Instant Feedback: What good is JavaScript code if you can't execute it? At some point, it becomes a pain to create an HTML file, load some JavaScript, and make modifications in your text editor of choice (mine is Sublime Text), save it, and refresh your browser before you get to see the changes you make. Take some time to discover Chrome DevTools and how to use the Console within. It's going to be really helpful and will save you lots of time. Code School has a great course on Chrome DevTools that I highly recommend.

Network Requests: One of my most satisfying accomplishments early on was figuring out how to grab external data from another website or service. If you're working with the web, learn about the various ways you can make an external request for information. I like using the Fetch protocol, but traditionally there's also XMLHttpRequests.

After you have these fundamentals locked down, it's a good idea to start tackling algorithms questions. These are problems that you can solve with code, and they can have very large gaps in difficulty level. One of my favorite sites for tackling algorithms is Code Wars. I highly recommend you check it out.

One thing to know about Code Wars though: When you solve a problem, you get the chance to see how everyone else solved it. I would take hours solving problems only to find that someone else's solution were an elegant single line of code, chaining multiple functions that I had no idea existed in JavaScript. Don't let this bring you down!

It's actually great to be verbose and have precise, clear code where you explicitly declare what you're doing. While you should always think of ways to make your code more efficient, I would rather have a solution that looked something like this:

function calculateSumOfTheArray (array) {  
    // variable to store a count
    var count = 0;
    // loop through the array
    for (var i = 0; i < array.length; i++) {
      // for every item in the array, increase the count by it
      count += array[i];
    // return the total count
    return count;

As opposed to something like this:

function calculateSumOfTheArray (array) {  
   // return a built in array function from JavaScript that passes in a lot of requirements in one line and relies on implicit prior knowledge 
   return array.reduce(function (previous, current) {
     return previous + current;
   }, 0);

Both of these functions do the exact same thing, but one is much more explicit in exactly what it accomplishes while the other assumes you happen to know a lot of things beforehand. I prefer the first solution, because it results in cleaner and easier to read code -- this is not only for the benefit of yourself months down the line, but for other people who will read your code in the future.

Putting things together with HTML and CSS

After you have a lot of fun with algorithms, you should learn how to take that data and visualize it on a page. It's very satisfying to actually show the results of your work on a browser.

HTML, CSS: Now that you're able to grab data and do things with it, it's time to actually show it on the page. Take a dive into HTML to learn how website layouts are created. If you're inclinded to do so, CSS will teach you how to style those layouts.

DOM Manipulation: The DOM, or Document Object Model, is what we can use to access HTML on your page. Learn how to use the Document function available to you to programmatically display data from your application.

Other topics of interest

Git: Git is an extremely popular Version Control System used in development today. On an incredibly elementary level, you could describe Git as Dropbox for Programmers. Git tracks and saves your projects' files and progress on a hosted server, with GitHub being the most popular service that does this. It lets you go back in history to access your old versions, create parallel copies of your projects to make changes to without affecting a 'core' copy until it's ready, and much more. Code School has an incredible course on Git, and I highly recommend you check it out.

Deployment: Ah, who doesn't get excited about deploying their webapp for others to see? Deployment is a whole other beast to tackle once you start thinking about how you're going to scale your app, but for starters I highly recommend you look at Heroku. It's a quick and easy way to deploy your site using Git.

Studying With Others

An important part of my early education was being surrounded by like-minded individuals who were also motivated to learn how to code at the same time. We set up study sessions at local coffee shops and tackled assignments together. I found these sessions to be invaluable and really recommend that you try and find others to study with you, whether in-person or over Google Hangouts/Skype/etc.

About jQuery (and other libraries)

Throughout your learning, you might have come across a very well-known library named jQuery. It's a very popular JavaScript library that helps make some of the things you do with regular JavaScript easier to accomplish. While this can be a good thing, my big concern with relying on a library is that it encourages laziness and bloat.

There's a running joke on Stack Overflow that you can just about solve everything with jQuery. It's kind of like a kitchen sink for the web, but it comes with a cost: Performance, both for your webapp and your own long term growth.

An increasing reliance on any given library whose purpose is to abstract away the actual code you're writing is a double-edged sword. Maybe it makes you faster in the short-term, but what happens when you're asked to implement something that you're used to doing in a library with just vanilla JavaScript? For some people, that reliance on a library has resulted in the inability to actually implement that function without it.

Plus, what happens when that library becomes deprecated? If some new flavor of the week comes around and replaces it, you're going to have to rewrite large swaths of your codebase to accommodate those changes.

The other concern is web performance. While a single given library isn't a going to break the bank, a dependency on a multiple libraries for just small parts of its features can lead to excessive bloat over time. The tradeoff that you're making here is your speed in writing your code now versus your end users' page load time.

These are important tradeoffs to consider. I'm not saying that all libraries are bad or that jQuery is completely useless -- it's certainly popular for a good reason. However when you're just starting out on your journey to learn how to code, it's important to have a good grasp of the fundamentals, and that means knowing when to avoid the noise. It's simply not a distraction you need at this stage.

Next Steps

Having learned these things, you're ready to start learning on your own. There's a whole world of technologies to pick up that you might not be aware existed: Package managers like npm that help you grab the libraries you want to use in your projects, frameworks that let you create larger web applications with cleaner and more modularized code, and external databases to store your information. Once you start pairing with a friend to work on a project, you'll then realize just how much a team sport programming really is. At this point, you're discovering that what you've learned so far is just the tip of the iceberg.

I hope you're still interested after all this. If you find what you've accomplished so far to be rewarding, keep learning. When you decide to pick up that second or third language, remember the fundamentals that got you started and keep those lessons in your head. Dive into a language without being framework- or library-first. After all, you're not just an Angular developer or a Javascript engineer. You're a software engineer. You build products, the languages and frameworks you work in are simply tools that get the job done.

P.S, I'm super interested in hearing about your own growth. Send me a message at hello+fundamentals (at) richardkho (dot) com and tell me what you're doing to teach yourself to code. I read every email I get and try to respond to each of them.