Web development is a demanding skill as there is rapid development in technology. Everybody is willing to make their services available online. Websites are the best way to reach every corner of the world to provide our service.
There are many tech stacks available in a wide variety of programming languages. Before learning any stack or before building anything, we need to know few basic things. Let's have a look at each of them briefly.
1) URL Structure
Let us understand url structure with an example.
https://paidforarticles.in/member/articles/create
- Protocol: Protocol is a set of rules to be followed by the browser while rendering web pages. They are prewritten in the browser itself. They are many protocols. A few of them are:-
- HTTP: HyperText Transfer Protocol
- HTTPS: HyperText Transfer Protocol Secure
- SMTP: Simple Mail Transfer Protocol
- FTP: File Transfer Protocol etc
- Domain: It is a unique identity provided for our website. There is also a sub-domain which is a subpart of the main domain. A subdomain is used to navigate through different parts of the main website. Examples:
- paidforarticle - domain
- In https://study.shapeai.com-study is the subdomain.
- TLD: Stands for Top Level Domains. They are the root domains. They can be used based on the usage of our website. Examples of TLD's are:
- .com - for Commercial Businesses
- .org - for Organizations
- .net - for Network Organizations
- .gov - for US Government Agencies
- .mil - for Military
- .edu - for Educational Facilities
- .in - for India etc
- Path: It refers to the exact location of the page. It mentions all directories that contain the rendered web page. An example for the path is "member/articles/create." There are anchors which are used for page navigation. They are represented with a prefix of hashtag(#). An example of this is "#urlstructure."
2) Domain Name System
Whenever we type the domain name in the browser, a request is sent to the DNS server. DNS is responsible for converting human-readable domains into machine-readable IP addresses.
Soon after receiving the request, it checks in the recent searches and returns the IP address if found there itself. Otherwise, based on the TLD and by performing some operations, it returns the IP address of the particular domain.
This is how DNS works.
google.com -> DNS server -> 64.233.191.255 -> web page will be displayed
3) Static Vs. Dynamic Websites
Static website: The contents stay the same even though the user is interacting and performing some actions on the website. The contents remain the same for every user. It can also be called a stationary or flat website.
They need manual updation.
Examples: blogposts,documentations etc
Dynamic Websites: They constantly communicate with the server whenever the user interacts. They display different types of content every time a user views it.
This display changes depending on several factors like viewer demographics, time of day, location, language settings, etc.
Updation will be done through the client-side and server-side scripting.
Examples: Netflix, Amazon, Facebook, etc
4)How Browsers Render?
- HTML - Stands for HyperText Markup Language. It is the skeleton of a website. The tags will tell a browser how to display the contents inside them on the website. It is not a programming language. It is a markup language - syntax used to format documents.
- DOM - Document Object Model. It's just HTML. It is nesting one tag inside another one. It is simply a tree representation of parent-child elements of HTML.
- CSS - Cascading Style Sheet. It is used to style websites. There will be selectors, properties, and values.
- CSSOM - Cascading Style Sheet Object Model. It is similar to DOM, but it is applied to CSS. Here is the nesting of selectors.
- RENDER TREE - Combination of DOM and CSSOM.
With the help of an HTML document returned by the server, the browser will construct DOM, and soon after encountering CSS links, it constructs CSSOM. After constructing them, the browser combines them and constructs RENDER TREE.
These are some of the basics that we as developers need to know.
5) How to get started with web development?
After knowing the basics, it's time to start with the development. Firstly learn the fundamentals like HTML, CSS, javascript of web development.
After learning fundamentals, we can learn frameworks that help us in faster web development. We don't need to build everything from scratch. Frameworks and libraries such as bootstrap, tailwind CSS,reactjs, etc
After that, based on the requirements and the project we want to develop, select the backend language.
There are many options like nodejs,php,python(django,flask),java(spring boot) etc
Could you select one and get started with it?
6) Resources
Few Resources from where you can learn development:
HTML,CSS,Javascript - we can learn by reading from w3schools etc
Javascript - https://youtu.be/2md4HQNRqJA
https://www.youtube.com/c/CodeWithHarry/playlists - here we can find playlists of web dev in Django,PHP,Nodejs,Flask
frameworks - we can learn from documentation
Note: Don't fall in tutorial hell. Continuously listening to lectures and reading the documentation but not practicing the things that we are learning isn't good. Hand's on practice is the essential thing. Do read documentation, listen to lectures. Parallel practice what you have learned.
In this article, I've mentioned a few basic things that every developer should know, the building blocks of development, and I've provided few resources from where we can learn web development.
You must be logged in to post a comment.