Beginner’s Guide to Web Development - rohit120582sharma/Documentation GitHub Wiki
How Does a Website Work
Websites require two key components to function: a client and a web server. Clients are any web browser or device that’s used to view and interact with a website. All of the files and data associated with displaying a website on a client are stored on a web server.
References
What is a Website?
A website is a collection of individual documents and files made up of text, graphics, colors, links, and formatting that come together to create a complete user experience. Websites are also usually associated with domain names, like https://www.yourname.com, that explain to your computer where all of the files that are necessary to display a website are located.
What is a Web Browser?
A web browser is a computer application capable of downloading and displaying the files and components that make up a website.
What is a Web Server?
Websites and their associated HTML documents and files are stored on computers called web servers. Web servers must be able to receive requests from a user’s web browser and send the necessary files back to them to display a website.
The languages and technologies used to manage incoming user requests for website files and handle the organization and storage of user data are often called server-side languages.
Writing Your First Webpage
Once you’ve got an idea for the kind of web page you want to build, you’ll need to start writing some HTML and CSS.
HTML
HTML (Hypertext Markup Language) is a markup language that was created solely for making web pages. HTML is a universal set of instructions that every web browser is capable of understanding.
HTML is used for arranging content like text, images etc on a page. HTML code is stored within documents with the file type .html that your web browser uses to know precisely how to display a web page. Collectively, the HTML documents and images used to create a website are sometimes referred to as assets.
Styling the Page
While HTML is a markup language used for arranging content on a page, CSS is a separate language for changing the style of how those tags are displayed.
Server-side Languages
The goal of a web server is to distribute the correct HTML files to the clients requesting them, maintain databases, and validate user inputs like login credentials.
In order to display data on the screen, you would need a programming language that runs on a server. Such a programming language would take care of creating, reading, updating, and deleting data from a database, which is where the data are stored. Languages that do this are referred to as server-side languages. Server-side languages are an integral part of both the online shopping experience and the entire web.
For ex:- Server-side languages are used to compare the login information you provided with their database of existing users, and either confirm or deny that the login information you entered is correct.
Making Web Pages More Interactive With JavaScript
Nowadays, web pages are considered more “dynamic,” since they’re capable of responding to user input in real time. Things like the ability to “favorite” social media posts or update the inventory in a shopping cart in an online shop are examples of dynamic content — they don’t require the browser to re-download the page to display changes.
The language capable of providing much of this interactivity and responsiveness is called JavaScript, and it runs directly inside of the web browser. All modern web browsers are capable of interpreting the JavaScript language.
JavaScript is also used for form validation or verifying the information a user enters into a form before it can be submitted.
Deploying Your First Website
Once you’ve put in all the hard work of creating a website, you need to get it on the web so people can navigate to it and access its content. This process is called deployment.
- Finding a domain name
- Finding a hosting service
- Uploading files with SFTP
- Deploying server-side applications
Single-page Applications
The most notable difference between a regular website and an SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX — a way to communicate with back-end servers without doing a full page refresh — to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.
They offer more dynamic interactions resembling native mobile and desktop apps.
Mitigating Cons With Server-side Rendering
Most modern JavaScript frameworks are working on ways to handle server-side rendering of SPAs — meaning the user would get a fully populated page when the SPA is loaded for the first time, instead of, for example, seeing a loading indicator.
Angular
Angular is a front-end framework built to ease the burden of writing complex apps while keeping everything testable and organized.