How to get into coding

How do you go about getting into coding? What’s the best way to get started?

I am asked this question a lot since "code" seems to be a mysterious thing to a lot of people. More and more, code runs the world we live in, and so gaining some familiarity with it is a great idea. But staring at a wall of stuff you’ve never ventured to learn before can be intimidating.

So here’s a little primer from a guy who loves it.

What is code?

Code isn’t 1s and 0s. Code is language.

One of the most common misconceptions about coding is that in order to become a programmer, you have to be able to speak “computer”.

Computers, of course, actually do communicate with complex strings of 1s and 0s (called “binary”), which is pretty unintelligible unless you’re from the planet Bynar. In this way, our brains are very similar to computers, since our brains take a complex series of electrical impulses and turn them into meaningful instructions.

If I meet you on the street and wish to greet you, I won’t transmit a beam of electrical impulses directly from my brain to yours; I’ll wave and say, “Hello!” In turn, your brain receives my motions and words and somehow transforms them into the impulses that your brain can use to understand and formulate a reply — which comes back out again not in a reciprocal stream of electrical impulses, but in your own set of motions and words.

Code works in exactly the same way. Just like human languages allow us to communicate without having to hook right into the other person’s brain, coding gives us the ability to “speak” to a computer in an entirely human way.

It’s a polyglotic safari out there!

Learning a coding language is very similar to learning a spoken language. There is some basic vocabulary to memorize, a system of syntax to learn, and patterns of acceptable expression which allow you to say meaningful things without causing offense or confusion.

And just like in the world of human speech, there are more languages in existence than a person could possibly learn. But the more languages you learn, the more you will come to recognize patterns or meanings that different languages hold in common.

For instance, I can speak some Spanish but I know very little French. But since both French and Spanish derive from Latin, they have a lot of similarities. A friend and I decided to put this to the test: She spoke to me only in French, and I replied to her only in Spanish. The conversation was slow and a bit difficult at times, but because of shared roots and word forms, we were able to hold a 5 minute conversation and actually say real things to each other.

If you endeavour to learn a few coding languages, you will quickly notice the same thing. At a philosophical level, coding languages all attempt similar ends:

Create, update, read, find, list, store, loop, calculate, delete, say — just about every coding language will attempt to do these things, and more.

There are over 700 coding languages. Why so many?!

Some languages have a single word that takes several words to say in another language.

For example, the Scots use the word “tartle” to describe the panicky hesitation you might feel just before you have to introduce someone whose name you can’t quite remember.

Or in Swedish you could say “lagom” when you want to express that something is “not too much, and not too little, but juuuuust right.”

Coding languages evolve and grow for exactly this reason — because the people who use them want more meaningful or more powerful words to use as they work in the language.

The endless hunt for the Mythical White Stag of Efficiency

In the early days of the internet, convincing a website to send an email was complicated and required hundreds of lines of code. But then along came PHP’s magical mail() function, which collapsed the hundreds of lines of code into a single command. Over time, coding languages become smarter as more "power words" are added, allowing programmers to accomplish more with a lot less code. Now that’s lagom!

This sort of efficiency is the main reason why new coding languages are invented. A classic example of this is “Ruby on Rails”. Tired of endless workarounds, and wishing for more powerful ways to work, Heinemeier Hansson gathered the coding world’s best ways of doing things (back in 2003) and built them into “ Rails”, a made-for-the-web version of Ruby.

Or more recently, Apple released its own coding language, Swift, in order to streamline the creation of apps for iOS. I remember watching a sea of app developers weeping with joy as creator Chris Lattner revealed the language’s power-packed abilities to the masses.

Or if you want to go for a dizzying ride down a murky and meandering memory lane, look up the history of Javascript libraries. From MooTools, jQuery, CoffeeScript, React, and a million more, every few years there is a fresh attempt to revolutionize what Javascript can do.

With everything out there, where in the world do I start?

This all sounds very complicated. But if you’re looking to get your feet wet in web code, it is actually very straightforward.

The best way to start is to learn HTML, CSS, and Javascript — and in that order.

HTML

HTML is not a programming language; it is a markup language that defines the structure of your content. HTML doesn’t “do” anything, but instead “describes” everything.

Think of HTML as invisible rectangles that make up absolutely everything you see in your browser. These invisible rectangles are called “elements.”

Almost every element has an “opening tag” and a “closing tag”. For example, here is the tag used to set off some text as a paragraph:

<p>Puddleglum the Marshwiggle is my favourite Narnian.</p>

The <p> indicates to your browser that the paragraph is beginning, and the </p> indicates that the paragraph has ended.

It is important to close your tags properly, otherwise all the stuff that comes after will get trapped inside the unclosed element.

Bad:

<p>Puddleglum the Marshwiggle is my favourite Narnian. <h2>The Wild Lands of the North</h2> <p>Beyond the northern end of Naria, across the Schribble River, are the Moors where you will find the Giants.</p>

If you forget to close your first paragraph properly, web browsers will think the heading and following paragraph belong inside the first paragraph. Things get awfully confusing if you forget to close your tags.

Good:

<p>Puddleglum the Marshwiggle is my favourite Narnian.</p> <h2>The Wild Lands of the North</h2> <p>Beyond the northern end of Naria, across the Schribble River, are the Moors where you will find the Giants.</p>

Closed elements are happy elements.

The wonderful age of web standards

Thanks to the hard work of the W3 Consortium and their vital work of establishing web standards, learning HTML today is so very much easier than even a decade ago because there is a higher level of agreement between browsers than ever before.

There are many different HTML elements, each with its own special use. Learning the intended uses for each element will make your code better because browsers will understand what you’re doing, and so will search engines.

The full list is long, so it would be a good idea to spend some time on MDN or w3schools to read up on the various elements and their uses. But here are a few common ones (and some fun ones):

A few common elements

• <h1>: main title of a page
• <p>: paragraph
• <ul>: bullet-point list
• <ol>: number list
• <div>: a non-descriptive element used to group other elements together

Some new fancy elements

The advent of HTML5 brought along many new “semantic” elements — elements whose name tell you what they are meant to do.

• <header>: the top portion of a page or article where you should expect to find the title, author, date, etc.
• <main>: intuitively, the “main” part of a page’s contents.
• <footer>: the bottom portion of a page or article.
• <article>: a self-contained piece of content within a page (such as a blog post on a website).
• <details>: an amazingly handy element that replaces common Javascript-powered expanding buttons.
• <aside>: for side menus or info that belongs alongside the page’s main info.
• <nav>: a navigation menu that allows links to be laid out horizontally without requiring any special styling.

HTML5 came long in 2008 as the celebrated result of much research and collaboration, replacing earlier forms of HTML and XHTML. It is called a “living standard” because it is continually updated, and will likely be the internet standard until there is a much larger paradigmatic shift in the way the internet works.

Nerd note: “HTML5” doesn’t only refer to HTML; it refers to the interdependent relationship between HTML, CSS, and Javascript.

These and other new HTML elements were introduced as a response to the needs of the modern web. Just like PHP’s mail() function collapsed hundreds of lines of code Into a single command, these HTML5 elements assume certain characteristics that make front-end coding easier.

For instance, to produce a horizontal navigation menu before the <nav> element came along, developers had to use an unordered list <ul> and some fancy CSS to make its list items (<li>) lay out horizontally instead of vertically, which is <ul>’s default.

CSS

“Cascading Style Sheets” control the look, size, and position of HTML elements. You can target HTML elements in a number of ways:

By element name

article { ... some instructions here ... }

By class

If you put classes on your HTML elements, you can target them by their class names instead of their element names.

HTML

<article class = "blog-post"></article>

CSS

.blog-post { ... some instructions here ... }

By ID

Just like adding classes to HTML elements, you can add an ID. You can add as many classes as you like, but just keep in mind that IDs must be unique within a page to work properly.

HTML

<article id = "art" class = "blog-post fullwidth"></article>

CSS

#art { ... some instructions here ...}

By path

You can deliver really specific CSS instructions by targeting specific elements according to where they are located within your HTML document.

Say you have a list in your side menu and also a list in your article’s text.

HTML

<article> <ul> <li>A list item</li> <li>Another list item</li> </ul> </article> <aside> <ul> <li>A list item</li> <li>Another list item</li> </ul> </aside>

If you give commands using only ul, your CSS will be applied to the side menu as well as to the article’s list. But if you want to target only the list within your article, then you can isolate the article list by expressing its path: article ul li { ... some instructions here ... }

Now only the list items of the article’s list will be affected. The side menu’s list is found at aside ul li, and because the path doesn’t match, it won’t be affected.

Javascript

Javascript makes things happen. HTML provides the building blocks, CSS controls their appearance, and Javascript makes them do things. Just like with CSS, Javascript can target HTML elements by using their element names, classes, and IDs.

Example

Say you want to make a paragraph disappear if someone clicks on it. That would be annoying, probably, but here is how you could do it:

This example uses jQuery, a popular Javascript library that makes coding a bit cleaner. To use jQuery in a page, you first need to include it in your HTML code. And then, below it, you can create any number of scripts that make use of the library. Google keeps a handy list of jQuery source scripts.

// $ indicates this is a jQuery script // $(document).ready tells the browser to run this script after the page has finished loading // the "function" word basically means, "do something!" $(document).ready(function() { // target all <p> elements; .click tells the browser to do something to a <p> element when it is clicked $(“p”).click(function() { // "this" refers to the element that was clicked so that the action affects only this one and no other ones. // "hide" makes the clicked element disappear from view. $(this).hide(); // if you want confirmation, you could give yourself a message in the browser's console console.log("A paragraph was annoyingly hidden. Why do you keep doing that to your nice website visitors?"); }); });

Here’s the script working in an actual page:

Javascript can do all sorts of things, like making popup boxes open, causing elements to change colour when you scroll down a page, changing the size of elements, submitting form information without leaving a page (like adding something to your cart on Amazon), and a billion other things. Javascript is the chief way to make your website or web app interactive.

Resources for learning web code

• CSS-Tricks - Chris Coyier is one of the greats. His CSS tutorials are clear and immensely helpful.
• Mozilla Developer Network - MDN is an authoritative resource for web technologies. Make it your go-to place to polish up your web knowledge.
• W3Schools - a handy place for quick tutorial information.
• David Walsh Blog - David Walsh is a master of a thousand web skills, and currently works for Mozilla. I’ve learned a lot from him, especially in the area of Javascript.
• Stack Overflow - the BEST place to get help. If something weird is going on with your code and you just can’t figure it out, post it on Stack Overflow. The web community is amazingly generous, and someone might spot the problem in a matter of minutes. Stack Overflow saints have saved me more times than I can count.
• Treehouse - a great place to learn. They cover just about everything you could imagine in the web industry. With a combination of videos, quizzes, and code challenges, you can learn a lot in a small amount of time. I return to Treehouse every once in a while to sharpen my skills. It’s pretty affordable at $25 USD per month.

Code editors

To start playing around with code, you'll need a place to write it! Here are a few.

Note: A code editor is called an “IDE", or “Integrated Development Environment”. Sounds fancy, but that just means, “A program that understands the code you are writing and gives you helpful code hints, and colours the words you are typing so that you can more easily read through your code as you type it.”

In-the-browser editors

• CodePen.io - create HTML, CSS, and Javascript side by side so you can see how they affect each other, and get a live preview of the results.
• JSfiddle.net - very similar to CodePen

Desktop code editors

Once you are ready to start building things “for real”, you’ll need a proper editor. Here are some pretty standard ones:

• Visual Studio Code - free and powerful. Tons of plugins to super charge your code-writing process. This is my go-to editor.
• Sublime Text - similar to VS Code, a great and simple editor with lots of helpful plugins.
• Adobe Dreamweaver - If you subscribe to Adobe Creative Cloud, then you have access to Dreamweaver already. Dreamweaver automates a lot of coding, but that’s a bad idea if you’re trying to walk without crutches. I used to lean on Dreamweaver quite heavily. But any program that generates code for you ends up limiting your ability in the end, because you have to accept whatever code it generates on your behalf. And word to the wise: generated code is usually lousy.

Server-side: The Next Frontier

Once you feel fairly comfortable with HTML, CSS, and Javascript, the next step is to dig into “server-side” languages. Generally, the most popular server languages on the web are PHP, Python, and Ruby on Rails. React (a Javascript library) has become quite popular as well. I recommend PHP because it is very well documented (so it is easy to find help when you need it), very straightforward to learn, and cheap to get started.

Pretty much any server in the world will be able to run PHP, so it’s easy to find a place to begin. You could take out some cheap web hosting at places like BlueHost, HostGator, or HostPapa, or even install a server on your own computer if you don’t want to pay for hosting right off the bat. ( Windows, Mac)

Armed with a basic web server and your knowledge of front-end code, you’ll be ready to start building some powerful web apps and websites.

One last word: Don’t give up. You’ll want to. But don't.

Coding is a lot of fun because it allows you to be creative in ways you never imagined. Coding gives you the power to capture thought and to make it go on thinking even when your job is done. It’s the power to create something that didn’t exist before — to experience a bit of “ creation ex nihilo”, to start with “nothing” and make something out of it.

Coding is also very frustrating. Even for experts, coding is a process of problem solving. As the old axiom says:

The experience of coding can be summed up in these two statements:

1. That didn’t work, as expected.

("I didn't think that would work, and I was right...")

2. That didn’t work as expected.

("What the...? I didn't think that would happen!")

It’s a process of trial and error:

1. Write some code, see what happens.
2. Get an error message, try to resolve it.
3. Didn’t resolve? Tweak the code. (Repeat)
4. Something new happened? Tweak the code again to see if you can figure out why. (Repeat)
5. It worked! Great! Now start onto the next step… (Return to step 1)

And on and on and on…

Jump in, and keep trying.

With some patience, self-discipline, courage, willingness to fail, curiosity, and a teachable spirit, you will do well in the world of coding.

You don’t need to be good at math. It doesn’t matter if you are young or old. All it takes is the willingness to keep trying.

I guarantee you, if you spend a bit of time each day, you will start seeing real progress very quickly. In a matter of days or weeks, you’ll feel amazed at all that you’ve been able to learn.

If you give it a try, I’d love to hear about it. Go create!