You’re interested in ‘programming’ or ‘coding’, and don’t quite know where to start? That’s understandable. The topic of software development is epic and daunting, but at the same time it’s a beautiful & worthy endeavor. If you’re just starting out, you have a wonderfully rich opportunity ahead of you.

How to start

As for me, I started programming when I was a teen, tapping
BASIC
programs into my Texas Instruments TI-99/4A, connected to my TV. I didn’t have the optional tape recorder for memory, so I got pretty fast at typing. I had to shut it down when it was dinner time, so necessity dictated some typing skill.

First of all, let’s think about what this is. If you’re a university student going through a course of study with the aim of a career in software engineering, you’re going to have a different path from someone who is self-taught. Some of the most famous and influential software developers are self-taught, and thinking back, there used to be no formal course of study for software engineering anyway. Both paths are valid, and those taking either can learn something from the other.

The following admittedly-opinionated path, is one relatively inexpensive way you could learn to code. It starts simple and gets more complex, adding layers or more difficult-to-grok tasks, as it proceeds. It does not include all “how to” information on purpose; you can get that in many places elsewhere.

Expect it to take a while. You can come back periodically to read and reflect. As you proceed, think on the difference between what might be called “component assembly”, and formal software engineering where you’re writing and compiling binaries.

Preparation

I see a lot of people posting in support forums, strugging to make Windows “speak Linux”. It just doesn’t work very well.

I see a lot of people posting in support forums, strugging to make Windows “speak Linux”. It just doesn’t work very well.

What do you need to get started? I would recommend a Mac or Linux system. Windows is possible and even needed if you’re developing specifically for Windows, but for standards-based websites and opensource code, a lot of devs use Mac or Linux. If you use Windows in that case, it will be harder to get help in my opinion.

You might also look into “cloud
IDE
” services, like Codio, Nitrous, Codebox, Koding, Codiad, or Cloud9. These provide an integrated development environment in a web browser, so that you can get started quickly, without worrying about what’s on your machine. Some of these services offer free options.

You’ll observe that editor comparisons are like religious wars!

You’ll observe that editor comparisons are like religious wars!

If you don’t want to use a Cloud
IDE
, then at least get yourself a decent programmer’s editor to use on your system, like Github’s Atom or Sublime Text, or, for the hardcore, vi, vim, or emacs. Don’t just use TextEdit on Mac or —gasp— Notepad on Windows.

Besides the basics of how to use whatever text editor you choose, there are a few common things to start learning about:

Logo: Editor ConfigLogo: Editor Config

Use Editor Config for editor setting consistency. Not all editors support it, but it’s really useful, so you should use one that does.

By the way, there are indeed IDEs to use locally such as Eclipse, Xcode, Emacs, NetBeans. An IDE is not just the the source code editor, rather it’s a complete development environment including build automation, linting, debugging, compiling and other features.

One Mac and iOS app that’s really slick is Kapeli Dash. It’s a real god-send for programmers, and makes documentation for just about everything software development-related available offline, as well as lets you store code snippets. You can get it for iOS, if you don’t use a Mac.

By the way, can you touch type? Now’s a good time to start learning. Computer programming requires a lot of typing, and it’s a huge pain if you cannot type. Take a month and learn how. It will really serve you well, whatever career path you take.

Simple Starter Steps

So, shall we get on with the steps already? This is not a step-by-step tutorial, but rather more of a set of “macro” steps. You’ll need to search and find resources using Google, which you should take the time to get good at and then even better at. If you stick to the spirit of each major step, you’ll get a pretty good foundation.

1. Build a Simple, Static Website

Logo: HTML5, CSS3, JSLogo: HTML5, CSS3, JS

Learn HTML5, CSS3 and basic javascript, and create a completely static and simple website. Of those three technologies, only
javascript
is an actual programming language.
HTML
is a markup language for specifying the structure of websites and pages, and
CSS
is another markup language for specifying the style of how something looks in the web browser.

There’s tons of info about
HTML
on the Internet, but I think you should focus on
HTML5
. The HTML5
boilerplate is a good starting point. Here is a good basic tutorial for a manual site.

When you build the page, don’t copy paste the lines. Type in every line of code yourself (there’s that touch typing again).

You might find hosting services that are cheap and offering “unlimited” space. There’s no such thing, in reality. An Amazon AWS S3 “bucket” is a good inexpensive (albeit a bit technical) possibility for hosting a static site, as well.

You might find hosting services that are cheap and offering “unlimited” space. There’s no such thing, in reality. An Amazon AWS S3 “bucket” is a good inexpensive (albeit a bit technical) possibility for hosting a static site, as well.

You can test a static page like this simply by opening the index.html in a browser. Just double click it. If you want to host the site for real, you’ll need web space. A good option is Webfaction, which allows you both shell and
FTP
access. At first, the easiest thing is to use Webfaction’s dashboard to create a container for your site, setting it up per their documentation, and upload your files to your site’s folder.

Speaking of
FTP
, you can
FTP
from the terminal, but, most people use a
GUI
client like Filezilla, Panic Transmit or Cyberduck. You enter your credentials in their interfaces, and use them to upload and set permissions for folders and files. You can also use rsync from your Terminal, which ends up being a lot quicker.

For experienced programmers, “hello world” examples are old hat. It’s a tradition to have one, as the initial example for any language or system. Even if it’s simple, you should go ahead and do it anyway.

For experienced programmers, “hello world” examples are old hat. It’s a tradition to have one, as the initial example for any language or system. Even if it’s simple, you should go ahead and do it anyway.

Learn about
javascript
basics, using Mozilla’s “Hello World” example, and try the examples out on your test page or on a new page, like index2.html which you can store in the same folder as your other files.

Forget about CMS content management systems such as Wordpress or Drupal.

Ignore the details of browser compatibility.

Don’t worry about “server-side” processing, as with
PHP
or
ASPX
.

Forget about anything like ember, react or angular which are for building large web apps, not small, static sites.

2. Learn “Source Control”

Screenshot: SmartGit Log ViewScreenshot: SmartGit Log View

Although there are a large number of source code version control systems, learn how to use the popular git at your command line, and get a free Github account to use. Start with Github’s Hello World tutorial to understand the basic flow, and then go through the Pro Git online book. Besides repositories, Github lets you store what they call “Gists”, which are named collections of files or snippets. Browsers and editors often have plugins to help you work with Gists. When troubleshooting, and asking help in a forum, you can put a log or config file in a gist, and paste its URL.

A good exercise is to redo your simple website from above, going through the steps again, but this time, checking every change into your repository, and pushing up to Github.

Take the time to learn how to comment your code in your
HTML
,
CSS
and
javascript
files. The syntax for comments is different in each. Also, learn how to write a good git commit message, and keep in mind Thom Parkin’s “Gititudes”. Software development is often collaborative, so be kind to your colleagues and to your future self.

Note, you’ll discover that there are several
GUI
clients for git, namely Github Desktop (free), Syntevo SmartGit (commercial), and Atlassian SourceTree (free). You’ll also discover Bitbucket, a Github alternative which I like because you can create private repositories for free (as of Feb 2016).

For now:

Mercurial “Hg” is a well-respected and polished version control system that is used by many companies.

Mercurial “Hg” is a well-respected and polished version control system that is used by many companies.

Don’t bother with other source control systems like
CVS
, Subversion, Bazaar or Mercurial (although they might be used as a standard at some companies).

Don’t skip this step. Bear down and learn the basics of git now.

Lean toward using git on the command line, before you get used to a
GUI
client.

Don’t worry about learning everything about git because, it’s a huge subject in and of itself. Just learn the basics, such as how to initialize a folder for use in git, how to add files and commit them to the repository, and how to push to a remote at Github.

3. Incorporate a CSS library

Logo: BasscssLogo: Basscss

Next, you could try incorporating a
CSS
library. Basscss is one with great fundamentals that let you set a consistent style for your site, and will work well with any site. One way to use it, is to declare it in your <head> like so:

N.b.: that’s how you do it with basscss version 8 as of 15th Feb 2016, but please confirm in the docs.

There are some really comprehensive frameworks out there, as well, such as Foundation or Bootstrap. I would question whether you need such things, and try to figure things out on your own.

There are some really comprehensive frameworks out there, as well, such as Foundation or Bootstrap. I would question whether you need such things, and try to figure things out on your own.

You then use it by assigning its classes to your html, something like this:

<div class="bg-teal p1"></div>

That would make the div’s background teal, and put padding on it.

While you’re coding css, one of the most frustrating things is not being able to visualize how things are fitting together and impacting one another on your pages. Here’s just the medicine for that ill: check out Pesticide from Adam Morse.

Start with just declaring the basscss
CSS
from <head> even though there are other methods to use it.

4. Use a Static Site Generator

Logo: Hugo SSGLogo: Hugo SSG

A “Static Site Generator” or “
SSG
” means to make it easy to use
HTML
“templates” to merge your
CSS
,
javascript
, images and content into a publishable website. You run a command, the
SSG
does its merging magic, and voilà! you have a folder which you can upload to your website folder. Once you have built a number of pages manually, you’ll appreciate what an
SSG
brings, because it really makes short work of merging changes to a bunch of, say, blog posts.

Hugo is quite probably the fastest
SSG
on the planet. Reading the website, we learn that:

Github has an SSG called “Jekyll”, which is built on the Ruby language. I moved away from a Ruby-based SSG to Hugo, due to its simplicity.

Github has an SSG called “Jekyll”, which is built on the Ruby language. I moved away from a Ruby-based SSG to Hugo, due to its simplicity.

Hugo is written for speed and performance. Great care has been taken to ensure that Hugo build time is as short as possible. We’re talking milliseconds to build your entire site for most setups.

In fact, it takes far longer to upload the site to your web space, than it does for Hugo to generate it.

Hugo is downloadable as a single binary file, written in the Go language, which means it will run on just about any platform, just by running the binary. There are no complex installations and dependencies to deal with, unlike some other systems. That means, things are much easier when you upgrade your system OS. The content is easy too: it’s written in the rather ubiquitous Markdown format.

Flow: Hugo mergingFlow: Hugo merging

Next, a good exercise would be to “templatize” and expand your site and use Hugo to prep it for publishing. You could start with a simple “theme” for starters, and then adapt that to the design you’ve been working on. For example, in a Hugo template, you use Golang template codes to pull in aspects of your pages. You would write your content files with a
YAML
“frontmatter” header, within which you put “metadata” about the page, such as the date published or the title.

The
YAML
frontmatter, placed at the top of your Markdown content files, looks something like this:

As you work through this process, you may have a chance to participate in open source projects. Remember: courtesy, “don’t be a jerk” and, “don’t worry about jerks” either. People are participating for free, so do what you can do, to help and be patient. Check your privilege at the door.

As you work through this process, you may have a chance to participate in open source projects. Remember: courtesy, “don’t be a jerk” and, “don’t worry about jerks” either. People are participating for free, so do what you can do, to help and be patient. Check your privilege at the door.

Then, your templates reference your pages’ frontmatter sections via codes like {{ .Title }} or {{ .Date }}. Hugo replaces these with the actual values, upon site generation. This is what my “single” template for this very site looks like. I’m using basscss classes here.

As before, the Hugo project folder becomes your git project folder, and you should make the effort to get used to doing the git commands as you proceed. It’s quite good to be able to go back and look at every change you made, and see what changes or fixes were made.

For now:

On your first pass through building a site in Hugo, don’t try to use every single feature. Sometimes, just because you can pull a value from the config, a page, or a data file, does not mean you really need to.

5. Learn a ‘build system’

Logo: Node.jsLogo: Node.js

If you’ve taken the time to do all the above macro steps, it might be a good time to learn how to use a “build system”. There are truly an eye-watering number of options to select from, but one modern scenario is one based on Node.js, where you would:

Install Node.js as the modern base framework.

Use npm to install node apps postcss and its plugins cssnext and autoprefixer etc.

Use gulp to tie it all together, building compressed bundles of
CSS
and
js
to use in your site’s <head>.

Logo: Jayden Seric's BarebonesLogo: Jayden Seric's Barebones

Basically you would run a gulp process that watches specific folders, and takes the
CSS
and
javascript
in those, concatenates separate files into fewer, compresses, adds browser prefixes and even lets you use
CSS4
and so on. One solid base framework for this sort of setup is Jayden Seric’s “Barebones”.

I started by kicking the tires of Barebones, weaved in some basscss, and did a little tweaking in my gulpfile.js to let me use the whole thing with Hugo. With this setup, to develop a site I:

Edit the html of the indexes, and the component
CSS
and
javascript
, after which gulp does its magic and compiles them to the bundle files.

Get the test pages basically looking right in the npm web server.

Rinse and repeat.

Flow: Gulp and Hugo work togetherFlow: Gulp and Hugo work together

Once the test pages are looking good with the structure and style I want, I convert to Hugo templates. Hugo templates reference the gulpfile-generated bundle files, which are recompiled every change I make to the components. The Hugo web server is then showing me what the final site will look like. When I’m ready to publish, I use the hugo command to merge everything together, and make a published site folder for uploading.

Gulp.js is a well-developed and high performance system, that lets you “stream” your
CSS
and
js
files from one command to the next. The following code is part of my gulpfile.js. You can see the gulp task “css” is pulling in all the css files, making source maps for better debugging, concatenating them into one file, running it through postcss to inline modules, autoprefix, convert
CSS4
code, compress, and copy to the /bundle folders.

Look at the diagram I made (click to embiggen) and see what’s connected to what.

6. Learn to code and compile

Logo: Golang GopherLogo: Golang Gopher

There are many ways you could move from here, but I think you couldn’t go wrong learning the compiled open source programming language “Go”, backed by Google. Two of the luminaries who designed C in the first place - Ken Thompson and Rob Pike - working with Robert Griesemer, designed and released Golang in 2009 to be great at the type of problems Google faces. If you’re interested in the cloud, Go is a modern language that works great for today’s environments.

Next you might find a couple of apps on Github, to fork and compile yourself. For example, a simple application to generate passwords on the command line, or, participate in the Hugo project!

For now:

There are other compiled languages but, why go backward in time when you can start with something modern and well-supported like Go.

How to Continue

So, as this post is long, so the activities proposed require significant effort to get through. Once you get to a pretty good level, then, what should you do next?

A few ideas:

Find Good Projects

You should find good projects to work on. Use Github advanced search to find popular open source projects with a lot of stars, or a lot of active participation. Participate, learn newly, apply what you already know. Popular projects are welcoming, have strong guidelines and codes of conduct, and have good support.

In open source projects, most everyone is working for free, but, if you play your cards right and do what you can to participate in a positive way, you have a great chance of getting your questions answered. Just give back however you can.

Learn Software Dev

There’s more to software development than assembly of pre-existing parts. One important step in a career in software is to learn about professional software development itself: it’s history, fundamentals, techniques, mechanics, back story. You’ve learned a bit of this already, if you’ve worked through the above steps.

You should learn programming fundamentals (not just buzzwords). This includes design patterns, architectural patterns, data structures, algorithms, optimization and some mathematics. You should also learn software development itself, including iterative development, version control, build automation, unit testing, system testing, end-to-end testing.

You should learn how developers work together in teams, by studying team development techniques and ways of thinking like Agile, Scrum, XP, Pair-programming. Read about “waterfall” to get insight into why those came about.

There are good, distilled “best practice” lists and general axioms, to help you create good software, such as:

Take Care of your Career

In the end, if you’re going to have a career in software development, you need to be in control and know how to navigate it. To me, that means:

Meet people and get connections. It’s not always about about know-how, but rather about “know-who”.

If you’re working for yourself, learn how to write out a simple contract to get signed. Don’t be weak in this area.

Learn to deal with politics. It’s part of life and any organization.

Keep a journal and keep your goals clear.

If you really know how to do something or fix something, and it’s not something with a big risk to the organization, just do it. If you’re always asking permission, many times you won’t get it, and if you proceed anyway, that brand is worse than if you had just done it without permission. Just don’t be stupid.

You won’t have power or credibility, usually until you’re in your 30s. Learn what that means and how to work around it.

Your seniors in the organization might not actually be stupid. Give respect, and earn respect yourself.

Don’t kill yourself for the job. Exercise and take care of your body daily. Do the long hours only sometimes.

“See, Do, Teach” is a good thing to remember. The teaching will help your understanding of a thing.

If you fail, so be it. Don’t apologize for trying hard.

In Summary

Well, if you made it this far, congrats! That was pretty long, but I think it contains some useful information that I wish I had had when I was just starting out. It’s a fantastic time to be learning! Please share this, and let’s discuss in the comments.

Updates

The banner photo is a cropped version of “Woman posed with Hollerith Pantograph” from the US Census Bureau, c. 1940. Original is here on the Wikimedia commons. What a cool old piece of history!

About the Author

I'm Rick Cogley, and thanks for reading. I'm an experienced technologist, co-founder & -owner of eSolia Inc. I'm from America originally, but have been helping people and companies succeed in Japan since 1987. I'm an avid jogger, lover of music and puzzles, and family man with a wonderful wife and daughters. Please do me a favor and share and link to this post, comment on it, and maybe connect with me on other social sharing sites as well. Cheers!