Freelancer Roadmap: Where to start for aspiring coders

Several years ago when I first started to consider the freelancing path, I started looking into what technologies I should learn. It was a maze of acronyms, languages, and software, and it wasn't easy to know where to start, and what I should spend my time learning. Should I start with Wordpress, or master HTML & CSS first? What about Bootstrap? How much Javascript should I learn?

Now coming into 2017, figuring out what to learn and how to prioritize them is harder than ever for aspiring coders. This post will attempt to demystify not only WHAT all these things are, but when should you learn them.

While anyone in the tech industry should always continue learning... here is my highly opinionated, completely unscientific guide (based on what worked for me) on where to start, and what path to follow. I think this may apply well for those aspiring web developers who would like to get hired somewhere as well, but this is mainly directed at aspiring freelance web developers, which admittedly is a slightly different animal than the typical employee developer.

This post is intended for those brand new to embarking on the web development self-learning adventure, but it may also be useful for those well on your way into web development to help you on deciding your next step. Discussion is encouraged! As I said this post is highly opinionated, and its not the only path by any stretch.

So that disclaimer out of the way here we go...

1. The Basics: HTML & CSS

While its true tools like Adobe Muse, and even Wordpress (using pre-built themes and plugins) can eliminate the need for coding skills in creating a basic website, in the professional web development world, coding isn't going anywhere. Muse and Wordpress themes have their place, but as a professional developer you're going to need to have a deep understanding of how those tools work to produce a website.

HTML & CSS is the foundation of how the web works, so this is the place to start. In simple terms HTML is a formatting language, which defines the structure of a website. It defines what is a title, what is a paragraph of text, and what bits make up your navigation window. CSS is a styling language, which controls the colour of elements, the width and heigh, the size of text, and where everything appears on the page. HTML & CSS is all you really need to make a basic, good looking static website.

Make sure you also learn how CSS Media Queries work. You can use Media Queries to sense the size of the browser window, and apply different styling depending on the size of the window. This is essential in building responsive websites that work well on mobile and desktop.

Learn HTML & CSS enough to know how to code up a webpage with HTML, and control the layout and styling of its elements with CSS. At this point start building your portfolio! Find any reason at all to build a website, even if it just stays on your machine locally, it will be something you can show prospective clients when you start to chase real work.

2. Twitter Bootstrap

After you can comfortably build a static webpage using HTML & CSS, its time to start exploring front-end libraries. Libraries can help you be productive much more quickly, and help you lay out pages and add a base level of styling much faster than creating it all from scratch every time. Using a popular library also helps standardize your code, so other developers can look at it and immediately understand your code. There are a growing number of libraries out there, but Bootstrap is by far the most popular, which is why I recommend learning that first.

This is something I wish I learned a little earlier. Bootstrap is a CSS library that makes it easy to make professional looking, responsive websites quickly. While its not absolutely essential to learn it -- I didn't learn it until well into my freelance adventure -- it makes your life so much easier. It is also extremely popular throughout the industry, so knowing it will serve you well if/when you ever find the need to work on team projects or touch another developer's front-end code.

Bootstrap also offers a slew of ready-to-use components to help you build out functionality very quickly: Slideshows, navigation bars, tab bars, modal windows, and tons of other really nice looking bits and bobs.

In my opinion once you can build a website with HTML, CSS and Bootstrap, you're ready to start taking on simple client websites, and continue to flesh out your portfolio.

3. Javascript & jQuery

Next up after you've got a working knowledge of HTML, CSS & Bootstrap, I would start learning basic Javascript, and then dive right into jQuery. Javascript gives you the capability to add user interactivity to the website, things like slideshows, accordion containers, slide-out menus, etc. Javascript will also be your first exposure to a conventional "programming language". You'll learn how to store information in variables, perform calculations, and loop through blocks of code. These fundamental programming skills are extremely important to understand well, and are highly transferable skills across a wide variety of other programming languages you will eventually learn.

jQuery is a Javascript library that makes it very easy to work with Javascript. You may hear that jQuery is dead, and you should instead learn a front end Framework like React or AngularJS, but on the contrary, jQuery is alive and well, and is still incredibly useful for writing your own basic custom interactions for websites. For basic websites, React is huge overkill, and can wait until much later.

Once you're comfortable with creating some interactions using Javascript & jQuery, you can move on, but Javascript is a very deep pool, so never stop learning.

4. Content Management Systems

At some point clients are going to start asking for the ability to edit their content, or they're going to need a feature that isn't going to be practical with just writing hand-coded static websites, like a blog, or an events calendar. For this you'll need a CMS, or Content Management System. Wordpress is by far the most popular, and many developers do very well going the Wordpress route. With Wordpress however there are good ways to build a site, and bad ways, and it can be very difficult for new Freelancers to navigate the pitfalls in Wordpress and learn how to build secure, robust, and fast performing websites.

An alternative to Wordpress, which I highly recommend - is Perch CMS. Perch is very easy to learn, and in its simplest form is not all that different from building a static website and then attaching an editing interface to it. But it is also extremely powerful and you can use it to do build some pretty complex things. I've even used it to build an online store with hundreds of products. The only downside is its not free -- it costs around $100 per website for a license, but that includes unlimited support, so I think its a pretty fair price.

At this point many freelancers can find steady enough work with just this existing skill-set, and happily churn out websites for clients using mostly pre-built plugins and customizing themes. But in my experience, the real money is in taking it a step further, into back-end work.

5. Back-End Programming

Server-Side Programming

You may have heard of programming languages like PHP, Ruby, Python or NodeJS. These are all server-side, or what's commonly known as "back-end" programming languages (ok Node isn't technically a programming language on its own). Rather than run in the user's browser like Javascript does, it runs on the server, usually coupled with a database in order to store data. This is what CMS's use behind the scenes, and how online stores process payments, and keep track of products and orders.

And if you want to start developing your own plugins for Wordpress, you'll need to know a little back-end programming as well.

The current darling of the server-side world is NodeJS, but I would actually recommend starting with PHP. PHP is easy to get started, has been around forever and is by far the most popular server-side programming language. If you're going to be a freelancer you'll get the most utility out of PHP, and if you're eventually shooting for that dream developer job, PHP developers are highly employable. Go with PHP.

Databases

Server-side programming becomes FAR more useful when you know how to work with a database. For this, start with MySQL. Like PHP its a tried and true relational database system.

To learn MySQL you're going to want to learn how to write "SQL", which stands for "Structured Query Language", and is the language you use to create, read, update, and delete data in the database. It sounds intimidating, but you can learn the basics in a couple days.

After you're comfortable with interacting with databases using SQL, its a good idea to learn the good design patterns of relational databases. In particular, learn at least the first 3 "Normal Forms", which are the guidelines that measure whether how robust your database design is.

Back-End Frameworks

At some point you're going to want to start using a back end, MVC framework. An MVC framework to server-side programming is kind of like Bootstrap is to HTML & CSS. It's not a new language to learn but a tool will help you standardize your code, encourage good design patters, and build things faster by providing you with a toolbox to take care of the common problems.

If you went with PHP as your backend language of choice, I'd recommend either Laravel or CodeIgniter, although there are dozens of MVC frameworks out there:

• Laravel: The popular choice but it is extremely opinionated, so it can take a lot of work to learn well.
• CodeIgniter: A lightweight framework that's easy to learn and represents the MVC pattern well, and great for small-ish projects.

Optimizing your Workflow

Modern web development is littered with dozens of tools, and technologies that both makes the process of web development difficult, but also improves the end product and helps you work faster. You're going to eventually want to learn or at least look into the following (which are just a few that I find useful):

• Git. A version control system to help you track changes to your app, deploy code easily, and help teams work on the same codebase without stepping on each other's toes.
• Gulp. A task runner. This helps gather your code together, minify it (so it runs faster), and perform lots of other mundane tasks automatically so you don't have to do all that stuff manually.
• LESS/SASS. Helps you write CSS easier and faster.
• Composer/NPM. These are package managers which help you manage and stay up to date with dependencies like libraries and frameworks that your project needs to run.

I think that covers a good amount of the base stuff. There are of course loads more things to learn and explore, but if you follow this basic guideline, by the time you get to end you'll be well qualified to decide where to take your skills next. Feel free to comment if you think I missed something. Always keep learning!