What is web development and how can I learn it fast?

In the last decade, there have been a number of sites like Facebook, Youtube, and Netflix which gives amazing user experiences which have surpassed the websites created in the early internet days. If you are like me, you might be curious about how that stuff was made, and how you can create stuff like that.

In this post, I will tell you what web development is all about, how you can start coding immediately and how you can get to a basic level as fast as possible.

A brief history of web applications

1995: Netscape introduced a scripting language called Javascript. This made it possible to manipulate the content of the website without requesting a new HTML page from the server.

1999: First time the concept of web application was introduced in the Java programming language.

2005: Ajax appeared. This was a big thing. It made it possible to take a part of the web page and communicate with the server instead of requesting the whole HTML file. From this technology, web application like Googles Gmail and Maps emerged which sat the standard for web applications for years to come.

2011: The HTML5 standard was finalized.  This gave the HTML standard multimedia capabilities which made HTML more independent and you didn’t have to rely on third-party plug-ins. Other capabilities were the HTML5 canvas which made it possible to create games and animations on the standard directly.

Why learn web development

Like I previously mentioned in the history of web applications, the very start of serious application started in 2005. The only type of apps back then was desktop applications, which are an application installed on the computer.

In the recent years, there are more and more web applications being created than traditional desktop applications. There are a few benefits of building web applications:

• The application is stored online on a server. This means when you upload a new version to your hosting site, the user will automatically get the latest version. In a desktop application, you have to install the application on every client, and often you have to deal with different version if a client didn’t update.
• No need for installations. Just type in the address in the address bar and you are good to go.
• Now people from all over the world can reach your application everywhere and every time. With the rise of smartphones and the internet connection on those has gotten faster and cheaper, you will have access to a lot of users.
• You can use the same technology to create mobile applications which you can download fra Androids Playstore and iPhones Itunes store.

Frontend vs Backend

When you talk to web developers, you will often hear the terms frontend development and backend development.

Frontend development is what you see in the browser window. This is for example when the text color changes when you hover over it with the cursor, or you have a sliding animation of an element.

The backend development, on the other hand, is what we do not see. These are things like getting data from a database or authenticate a user.

If you are a visual person and like to manipulate data so it is visible to the user, I would suggest doing frontend development. If you are not that visual but are more into logic, security and data, I would suggest backend. It is of course also possible to do both, which we would call a full stack developer. In this post though, I will focus on the frontend aspect.

Some words about Javascript libraries and frameworks

Javascript, HTML, and CSS have been essential skills to have when doing web development since the nineties, and my bet is that isn’t going to change any time soon. So my advice is to focus on learning those three skills very well.

But nowadays there are not many people creating web applications with plain javascript. Most people use a javascript library or a framework. The line between a framework and a library can be fuzzy. I will try to clarify.

 What is a Javascript library?

A Javascript library is a Javascript file which contains code. This code has a lot of function which does common useful tasks. This is often patterns which a lot of people are doing which are tedious without the library. The appeal here is that developers can accomplish more with less code.

Examples of popular Javascript libraries are:

• jQuery
• Underscore
• React

What is a Javascript framework?

A Javascript Framework comprises of how your application is structured, and the framework forces you to use certain design principles. The framework has built-in behaviors which make building your apps easier and other benefits.

Examples of popular Javascript frameworks are:

• Angular
• Vue.js
• Ionic Framework

Some advice about libraries/frameworks

Libraries and frameworks are most often than not used to create web applications. When applying for frontend developer jobs, most likely, there will be a demand that you need to know one or more libraries/frameworks.

However, I would highly recommend prioritizing getting a good understanding of plain old Javascript (often called vanilla Javascript). The reason is, if you know Javascript deeply, you will be able to understand how the libraries/frameworks are created. There won’t be any “magic” which you don’t understand.

Libraries/frameworks come and goes. For example, jQuery was a revolutionary library a few years ago. But it has its limitations, and the demand for it is less and less. Javascript, on the other hand, is the basis for all libraries/frameworks. In other words, the time investing in learning Javascript is time well spent.

5 tips to learn web development fast

Here are five tips I will recommend focusing on when learning web development. Follow these tips and I will promise you will get to an intermediate skill level in no time!

Tip 1 – Go through tutorials on w3schools

w3schools is a free, excellent tutorial site. The content is divided into small understandable topics with the ability to try out the concepts directly in the browser.

I recommend going through the tutorials of Javascript, CSS, and HTML twice! And everywhere there is a “Try it yourself” button, you should click that button and, well, try it yourself!

Tip 2 – Develop a practice habit

I think this tip is key to learn web development fast. Do some coding every day!

You can compare learning web development with going to the gym. If you do it every day, your developing skills will be stronger. You don’t need to do much, but do at least 5-10 minutes a day. I can recommend Edabit which is a code challenge website. Here there are tons of programming exercises. You can solve them be coding directly into the browser. And you are able to see how the community has solved it. This way you can learn by comparing your code to others.

If you do at least one challenge a day, you will go far real fast. One challenge can sometimes just take a couple of minutes, and often you will be so proud of yourself, that you will do a few more.

This is something few people ever do. If you develop this habit, you will be way ahead of the curve!

Tip 3 – Enroll in a video course.

There are a lot of great free video content on youtube. The problem is that the content is scattered all over the place, and as a beginner, it is hard to determine where to start.

I would recommend checking out Team Treehouse. This is a subscription site with tons of videos you can stream. They have a seven days free trial. After that, it costs 25$ a month. Even though you can get a ton of info elsewhere for free, there are in my opinion good arguments for choosing a paid resource:

• The courses are structured in a way where you learn the essential basics first, and more advanced stuff builds on what you have just learned.
• When you invest money in a resource, you are more likely to value and use that resource often, getting you faster to more advanced levels.
• A training site like Team Treehouse is a highly rated site, where the instructors are very competent. When you start a new course you can be certain that the content is of high quality.

Team Treehouse has something called “tracks”. These are a bunch of videos put in an order for what to learn on a topic. I recommend looking at the tracks beginning Javascript and learn HTML.

Tip 4 – Build your own website

Sometimes just rewriting the same example application as in a tutorial can be quite boring. You should mix it up by creating something you yourself come up with.

Now, you shouldn’t create a new version of Facebook. I want you to think of something very simple which you can finish in a short amount of time. This could be things like:

• Show a button in the browser. When you click it, you will get a number between 1 and 100.
• Have a red button, and when you click it, make it change color to green.
• Have an input field where you type your name. And when you click a button it will show on screen: “Hi (your name)”

You get the idea. Just something very simple. Feel free to gradually increase the complexity.

Tip 5 – Learn a framework/library

Like I said earlier. You should focus on learning plain Javascript, HTML, and CSS first. However, if you want a job down the line, you need to learn a framework/library.

Some tips on choosing a framework/library:

• Learn a framework which is popular. The more popular it is, the more job listing there is. Search on job sites with the framework/library name and see how many jobs are listed on the different framework/libraries.
• Check if it has a big community. This makes it easier to get help online.
• Choose one with a good documentation.