Web Development 101: A Guide to Kickstart Your Career
Key Insights and Prerequisites for Aspiring Web Developers
Introduction
If you’re reading this, you’re probably curious about what web development really entails. Simply put, web development is all about building and improving the web. But what does that mean?
The web is a system of interlinked resources. These resources exist in collections known as websites. So, if you had a small library in your room, that would be the web; each book in your library would be a website, and their authors would be web developers.
The pages, the forms, and every other feature you interact with on the web are built by web developers. So, when we discuss web development, we’re referring to the people and processes that contribute to building the web.
Prerequisite
Interest in Web development
Proficiency in Brower Usage and Web Navigation
Basic Computer Education
How the Web Works
The web works on a client-server model. This model is a system of communication over the Internet. Let us break this down.
The Internet is a network of interconnected computers. These computers are scattered all over the world, and among them are clients and servers.
What are clients and servers?
Client and Servers
Clients include your browsers, phones, and computers connected to the Internet.
Servers are computers that store web pages and applications.
When you are browsing the web, you are on the client side making requests to see web pages on the server side. What you get are copies of these web pages transmitted from a server to your client or browser.
How does this work?
HTTP and TCP/IP
A web page is a Hypertext document. Clients and servers interact using the Hypertext Transfer Protocol (HTTP). So your browser/client sends an HTTP request to the server, and the server returns an HTTP response to your client.
HTTP requests and responses can be transmitted via cables, satellite links, wireless connections, etc. But this transmission works out fine because some other important protocols guide the process. These protocols include the Transmission Control Protocol (TCP) and the Internet Protocol (IP).
TCP ensures that information is accurately transmitted over the internet. It checks that the transmitted data is complete and in order.
IP assigns addresses to computers and determines the path by which packets of data would be transmitted. This is known as addressing and routing. Your internet devices and the websites (servers) you visit all have IP addresses.
URL and DNS
IP addresses feature in what is known as the Uniform Resource Locator (URL). URLs are useful to the web as a standard addressing system used to locate resources.
A URL comprises a scheme, an IP address or domain name, and a path.
Scheme/Protocol: HTTP serves as the protocol for the web. A website URL begins with ‘http://’, or ‘https://’, the secure version of HTTP.
Address: While an IP address is a unique numerical identifier, a domain name is a user-friendly identifier for a website. The Domain Name System (DNS) translates domain names to their corresponding IP addresses before routing takes place.
Path: A path guides the web server in locating the specific resource requested by the client. In a URL, the path follows the domain name.
Figure 1: A URL with a scheme, a domain, and a path
URLs may also comprise a query string. Most times, people don’t enter URLs or domain names in their browsers. They enter search phrases. These search phrases are encoded into query strings in URLs.
Figure 2: A Search Phrase and Its Encoded Translation in a URL
So how does the web work?
Every time you go to your browser and enter a domain name, a URL, a search phrase, or an IP address, you send an HTTP request to a web server. IP creates a path to the server while TCP makes sure your request gets to the server. TCP also guides an HTTP response from the server back to your browser. That’s how the web works.
Specializations in Web Development
Web development covers a lot of processes. Usually, web developers choose an area of focus. Let’s discuss the specializations and career paths in web development.
Frontend Development
The front end is the client side of a website. It is what you see and experience when you visit a website. What you see is known as the user interface (UI) and your experience is known as the user experience (UX).
Frontend development entails building and improving the user interface and experience of a website. This includes designing:
how HTTP requests and responses would be initiated and received,
how data is presented on the client side, and
how users are able to interact with the website.
Modern web development prioritizes user experience. Websites are expected to be:
of elegant design,
interactive,
easy to navigate,
responsive to different screen sizes,
optimized for speed,
optimized for accessibility, especially for individuals with impairments, and
adorned with good-quality multimedia.
It is the frontend developer that takes care of these things.
Recall that web pages are Hypertext documents transmitted using the Hypertext Transfer Protocol. Well, they are built with Hypertext Markup Language (HTML) alongside Cascading Style Sheet (CSS) and JavaScript (JS).
HTML is used to build the structure of web pages,
CSS is used to style the pages, and
JavaScript is used to make web pages more interactive.
You can think of websites like a house where HTML elements are the building blocks, CSS attributes are the interior and exterior decor, and JavaScript makes the electricity and plumbing.
Other technologies used by frontend developers include libraries, frameworks, and superset languages.
A library provides developers with pre-written code that can be reused e.g. BootStrap is a CSS and JavaScript Library.
A framework streamlines the development process, ensuring standard practice is followed e.g. Angular is a JavaScript framework.
A superset language extends the capabilities of an existing language e.g. TypeScript is a superset of JavaScript.
Backend Development
The backend is the server side of a website. This is where the application logic and database of a website reside.
The application logic implements the core functionalities of a web application. This often includes:
business rules,
user authentication and authorization,
security,
data processing, and
interaction with the database.
The database systematically stores data. This allows the server or application logic to access and interact with data efficiently. The data stored in the database can vary from user information and settings to other information depending on the website. For example:
a content website or blog would store articles and multimedia
an e-commerce website would store product catalogs
a social network website would store posts and messages
Backend developers write and maintain the application logic using programming languages such as:
C++,
Java,
PHP,
Python,
C#,
Ruby, etc.
There are frameworks that streamline backend development. Examples of backend frameworks include:
Ruby on Rails (Ruby),
Laravel (PHP),
Django (Python), etc.
Managing and interacting with the database is done using a Database Management System (DBMS). Examples of DBMS include:
MySQL,
Postgres,
SQLite, etc.
When a web server receives an HTTP request, it looks at the path in the URL to know how to locate the requested resource. The application logic usually parses the request, and if it permits, the resource is retrieved from the database and sent to the client side.
Frontend vs Backend
While frontend developers deal with the visual presentation of data, backend developers focus on processing and managing data. Developers that do both are known as fullstack developers.
Job Outlook
A 2023 global tech survey by Codingame shows that web development tops the list of skills recruiters want to hire for.
The U.S. Bureau of Labour and Statistics expects the number of web development jobs to increase by 16% from 2022 to 2032, which is a faster growth than most other jobs.
Conclusion
Web development is an interesting career path with great prospects. But this path comes with a steep learning curve and great competition. Like any competitive career path, you want to be willing and able to dedicate adequate time and effort to learning before choosing to embark on this journey. Beyond that, you can reach for the stars✨!
References
Mozilla Developer Network. (n.d.). An overview of HTTP. https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
Mozilla Developer Network. (n.d.). IP Address. Glossary: Definitions of Web-related terms. https://developer.mozilla.org/en-US/docs/Glossary/IP_address
freeCodeCamp. (n.d.). What is DNS? Domain Name System, DNS Server, and IP Address Concepts Explained. https://www.freecodecamp.org/news/what-is-dns-domain-name-system-server-ip-address-concept-explained-for-beginners/