Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

A Roadmap To Learn Web Development

... or how I wish I would have started learning if in 2005 I knew what I know now.

This page was last reviewed and updated on April 25, 2017

You too can start learning!
Table of contents

In the past ten years or so the web has evolved to such a degree that it has literally become part of our daily lives. As it grew, so did the need for more engineers to maintain and develop more and more websites, constantly growing user databases and so on. According to some data there are more than 1 billion websites - one for every 7th person on the planet. Such numbers only lead to one conclusion - web developers are among the most sought-after people in today's world.

While becoming a web developer is not an easy endeavor, the good news is that the Internet itself makes such a challenge accessible to anyone willing to invest time and effort. I started out about 12 years ago, but I did a lot of mistakes on the road so I will try to tell you what I would do now if I would start all over again.

I will begin by explaining that "web development" is a very broad term. You call web developers people who build entire websites from scratch (full-stack developers), people who only create the user interface (front-end developers) and people who write the programs that drive the logic and behavior of a website (back-end developers). Basically the front-end developer handles everything that you see and interact with, while the back-end programmer is in charge of providing the necessary data from the server so that you can eventually gaze at a nice website with admiration. Don't worry, you don't have to choose the front or back-end path now. There are many things that you need to learn first and at one point, once you've gathered enough knowledge, you will know which road suits you better.

Where to begin ?

Get your first tools

Like with any "occupation" you're worth nothing if you don't have the right tools. you can't be a hunter without a gun right ? Thus, I've written an initial set of tools that will make your life easier as you progress. All software I list here works on Mac, Windows and Linux and has at least a free version to get you started.

  • A code editor: Sublime Text
    *** You might end up using something else when you become an experienced developer, but for now this will do. I use it everyday.
  • A basic HTTP server: XAMPP
    *** Later on you will get into real servers, virtual machines, recipes and so on, but for now, this will do the job for you.

HTML and CSS

A web page is whatever you see displayed on the screen when visiting a web address or a URL. The content of the web page is a document written in a language called HTML which web browsers know how to "read" and display in a human readable format. This being said, your first step towards becoming a web developer is to learn HTML. There are tons of resources available on the Internet, but I would start with the interactive HTML course from Codecademy, because it is a guided course and you can't make any mistakes. Also, at least at the beginning, it focuses on the very basics without going into too much detail.

Just to be clear: I am not saying you should buy the full HTML/CSS course! In order to get you started, all you need to do is finish the free chapters at the beginning of that course. The same applies for all links on this page, I am not endorsing any of their paid materials.

Once you are done with the guided tutorial, you should be able to write your very first web page and if you ever get stuck, you can check out the HTML tag reference on W3Schools or type your question in the comments area at the bottom and I will be more than happy to help.

As an exercise for HTML and CSS - establish as a goal for yourself to build a static website from scratch - let's say you would build the front page product details page of an online store.

I've learned HTML and CSS... What's next ?

The HTTP layer

Some coders will tell you there's no need to know how the Internet really works in order to start on a path to become a web developer. I strongly disagree. Basic networking and understanding what HTTP is are the foundation that makes the difference. You can't code for the web if you don't understand how a request works, what a response status code is or how domains are found across the web.

Don't freek out! It's not that difficult. You will feel much more confident when you've understood what this is all about. A good resource I've found online is HTTP: The Protocol Every Web Developer Must Know by tuts+.

To play around with HTTP requests, upgrade your tools set by learning how to efficiently use the Chrome Dev Tools.

Front or back-end ?

Learning how to write one web page is not enough to qualify as a web developer. You will need to know at least one programming language to be able to get a job as a front-end or back-end developer. However, you should now have enough knowledge to know what you want to achieve. If you want to create interfaces and focus on user experience then you should begin learning a client side scripting language like JavaScript. With JavaScript you can do lots of cool stuff that happens in the web browser like animations and even web based games. If you want to focus on the functionality and the data that exists on a website then you will need to learn a server-side programming language like PHP.

JavaScript

The best place to start learning JavaScript is through a guided tour of the programming language and the guys at Codecademy will teach you just that. Another great resource that should to be read is this JavaScript series.

Make sure you get past the " JavaScript Intermediate Tutorial" and you always exercise what you read.

Once you've finished the free courses you can dive deeper into JavaScript by trying to create a simple game of Tic-tac-toe or Hangman using the skills you've just gained. If you need help along the way, you can rely on the JavaScript and HTML DOM reference on the Mozilla Developer Network.

When you're done, get back to your exercise project - Try to enhance the online store you built when learning HTML by adding interactions to pages: load the products list from a JSON or XML file using AJAX, make a preview of the product in a modal window, update prices when a user changes quantity, update payment methods depending on a users choice.

PHP

PHP is a server-side programming language developed primarily for web development and it is really cool because it provides a way to generate web pages dynamically by interacting with databases or external APIs. You can develop really complex applications once you've mastered PHP. The most important reason to start learning it is because PHP represents the backbone of most websites that exist today and it was used to build giants like Facebook and Wikipedia.

Your first contact with this programming language should be a guided course which you can complete in only a few days on Codecademy.

This course will not make you a programming guru, so I suggest you try enhancing your web application. Your goals should be:

  • Store all product data into a MySQL database
  • Create a user registration mechanism
  • Connect to an external API (like PayPal) and make your online store payment actually work

Remember, the most important source of knowledge when it comes to PHP is the wonderfully structured documentation on php.net - You can rely on that when you encounter difficulties.

The Command Line

Once you start working as a web developer you will find yourself into situations that will seem impossible to resolve - and that is because you don't use the right tools. The Command Line is one of those tools, it will help you do lots of things very fast.

A few examples I can think of would be:

  • You need to keep track of code changes - use git
  • You need to connect to an external server - use ssh
  • You need to download large files - use cURL or wget
  • Schedule a task to run on a server - use cron jobs

For the above, and much more you will need to know a little bit about the command line.

Here are a few free resources that will teach you the basics:

To properly exploit what you've learned, it's time to upgrade your tools. To get to the next level, you will need to start working in Linux. You're in luck, this is not hard to do these days either. Here's your upgraded tools set:

  • Ditch XAMPP - and install a Virtual Machine with VirtualBox and Vagrant. To get started here's a tutorial from SitePoint.
  • You may also want to use an integrated development environment (IDE) for web development (although this is not a must). An option is to use an IDE from JetBrains - either PHPStorm or WebStorm. These are paid products so I'm not posting any links.

Frameworks

JavaScript Frameworks

Most web development projects these days use frameworks. Frameworks are packages of code that provide various functionalities out of the box so that developers devote their time to meeting project requirements and deadlines instead of dealing with re-writing low level functions.

There are hundreds, if not thousands of JavaScript frameworks out there and one can get discouraged thinking that it's practically impossible to learn them all. This being said, my advice is to choose one learn it and learn it well. Angular is my choice, but I also like Vue JS a lot.

For Angular JS in particular, an open source framework powered by Google, the documentation that they provide is very well written and going through it while fiddling with the code should be enough to get you on the right path.

PHP Frameworks

Just like with JavaScript, any experienced PHP developer will tell you that there is no point in rewriting code that already exists and thus they will try to use a framework as the "foundation" for most projects.

When it comes to PHP, I find Laravel to be a very easy to learn, solid framework. Laravel is open source and it is created and maintained by Taylor Otwell - one of the many prestigious PHP developers these days. To teach yourself Laravel all you need to do is to dig into it... while following the official documentation.

Usually frameworks are chosen depending on the project type, complexity and developer preference. In some cases, especially if you work in an agency or if you are a freelancer you will have the chance (or misfortune) to interact with other frameworks. Some of the PHP frameworks that I've worked with and I consider to be worth the mention are: Kohana, Slim and Symphony with the latter being a great fit for large, enterprise-level frameworks.

I've learned a lot... What do I do now ?

If you are reading this ... Congratulations!

While you're around, you can try taking one of these easy quizzes I've coded a while back. While they're certainly not a scientific way to assert that you're good enough for "production" in a particular field, they can certainly help you find out where you stand.

You now have the basic skills that a web developer needs to succeed. Your main goal right now should be to start building a reputation in the industry. To do that, try finding an open source project to which you can start to contribute... this way you will develop a nice portfolio to use at you next job interview as a web developer! Also, consider getting a certification for your area of expertise.

Certifications

What do programmers need to know once they've reached a certain experience level and decided to start their career as web developers ?

One of the first questions that crossed my mind was how to convince clients that I was trustworthy, good enough to get projects and eventually get paid. There were thousands competing with me on the same skills, and as a beginner - the uneasiness I felt when trying to get new clients is understandable.

"I cannot charge $X per hour now" - I said to myself, "Nobody’s going to pay that to a beginner" - so I thought that it would server my purpose to start building a resume that deserves a second look. For that, I understood that I needed to complete some certifications and courses that would be recognized by employers.

"While I might not be paid $X still, my hourly rate is sure to go up a few notches and more importantly, I am sure to get better projects", I continued repeating to myself.

All in all, I diligently started looking at the different certification options available and as I knew I needed a diploma that employers could trust, here's what I found.

Front end - The HTML5 Application Development Fundamentals from Microsoft

I knew that I needed to have a firm grasp on HTML5, CSS and JavaScript. But then, every front end web developer is expected to know those. While looking around the web, and skipping everything from W3Schools and other similar programs, I found that Microsoft was certifying web developers. The diploma is called Microsoft Technology Associate (MTA) and you earn it by passing at least one of many exams that it provides. One of those exams is called "HTML 5 Application Development Fundamentals" and, as I found out later it is often stated to be the first option when it comes to having a Certification on front end Web Development Technologies.

I also found out that these exams are not easy and Microsoft recommends a study preparation time of around 12 months.

Back end - Choosing the PHP Certification from Zend

OK, I admit I am a PHP fan. The Zend PHP Certification was one of my priorities, because there is no confusion as to which PHP Certification one should choose - Zend stands out by far.

Unlike those multiple choice questions that you can solve with a little bit of luck, being a Zend Certified Engineer takes some effort. To get certified, you must to know everything about PHP - from basic syntax to byte-code caching, object oriented programming, name-spaces and configuration options. You are also required to have a strong knowledge of XML and other data types, web features and web security as well as SQL.

At $195, the Zend PHP Certification Exam fee is not cheap at all, but it is one of the exams that will confirm your knowledge and help you gain some authority.

This article will be updated monthly. Check back soon...


Alerts

2017-02-16 - The bcpowmod function in ext/bcmath/bcmath.c in PHP before 5.5.35, 5.6.x before 5.6.21, and 7.x before 7.0.6 modifies certain data structures without considering whether they are copies of the _zero_, _one_, or _two_ global variable, which allows remote attackers to cause a denial of service or possibly have unspecified other impact via a crafted call. Read more ...
2017-02-16 - The grapheme_strpos function in ext/intl/grapheme/grapheme_string.c in PHP before 5.5.35, 5.6.x before 5.6.21, and 7.x before 7.0.6 allows remote attackers to cause a denial of service (out-of-bounds read) or possibly have unspecified other impact via a negative offset. Read more ...

See All Entries...