This article is going to be helpful only if you identify yourself as a beginner, and trust me when I say that there shouldn’t be any shame in doing so.
If you are someone who has toyed with the idea of getting into web development or if you’re someone who knows how to code, but doesn’t know what to do with it, then I shall try and show you the things that can help you in the journey that you’re about to set out on.

First off, let’s get familiar with a few terms. These are jargon that you’ll see in every article about web development.

• Web development: It encompasses a lot of technologies that are used to build dynamic applications. To be fair, this term can include a host of other things, but for the purposes of this article assume that every application that you see online, is built using this process.

• Front-End: It is the section of the app that a user interacts with, it can also be called as the client-side of any application. It can further include concepts like UI, UX, Layout, Responsive design, and so on. But don’t get intimidated by the previous line, and assume the front-end to be the part of an app that an end-user interacts with, in their browser window.

• Back-End: It is the section of the app that is abstracted from the user. Think of it as the stuff that lies behind the front-end, providing the functionality intended for the app that you are building. It’s often also called the server-side of the app.

• Full-Stack: You’ve guessed it! It’s a seamless combination of the front-end and the back-end. This is why web development can also be called any of the following terms and still mean the same thing: Full-stack development, Full-stack engineering, Software development, and so on.

• Framework and Library: Although they technically do differ, it is a fair assumption to think of them as tools that provide an abstraction over a more complex task, but with their own set of rules that need to be followed in order to use them effectively.
  In simpler terms, they allow us to complete complex tasks with lesser code. I would suggest that while using frameworks to accomplish a task, that you also see the raw version of the code, in order to develop an appreciation for the level of abstraction that a framework provides.

• API: It is the interface which allows the client-side and the server-side to talk to one another. It’s usually the boundary between various software. So every time you use a full stack app, you are likely interacting with an API.

• Database: It just stores data for our application. Majorly of two types, SQL and NoSQL. The difference between the two is very easy to comprehend, so a quick google search should do you justice!

Now that you are familiar with some jargon, let’s also take a brief overview of how a web-based application is able to work. This is something that’s usually irrelevant after you start building the application, but I believe it to be an essential concept to comprehend the general workflow involved in the development process. The following image represents an over-simplified web request-response cycle.

If this image helped you better understand the jargon I mentioned earlier, then that meets the purpose of me including this concept!

If you’ve ever researched as to what are the tools required for you to become a web developer, it is likely that you would have come across hundreds of them! You do not have to know every tool there is! This is a trap that most of us fall into, especially early on in the process of learning. I could rattle out names of at least 50 tools which are used in the development process, but that doesn’t mean that your skill set needs to reflect that.

Here is the part of the article where I shall suggest that you learn so-and-so tech stack to become a web developer in a week! That’s right! Learn this to get a job within a week! That ought to have caught your attention, after all I am going to reveal the secret to become a software developer! or a web developer! whatever you want to call yourself.
But the harsh truth is that there isn’t one. In fact, one of the reasons why there isn’t a one-stop solution for learning web development, is the fact that there are so many tools!

The point of this image is not to scare anybody off, but to illustrate some of the job requirements posted online!
Jokes aside, the most common starting point to learn web development would be the standard trio of HTML, CSS and JavaScript. A brief understanding of these 3 tools can be found below.

• HTML: It provides the basic skeleton for the web page and is used to build the structure of the app. It is also instrumental is deciding as to what are the elements that need to be displayed. It is the only language that a browser can covert into a web page. The learning curve for HTML is not too steep, because it doesn’t really include any programming logic per se.

• CSS: It is responsible for styling the structure built by HTML. This means that CSS can be used to beautify the bare bones structure built using HTML, by applying a host of properties. The learning curve for CSS can be a little steep, but trust me when I say that you would much rather spend the time to learn CSS at an earlier stage, than struggle with it after the fact! A free resource to learn it can be found here.

• JavaScript: This is responsible for adding the functionality to the beautified structure built using the previous two tools. This is probably the first programming language in the list, and is a truly vast topic. So you shouldn’t try and learn it within a few days, but instead spend a significant chunk of time on it. Build loads of mini projects to understand the basics of DOM, event handlers, promises and the other quirks of the language. If you need any more motivation to learn JavaScript, then please click here.

An analogy that helped me grasp the importance of these tools, is that of a humanoid robot. Think of the physical body(structure) of the robot to be made using HTML. Think of the outer appearance(style) to be built using CSS. Finally, think of the actual brain/processor of the robot to built using JavaScript. I know that it’s a contrived example, but it is one that can make it easier to understand the importance of each of the above tools.

Up until now, we’ve been discussing about the tools to build the client-side of the application. So let’s dive into the server-side of things!

This is where it’s totally up to you to decide what you want to use. All I can do is list the various options available to build the back-end of your application. Another common jargon used to describe our server-side is API. So don’t get confused when you see the words API endpoints in some of the tutorials. It just refers to the points of contact between the front-end and the back-end, in order to get/post data.

So, what does our back-end do? It is responsible for retrieving, storing, processing and refining data, so that some useful information can be sent to the client-side, if need be. In order to store the data, the server-side of an application often uses a database of some kind.

The various languages that can be used to build the back-end are as follows:

1. Python: The frameworks offered in this language are Flask and Django.
2. Node.js: Yes, you can just use the same language throughout the development process. Some frameworks offered in this language are Express, Koa and Strapi.
3. GoLang: A very easy language to start off with!
4. PHP: This is not really the preferred choice nowadays, but is one of the options available. Laravel is a pretty popular PHP framework that’s still around.

I would certainly be remiss if didn’t include at least one of the various client-side frameworks.
But I strongly suggest complete beginners to not bother learning a client-side frameworks, until they are comfortable in building the client-side of their applications using vanilla JavaScript (No, that’s not a rib at the vanilla enthusiasts of the world). Of course, you would still need to use HTML and CSS for the structure and the styling respectively.
This advise can seem naive at first, especially since most developers always seem to be ready to jump into the Angular vs React vs Vue battle, but I say this because it allows us to properly differentiate the perks offered by the framework, from those offered by vanilla JavaScript itself.

Finally in order to deploy your application you can use one of the following tools: Heroku, Netlify, Github-pages. Here deploying is the process of taking the app from working-on-your-local-machine to working-online!

Another important aspect of the workflow involved in the development process is that of a version control system. Think of it as snapshots of your code at different times, which you can refer back to, at any point in the future. It is also helpful in maintaining the codebase. Git is the most often used version-control-system, and it is a very easy tool to learn. Once you feel comfortable working with Git, you can also put up the code for the application you built, on Github (in a remote repository) for easier collaboration.This will also officially make you an Open Source Contributor.

That’s basically it! I’ve given you a rough overview of all the steps involved in the development process. I have deliberately refrained myself from suggesting a specific set of tools because tutorial purgatory is a concept that is better averted than coped with. Check out this article I posted a while back, to understand what I mean by this.

Only you can learn web development!

Rajat M ・ Apr 14 '20

#webdev

Finally, there is a skill that’s probably the most important. But I leave it up to you to find out more about it! May be you can google it, or maybe you can find out more about it on stackoverflow (wink, wink).