How to Learn Web Development Now (and Win Life Tomorrow)
Why You Should Become a Web Developer and Learn Web Development
By becoming a web developer, you win at life. Okay, I’m exaggerating. But I stated my case last week when I gave you the 6 Reasons You Should Learn to Code. At this point, you’re probably ready to get started. So in this post, I’ll show you exactly what you’ll need to do learn web development and become a web developer.
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?
What Types of Developer Are There?
Great question. 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.
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:
- I Don’t Speak Your Language: Frontend vs Backend | Team Treehouse — Josh Long
- A Comparison of Frontend and Backend Web Development | Bloc
Now that you understand the terminology, let’s get right into learning web development and focusing on frontend or backend development.
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 website, including 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.
It is important to learn the fundamental languages that make up a website because the final product of web development project is 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 I will share the resources I used to learn HTML & CSS when I first started 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.
- Team Treehouse’s Frontend Development Track ($25/month with free trial option)
- Take all the classes specific to HTML & CSS, excluding Javascript
2. Code School’s HTML/CSS Path ($25/month with free trial option)
- Take all the classes under here
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, Shaye 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 Shaye enough for putting the time and effort in building and maintaining the resource.
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.
Source: https://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.
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.
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.
- Take all the Javascript-related classes
2. 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.
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!
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. I’ll write about getting a web development job in the coming weeks — so keep an eye out for that!
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:
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:
A 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.
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. So web frameworks are always changing. There are also new ones being created all the time. Check out this timeline of web frameworks below:
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
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:
- The classic Rails textbook. Through the course you’ll learn to build Twitter.
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.
Having in-person instruction really helps when you’re stuck on something or are learning 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. Practice. Practice.
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.
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?
Now stop procrastinating and go get started! Please share this post if you find it helpful or have friends who want to learn how to code.
In the coming weeks, I’ll release an article on getting jobs as a web developer. Be sure to keep an eye out for that.
Victor runs The Remote Lifestyle (http://theremotelifestyle.com), where he teaches you step-by-step how you can become a successful digital nomad.
