Intro to Web 101

If you are new in Web or you want to start your career in Web Technologies. This article will help you to know more about web technologies and their development.

Let’s start with 3 basic terms

1. Website
2. Web Browers
3. Servers

Websites

In General term, Collections of web pages is call websites. Website builds with lots of web pages and the main web page of the website is called Home Page.

Where web pages consist of Text, images, and audio files.

Each website has its specific address, for example, www.google.com

How to Build a Website/Web page?

you can start developing your Websites/web pages by using

1. HTML
2. CSS
3. JavaScript

HTML: It’s markup language, it means you can provide the structure of your web page with HTML Tags (<P>, <div>).

CSS: Is used for Designing your web pages, for example, with CSS you can change the color of the text in your web page

JavaScript: It’s a programming language for the web. With JavaScript you can update and change both HTML and CSS.

Sample HTML web page

HTML Document Example

Static vs Dynamic Website

Static Website:

Static website is the basic type of website that is easy to create. Its web pages are coded in HTML. The codes are fixed for each page so the information contained in the page does not change and it looks like a printed page.

Dynamic Website:

Dynamic website is a collection of dynamic web pages whose content changes dynamically. It accesses content from a database or Content Management System (CMS).

Domain/IP Address

A domain name is your website name.

A domain name is used for finding and identifying computers on the Internet.

Computers use IP addresses, which are a series of numbers. However, it is difficult for humans to remember strings of numbers. Because of this, domain names were developed and used to identify entities on the Internet rather than using IP addresses.

Web Browsers

A web browser is a software program that allows a user to locate, access, and display web pages.

Browsers are used primarily for displaying and accessing websites on the internet, as well as other content created using languages such as Hypertext Markup Language (HTML).

Example: Google Chrome, Mozilla Firefox, and Safari..

How Web Browers work?

In General, Web Browers take the HTML/CSS/JavaScript Code and pass into some rendering engine and the rendering engine will start parsing the HTML document and convert elements to DOM nodes in a tree called the “content tree”. Then you’ll be able to see the complete Web page in your web browser.

Rendering Engine

Google Chrome:

Blink: Rendering Engine & Chrome v8 Engine: JavaScript Engine

Microsoft Edge:

EdgeHTML: Rendering Engine & Chakra: JavaScript Engine

Safari:

WebKit

Servers

A server is a computer designed to process requests and deliver data to another computer over the internet or a local network.

In General terms, Server data to the browser.

Types of Servers:

1. Web Server

For server web pages

2. Email Server

For sending and receiving email

3. FTP Server

Use for moving File over the network

Web Servers

Web server is a program that uses request form the browser to serve files that create web pages to users in response to their requests.

Example: NGINX, Apache and Microsoft IIS and…

also in the server, you can store the data in Database

Database

Database software is a collection of information that is organized so that it can be easily accessed, managed and updated.

Example: MySQL, MongoDB and…

There are two types of database

Structural Database

Follow the structure like Schema. Also called as Relational Database. It is highly organized and easily understood by machine language. Example: MySQL

Unstructured Database

You can store unstructured data it means to have no schema. It may be textual or non-textual, and human- or machine-generated. Example: MongoDB

So now you able to understand the Website, Web browser, and Server. Watch this video to know more about “How website work?”

How to Start Web Development?

1. Front End Development

It is also known as client-side development is the practice of producing HTML, CSS, and JavaScript for a website so that a user can see and interact with them directly.

The practice of converting data to a graphical interface.

If you want to start your career in the web as a Front End Developer then you need to learn:

Core Languages

HTML, CSS & JavaScript

Front End Frameworks/Libraries

Angular.js /Angular, Vue.js, React.js, and Bootstrap

2. Back End Development

It also refers to server-side development. It is the term used for the behind-the-scenes activities that happen when performing any action on a website. It can be logging in to your account or purchasing a watch from an online store.

Backend developer focuses on databases, scripting, and the architecture of websites.

If you want to start your career in the web as a Backend Developer then you need to learn:

Core Languages

JavaScript, NodeJS, PHP, Python & ASP.net…

Back End Frameworks/Libraries

Express.js, Django, Rails, Laravel and…

Database

MySQL, MongoDB…

3. Full Stack Development

Full-stack developer deal with Front End as well as Backend development — meaning they can tackle projects that involve databases, building user-facing websites, or even work with clients during the planning phase of projects.

In Full Stack Development you can find two types of profile

MEAN Stack Developer

MEAN Stack developer deal with the following technologies:

1. M: MongoDB
2. E: Express.js
3. A: Angular.js /Angular
4. N: NodeJS

MERN Stack Developer

MERN Stack developer deal with the following technologies:

1. M: MongoDB
2. E: Express.js
3. R: React.js
4. N: NodeJS

Got questions or feedback? Let me know in the comments! or you can follow me on Github, LinkedIn, and Twitter. Thanks for reading! Hope the information was helpful.

Happy Coding!