How to Become a Web Developer | The Remote Lifestyle | Background ImageWhy You Should Learn to Code

Learning to code changed my life. There, I said it.

I didn’t know it at the time, but learning how to code was the reason I was able to eventually become a digital nomad.

Becoming a web developer has not only increased my earnings potential, but has also given me the skills to work remotely.

If you’re not convinced yet, read my article 6 Reasons You Should Learn to Code.

Otherwise, in this post, I’ll show you:

  1. The steps you need to take to learn how to code
  2. What programming languages are out there
  3. How to determine the path that is right for you.

 

TLDR; Watch the Video Here

 

The Types of Developers Out There

To start things off, we need to clear up any confusions and misconceptions. First, we’ll answer the question: what types of developers are there?

There are some amazing articles on this topic online, so I’ll share my favorites. Start with this one:

At this point, you should have a pretty good idea of the types of developers that exist in the tech world. When we refer to “web development”, we are referring to programming websites or web apps. When we refer to“mobile development”,  we are talking about programming mobile applications. 

Frontend verus Backend Development | How to Become a Web Developer and Learn Web Development

For this article, we’re going to be focusing on web developers. There are two primary types of web developers, known as frontend and backend. Here are two articles from Team Treehouse and Bloc.io outlining each of their roles:

Now that you understand the terminology, let’s get right into learning web development and focusing on frontend or backend development.

Bonus: Download my step-by-step guide on how to learn to code and become a web developer - even if you have no experience and suck at using computers. It contains a complete list of resources and exclusive information not found anywhere else on the blog.

 

Starting Point: Learn HTML & CSS First

Regardless of whether you are a frontend or backend developer, you start out learning HTML and CSS.

Why? These two languages are the essential building blocks of all websites.

HTML (Hypertext Markup Language) defines the structure of a website, which includes the text, images, links and etc.

CSS (Cascading Style Sheets) is responsible for making websites look the way they are by controlling styles, which include color, layout and more.

HTML CSS Graphic | How to Become a Web Developer and Learn Web Development

Source: http://www.sololearn.com/Uploads/html-css.jpg

It is important to learn the fundamental languages that make up a website because the final product of web development project is always going to be a website.

 

HTML & CSS Are Not Programming Languages.

HTML is a markup language whereas CSS is a styling language. You can think of HTML & CSS as a word document for the web. They are languages used for designing the content and layout of your website.

 

Resources for Learning HTML & CSS

Below are the resources I used to learn HTML & CSS in the Summer of 2012. You should be able to learn everything you need to know by using the resources below.

As you start out, these two online courses will give you a solid foundation.

 

Once you’ve taken these courses, I recommend taking Tuts+’s 30 Days to Learn HTML & CSS (free). In contrast to most online courses, this course focuses on practical aspects of web development. It will introduce you to:

  • Installing a text editor and learning how to configure your local development environment
  • Coding within your own text editor (which is the common practice)
  • Taking a Photoshop image and converting that into a website

 

If you ever have any questions or need more clarification on a topic, Shay Howe’s Learn to Code HTML & CSS is the best-written resource there is. I used this extensively when I was starting out. I can’t thank Shay enough for putting the time and effort in building and maintaining the resource.

Bonus: Download my step-by-step guide on how to learn to code and become a web developer - even if you have no experience and suck at using computers. It contains a complete list of resources and exclusive information not found anywhere else on the blog.

 

Keep Google Close Whenever You Have Questions

Of course, you may have questions and the best way to look for answers is to Google them! Remember that Google is your best friend, even if you’re a seasoned developer.

Google Best Friend | How to Become a Web Devleoper and Learn Web Development

Source: http://wanillawan.files.wordpress.com/2013/11/keep-calm-and-google-it-2.png

 

The Next Step: JavaScript

Javascript is the next step for web developers and is responsible for the behavioral or interactive elements of a website. 

See an alert popup on a website? Javascript. See form field indicate an error? JavaScript.

Along with HTML & CSS, JavaScript makes up coding languages that form the backbone of all websites.

These are the three programming languages that run on web browsers.

HTML, CSS & Javascript | How to Become a Web Developer and Learn Web Development

Source: http://blog.teamtreehouse.com/wp-content/uploads/2014/11/progressive-enhancement.png

JavaScript is also the first full programming language that many people learn. It’s becoming increasingly popular and powerful.

 

Introducing jQuery: A JavaScript Library

Before we get into JavaScript resources, I wanted to introduce you to jQuery. Here’s a formal definition as provided by Techopedia:

jQuery is a concise and fast JavaScript library that can be used to simplify event handling, HTML document traversing, Ajax interactions and animation for speedy website development. jQuery simplifies the HTML’s client-side scripting, thus simplifying Web 2.0 applications development.

jQuery Logo | How to Become a Web Developer and Learn Web Development

Source: http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png

In short, it’s a JavaScript library. This means that it contains a series of commands that allow you to use pre-written JavaScript code. This allows you to do pretty powerful things without needing to write all the JavaScript code yourself. 

The resources I provide will give you (1) a basic foundation of JavaScript and (2) teach you how to use jQuery and integrate it into your websites. So let’s go!

 

Resources for Learning Javascript

Similar to above, I’m going to recommend you look at Team Treehouse and Code School first.

  • Code School’s JavaScript Path
    • “JavaScript Road Trip Part 1” (recommended)
    • “Try jQuery” (recommended)
    • “JavaScript Road Trip Part 2” (optional – dives deeper into topic)
    • “jQuery: The Return Flight” (optional – dives deeper into topic)

Another solid alternative is Tuts+’s 30 Days to Learn jQuery. This follows a similar structure to the 30 Days to Learn HTML & CSS course.   

Bonus: Download my step-by-step guide on how to learn to code and become a web developer - even if you have no experience and suck at using computers. It contains a complete list of resources and exclusive information not found anywhere else on the blog.

 

You Now Have the Skills of an Entry-Level Frontend Developer

At this point, you’ve learned the basics. If you want to pursue Frontend Development, you already have the skills to work as an entry-level frontend developer. Congratulations!

Frontend Web Developer | How to Become a Web Developer and Learn Web Development

Source: http://edu.cbsystematics.com/Images/SpecImages/f0e457b7-58d2-43c0-98ed-89238a33e1c1.jpg

If you want to dive deeper into frontend development, the next steps would be to learn more advanced JavaScript. This includes learning JavaScript frameworks such as AngularJS, Backbone.js, Ember, React, or Node.js. We’ll talk about frameworks a bit later.

If you’re serious about pursuing frontend development, you should consider applying for a junior or entry-level position at a company. The best way to learn is by working. Finding a company where you can learn best practices and learn from other professionals is the best starting point for new web developers.

 

Moving into the Backend

You have a strong grasp of HTML, CSS, and JavaScript. Now you’re ready to jump into backend development. To recap, the backend consists of three parts: a server, an application, and a database.

If you’re still not sure what frontend and backend are, I encourage you to revisit the articles I have linked to above.

 

There Are Many Programming Languages When It Comes to Backend Development

Backend technologies usually consist of languages like PHP, Ruby, Python, Java or C++. Choosing a programming language may seem very overwhelming at first. But as long as you choose a language that is commonly used, then you’ll be fine. Here are some examples:

Popular Progrmaming Languages 2014 | How to Become a Web Developer and Learn Web Development

Source: http://thumbnails-visually.netdna-ssl.com/most-popular-programming-languages-of-2014_52efd3a81d277_w1500.jpg

 

Modern Programming Languages Aren’t All That Different

As you start out, your goal is to learn the basics, and the basics are similar across almost all modern programming languages.

The concepts of variables, loops, arrays, function are the same across all programming languages. So by learning JavaScript earlier, you already understand some of the fundamental concepts of programming languages. This will help you pick up other languages.

The differences you find are going to be in each language’s syntax. Take spoken languages, for example. English and Spanish are similar languages. The concepts of nouns, verbs, adjectives and punctuation are identical in both languages. However, there are certain ways you would say things in English that you would say differently when speaking Spanish.

 

Web Applications are Built Using Frameworks

Before we dive into backend development resources, there’s one thing you should know. Most web applications are built using web frameworks. According to Wikipedia, a web framework is:

software framework that is designed to support the development of web applications including web services, web resources and web APIs. Web frameworks aim to alleviate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse. Though they often target development of dynamic websites they are also applicable to static websites.

Gasp GIF | How to Become a Web Developer and Learn Web Development

Don’t worry, it’s not that bad!

Bonus: Download my step-by-step guide on how to learn to code and become a web developer - even if you have no experience and suck at using computers. It contains a complete list of resources and exclusive information not found anywhere else on the blog.

 

Web Frameworks Make it Easier to Build Web Applications

Remember when we learned jQuery? To refresh your memory, jQuery is a JavaScript library that allowed us to use pre-written code to do more powerful things without having to write code from scratch.

Web frameworks do the same and help web developers build out web applications easily.

Web frameworks are typically built using one predominant programming language. For example, Ruby on Rails is built using Ruby and Django is built on Python. It’s important to note, however, that there can be multiple web frameworks per programming language.

Here are a few more common web frameworks:

  • Ruby on Rails | Ruby
  • Django | Python
  • Spring | Java
  • AngularJS | JavaScript
  • ReactJS | JavaScript

Dedicated teams update and upgrade existing frameworks over time. Existing web frameworks are always changing and new ones are always emerging. Check out this timeline of web frameworks below:

History of Web Frameworks Timeline | How to Become a Web Developer and Learn Web Development

Source: http://raw.githubusercontent.com/mraible/history-of-web-frameworks-timeline/master/history-of-web-frameworks-timeline.png

 

Which Languages and Frameworks Should You Learn?

Like programming languages, different frameworks have different strengths and uses.

You typically find Java or C++ frameworks being used for large, enterprise systems. In contrast, many tech startups lean towards Ruby, Python or JavaScript frameworks.

Based on my experiences in the tech industry so far, I would recommend starting out with Ruby or Python.

 

Ruby on Rails | How to Become a Web Developer and Learn Web Development

Source: http://tech.co/wp-content/uploads/2014/08/rubyrails.png

Ruby

Ruby is often associated with the Ruby on Rails framework that helped popularize it. Used widely among web startups and big companies alike, Ruby and Rails jobs are pretty easy to come by. Ruby and Rails make it easy to transform an idea into a working application, and they have been used to bring us Twitter, GitHub, and Treehouse.

Ruby on Rails is a great beginner framework because:

(1) there is a huge online community of Rails users

(2) it is widely used among startups and growing technology companies

(3) compared to other frameworks, there are way more online and offline resources for Rails

Rails is also the first web framework that I learned. Here are some online resources:

 

Python Django | How to Become a Web Developer and Learn Web Development

Source: http://blog.djangostars.com/content/images/2015/12/maxresdefault.jpg

Python

Python is a general-purpose language used for everything from server automation to data science. Django is a popular web framework for Python that powers websites like YouTube, Dropbox and Google. I don’t know Django so I don’t have a good list of resources for you. But this will do for now:

 

In-Person Resources

If you’re someone who feels like you may need in-person instruction, don’t worry! There are so many classes that you can take to learn these skills. In fact, I learned Ruby on Rails at an in-person web development bootcamp.

In-person instruction is especially helpful when you are stuck on difficult concepts. It also helps you with self-discipline and pacing learning material. However, due to the overwhelming demand for in-person classes, prices are very high. 

Price varies based on the time commitment of the class. For a 3-month full-time program, costs can be anywhere between $8,000 – $13,000 USD. On the other hand, the prices for a weekly class would be lower.

If you want to spend your money wisely, I would recommend using online resources until you run into major roadblocks. You should be able to cover the HTML, CSS and JavaScript resources I shared by yourself through online classes. Save the in-person resources for learning web frameworks.

Here is a great database called SwitchUp that lists the different in-person classes that are available to you. You can filter based on what you want to learn, ratings and more.

 

Practice Makes Perfect

Taking classes and learning is one thing. Applying what you have learned through working on projects is another.

Build side projects. Build websites and web applications for your friends. Do whatever it takes to get more hands-on, practical experience on whichever programming language and framework you choose.

When I first started learning how to code, I made the mistake of taking every class there was on Codeacademy and earning all the course completion badges. In the end, I knew how to write HTML, CSS, Javascript, Python and Ruby. But I had no idea how to build anything with the languages I learned. It was a total waste of time.

You’re much better of sticking with one programming language and diving deep into it before branching out into other languages.

 

A Word on Timelines

As you are learning all of these skills, keep in mind that these things take time. You will not become a great developer in a few months. You will not become a great developer just after a year. 

Patience Yoda Meme | How to Become a Web Developer and Learn Web Development

Listen to the master.

Be patient. The learning process is full of ups-and-downs so don’t feel discouraged. No one becomes good at something in a short period of time.

At the same time, you should realize that you get what you put into things. The harder you work, the faster you progress.

 

What Are You Waiting For?

So stop procrastinating and get started! Please share this post if you find it helpful or have friends who want to learn how to code.

 


 

Ready to get started? Start a new career as a web developer for FREE with my all-in-one handbook to learning how to code by clicking the image below:.

Ultimate Guide to Learning to Code for the Web - The Remote Update July 2016