Basics of web development for absolute beginners

Lal Saud
5 min readJul 10, 2021
Photo by Campaign Creators on Unsplash.

What is web development?

Web development is a field in computer science which relates to creating websites and web application. A website is collection of web pages and related assets, that are organized to make content easier to access by users. By visiting a website, users can interact to it and perform some actions, so they get value out of it. Examples of such actions can be day to day work such as — making notes, writing letters, sending messages, performing calculations etc. or may include other activities as — buying and selling products, applying for government benefits and paying utility bills, entertainment, communication, education, banking and much more.

How the web works?

Before diving deep into web development, let’s get to the basics of how world wide web actually works. Consider the image below:

Files for a website (eg. HTML pages, stylesheets, images, videos etc) are created and stored in a web server. A web server is connected to internet through which it hosts those files using a website address (Domain name), managed by a DNS Server. When a user requests the pages by typing website address in internet browser, corresponding pages will be delivered to the user.

Websites are a combination of web pages and related assets (eg. stylesheets, scripts, images, audio or video files etc.). Those files need to be hosted somewhere on the internet. The place where a website is stored is called a web server. A website owner hosts website to a server and assigns a domain name to the website.

A DNS Server keeps record of domain names. The domain name is a name which helps to identify a website in the internet. For eg. facebook.com, google.com, bbc.com etc are all examples of domain names. These are also referred as website addresses. Remember, these names are unique and two separate websites cannot have same name. So you have to lookup for available name and once satisfied, you can register the name with a registrar. This process is called Domain Name Registration.

Once domain name is registered, it can be linked to the web server using DNS server. This will allow website pages to be accessible by typing the website address and corresponding page location. For eg. www.example.com/index.html — if the domain is example.com and web page location is /index.html. This process of uploading files to a web server and linking them to an address is known as Web Hosting.

Once, this is done, users can simply request the pages by typing address in their Internet browser and the pages will be delivered to them.

What you need to start web development?

To start a career in web development, you basically need a desktop computer or a laptop, with few software installed in it. A mobile device may be required to see how the website looks on smaller screen, however it may be difficult to write code to create a website on a mobile device.

The software that are required may consist of an IDE (Integrated Development Environment), a web browser and a web server application. An IDE is basically is a combination of a text editor and web design languages integrated into it.

For creating more complex websites, you might also need a programming language of your choice and a Database system, however more on this later.

Nowadays, there are some online websites or content management systems to let you create websites without even writing any code or just by using drag and drop features into the website. Examples are — wix.com, squarespace.com or wordpress.com. Those websites or tools are meant for quickly creating a websites, however may not provide higher level of customization or requirements related to a specific business need. Using such tools is out of the scope of this writing, however it’s a good idea to check those as well.

Two areas of web development — Web design & Web programming

Web development is a vague term , which basically can be branched into two sub-categories — namely web design and web programming.

  1. Web design (Frontend)
    refers to designing web pages and websites to make them look better and easier for users to access content on. Common tools used by a web designer are as:
    * A photo editing software — eg. Adobe photoshop
    * A layout designing software — eg. Adobe indesign
    * An IDE — eg. VS Code, Atom, Sublime Text etc.
    * HTML, CSS & JavaScript — Languages to create web page layouts and add static content
    * A frontend framework — Based on CSS (Bootstrap, Tailwind) or JavaScript (React, Angular, VueJS)
  2. Web programming (Backend)
    refers to writing the logic to provide response based on the request from a user. A web programmer may use some of following:
    * A web programming language — eg. .NET, Java, JavaScript (yes, it can also be used as a web programming language), PHP, Python, Ruby etc.
    * A web framework based on programming language — eg. ASP.NET (.NET), Spring (Java), Express(JavaScript), Laravel (PHP), Django (Python), Ruby on Rails (Ruby)
    * An IDE — eg. VS Code, Atom, Sublime Text etc.
    * A Database Server — eg. MySQL, PostgreSQL, MS SQL Server, MongoDB etc.

Sometimes the difference between a web designer and web programmer is thin, as single person can work at both roles. Such a developer is called a Full stack developer.

Technologies for Web Development

There may be a ton of web development technologies in today’s world. However, for an absolute beginner, following language stacks can be considered as the starting point:

  1. Frontend Language Stack — relates to look and feel of web sites and web pages.
    * HTML — Refers to a set of tags and attributes, that generate content on a webpage. For eg. add titles, paragraphs, images, horizontal lines, tables etc.
    * CSS — A language that defines how content are displayed on the webpage or screen. For eg. define layout, color, simple animations, rotations etc.
    * JavaScript — A scripting language that makes web pages interactive by adding complex animation, responses to user actions etc. For eg. image slider, validate a form before submitting.
  2. Backend Stack — relates to the complex logic that happens on background or server based on a user’s request.
    * Web programming language (any one of mentioned above) — Used to write complex business logic and return result as required by the web user. For eg. authenticate a user based on username and password, commit a transaction when paid with a credit card etc.
    * Database Server (any one of mentioned above) — Used to store data generated for any web application and provide data to the program when requested. For eg. store user data (emails and passwords) and return when queried by a program, store transaction data etc.

Career paths as a web developer

There may be so many tools and technologies out there for you to start and grow as a web developer. So finding a clear path and working continuously towards the goal is very important.

A beginner can start working as a web designer by learning frontend language stack. You can find a ton of jobs for web designers by checking the online job sites in your area. Once it is comfortable to work with frontend stack, one can slowly start getting deep into backend stack by learning some advanced programming languages and database system. There may be even more job opportunities as you grow your skill set.

Congratulations for making up to the end and Good luck!

--

--