A Beginner Friendly Guide to the World of Web Wevelopment.
Tags: webdev, beginners
Published: 2020-07-20 05:07:51

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.

![Web request-response cycle](https://miro.medium.com/max/700/1*9x3R2-sc5d1hcyshT-BvdQ.png)

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!

![Collage of some tools off the top of my head](https://dev-to-uploads.s3.amazonaws.com/i/8pq75jddacotjr8g3h4y.jpg)

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](https://css-tricks.com/).

- **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](https://image.slidesharecdn.com/becomeawebdeveloperakaicampbeginner1-140402034322-phpapp01/95/become-a-webdeveloper-akaicamp-beginner-1-19-638.jpg?cb=1396410717).

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.

{% link https://dev.to/rajatm544/only-you-can-learn-web-development-3cp9 %}

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*).