Web Development explained 2022 | What is Web Development

All right here's web development explained. You may have read and heard about Web Development from a lot of places. Here is one more article which focuses on Web Development. What is it? Why it is a great career choice? And How it will be making a huge impact in 2022.

We will cover some of the important areas of web development which together form a complete web development stack that means. We'll start with user interfaces in the front-end coding. We'll discuss APIs and how data gets transferred over networks. And lastly, we will touch on backends databases, security, servers, and modern cloud.

So let's start with this article.

What exactly is Web development?

Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.

A more comprehensive list of tasks to which Web development commonly refers may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

Among Web professionals, "web development" usually refers to the main non-design aspects of building Web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills.

What do Web Developers do? - Web developers use coding languages (think HTML, CSS, and JavaScript) to build websites and web applications. A Full-stack Web developers also has the knownlegde of other programming languages such as Python, .Net, PHP etc.

Evolution of Web Development

Let's look at how web development has evolved over the past 20 or so years. We started with web 1.0 the era of static web pages that essentially just displayed information. Then we had the dot-com bubble Seinfeld AOL and a lot of web pages that looked like this-

Image source: TechRadar

Then Web 2.0 came into existence in the mid to late 2000s. Web 2.0 are dynamic Web Apps, i.e., the Content of these web pages was dynamic and customizable. Now many believe we're entering a new third era, customized AI-driven experiences that are different for every user. Two examples are the YouTube recommendation algorithm as well as Amazon knowing what we want to buy more than we do these advances have blurred the lines between web development and the rest of software development.

Types of web developers

Ever wonder when you purchase anything from Amazon and click on the "Pay now" button. On entering your credentials the money gets deducted. This whole process looks so easy and only takes 1-2 minutes. But there is a whole lot of things happening in the background.

Different things which are going on at the site are- "Showing different products and their prices, displaying discounts, Displaying the text fields to enter credentials, Submitting the credentials, Processing and Validating the submitted details, Taking buyers address and confirmation of purchase and expected delivery date."

A Web Developer codes all of these responsibilities. A Full-Stack Web Developer can be categorized into the following :

• Web Designer
• and Web Developer

A Full-Stack Developer is someone who has knowledge in both web Designing and Development.

Web development vs Web design

Web Designing

The two terms- Web Development and Designing, often confuse newbies. Designing is basically related to visual appearance. The job of a Web Designer is to use the front-end software/programs and create a Web Page visually appealing and attractive. The role of a web designer is to make sure that the website runs smoothly and appears fine on every type of device, such as Desktop, Mobile, and tablet. A designer tries to make everything on a web page perfectly aligned.

It may seem that designing is not that hard to do. But it is totally a different department where the designer has to make sure that the users are finding the site attractive and interactive. While designing, a designer has to keep in mind that the page must load fast. Because no one likes slow sites. A survey says that on average a user waits only 3-4 seconds for a site to fully load. To make a site fast, a designer can use frameworks, premade templates, remove animations and even include fewer Javascript files. All this will be discussed in the later sections.

Web Developing

The job of a Web Developer is to make the designed website run and perform on what the user action. For Example- You visited some E-Commerce sites to buy some products and you see a banner of sale. The banner says that after 10 days every product will b 10% off. So waited for 10 days and see the price of each product drop by 10%. This calculation of dropping the prices is performed in the Back-End. By using Backend Softwares/programs a Web Developers writes code to make functions that will change the prices on particular dates or events.

Also, it's the job of BackEnd programs to take values/inputs from Users and perform the action on them, such as calculating the loan interest or telling the user about the due date of their insurance based on the input.

The Difference between a Web Designer and a Web Developer is- A Web Designer works on a Website/Webpage to make it visually appealing and interactive whereas A Web developer works on websites to make them run and do tasks such as taking inputs and storing them into databases, performing arithmetic calculation and many more.

Roles of a Web Developer

Front-End Development

Starting with Front-End, the job of a Front-end Developer is to make sure that the website looks representable to the user. Basically, this is what the user sees and interacts with. Directly it's the portal from our app to the outside world. Mostly everyone is familiar with the front end Trinity- HTML CSS and JavaScript.

Read- Explaination of What is HTML, CSS and JavaScript for beginners

HTML

It all starts in the browser though, when you visit a URL. This will kick off a request for index.html from Google servers. HTML files are made up of two things, that is- 'text' and more importantly, 'tags'. These tags can modify the text, add links, break our page into sections and add classes that we can apply styles.

We also have standalone tags essentially these tell the browser to load additional assets, whether that's an image or additional files one such file might be a CSS file. These tags include an attribute as "src". These tags create an additional request of the Google Servers and we receive it at all scan through and loaded HTML.

CSS

To add styling to a web page we use CSS properties. Different classes and IDs have different CSS properties written by the web designer. Different elements/tags in a Web page access these CSS Properties using a class and ID attribute. You can learn most of the CSS by learning how to do spacing. For Spacing, you can go for mastering Flex-Box. CSS isn't logical it's mostly just practicing memorizing and applying what you've learned. For this reason, Google is your friend.

JavaScript

Back to our HTML file, there's one more important tag we need to talk about. It's the script tag that allows us to load JavaScript files from our server or elsewhere on the Internet. By the way, servers are generally referred to as web servers that send this kind of file. So, using a script tag we request our file and it gets sent over. Let's look at some of the stuff javascript is responsible for with an example-

Let's say we have a button that allows us to enable dark mode on the web page. The button has an event listener like "click", which triggers the dark mode. We need an event listener to the button. The button waits for some event like "click" to happen and then responds accordingly. Javascript allows us to write such code. Code that makes the button configured and wait to be clicked then responds accordingly.

When the click happens JavaScript can update our HTML page to change the styling(color) of the page. So JavaScript would update the appearance of our page. The element that needs to be updated is fetched by Javascript. If it finds then it will toggle the color of Dark mode to the web page successfully.

Javascript also lets us validate users' entered information such as Username, Password, and also your card credentials on the E-Commerce site. JS lets us talk to our server without reloading the page. These kinds of requests whether it's to send data or request more data are known as AJAX and XML requests.

Frameworks

In 2020 almost all front-end developers are using frameworks.

These frameworks don't do anything javascript can't do but they give us a better developer experience. That being said browsers can only run JavaScript, not framework code. So our framework code has to go through a build or bundle step which converts it to normal JavaScript. The important part is to choose one and stick with it although keep in mind that React and Angular have more jobs than the other two.

Back-End Development

API (Application Programming interface)

Okay, we discussed front-end but how does it talk to the backend. That's the purpose of an API. Essentially our front end and back in may or may not be in different languages. So how do we standardize a way for these two to talk? Well, we do that with what's called an API.

Most commonly REST APIs are used which follow the convention of combining a verb with a location. For example, we might want to get a list of accounts or add a new account. Alternatively, if we pass a parameter we could get a specific count, modify it, or delete it. REST does give us some nice standards but there are no guarantees.

Now how is data transferred? Well, that's done most commonly by sending strings back and forth through a protocol known as "HTTP". Ideally, these strings can be read by any programming language two common formats are JSON and XML and we convert data to a JSON string through a process called serialization.

Backend Programming Languages

Our back-end application layer can glue together multiple different components. We can talk to front ends other servers and databases. You can languages like Python, JavaScript, PHP, and C-Sharp to write Web Backends. Since Frameworks is common here's the most common one for each language.

Language	Framework
Python	Flask
JavaScript	Express JS
PHP	Laravel
C-Sharp	ASP.Net

Databases

Let's talk about Databases. There are two main types of multifunctional databases namely SQL and No-SQL. Each provides different strengths and guarantees. SQL databases are organized in a strict column representation format. That means to write or add to the database you have to adhere to the set of rules or it won't work. These stricter rules allow you to do more complicated things when you're reading from your database.

Alternatively, No-SQL databases don't really have rules, they just have collections which are groups of objects. So a user object might have a name and email but it's not enforced. These scales are much better but you have to be careful because there are no guarantees about the structure of your data.

Again there are many more database principles that apply and what you use is totally circumstantial. The three most popular databases are probably MySQL(SQL), Postgres (SQL), and MongoDB (No-SQL). finally, you should know that databases are usually the slowest and they're the bottleneck.

Web Security

Let's touch on web security. Any web app with a login will need to consider authorization and authentication. The login itself provides authentication. Authentication will usually give the user a string-based token that is a random sequence of characters. This is then used on the server-side to validate each request. on the other hand, Authorization defines different user roles. For Example- If I'm an admin I would be able to do different things than a normal user.

Infrastructure and Networking

We're almost to the end. Let's touch on infrastructure and Networking. Data centers are pretty much where all servers and web servers exist unless you have a dedicated server running at home that's always on.

These servers are just computers without monitors that are constantly running, they can be controlled with SSH. A direct way to control the machine from the command line but most of what they do is automated through scripts. You can group multiple servers into a private network, each server in a network is called a node.

And in private networks, servers can communicate quickly and securely. Servers that talk to the outside world(Network) have more to worry about. They're usually set up with a reverse proxy. It's a gateway that exposes specific ports to the outside world. A port just being a machine-specific address, a process is running on so you might want to expose a REST API's port but not a database port.

Cloud computing

Nowadays most of this Hardware management is handled by companies like AWS and Digital Ocean, who run their own data centers and rent out space on demand. This is where the term cloud computing comes in. You can rent a fraction of a single server for an hourly or monthly cost cloud. Providers like AWS will usually offer a lot of additional free services that keep you on their platform.

Cloud computing is expanding beyond just having servers as a service though you could run individual functions for a very low cost on demand. So if I wanted to send an email every time something happened in my front-end, I can put that in a cloud function.

Reasons to choose Web Development

Do you know according to Stack Overflow, 83 percent of professional Web Developers in the US are employed full-time and another 10 percent are working as a freelancer or part-time? Also, Web Developers earn between $67,442 (Indeed) and $88,000 (Glassdoor) a year, with an easy pathway to more senior positions. So there are huge job requirements for Web Developers.

Secondly, even if you are actually into Android or machine learning and you know web development, it would b beneficial because it would help in managing backend databases for apps, and also you can deploy some of your machine learning models.

And Thirdly, web development overall is a very wholesome skill. When you learn web development, you also get to learn System designing, Database management, and front-end, and finally backend too. So overall in interviews and in careers, generally it helps us tremendously.

Conclusion

So in the article, we discussed why learning and getting into Web Development can be one of the best decisions. Also, Web developers are in huge demand so why not give it a try. Web Development is a skill easy to learn but also a skill that would require patience.

I am soon going to publish one more article that will cover the Roadmap for Web Developers.

If you have any questions do let me know in the comment section below. Hope this article was helpful to you.