If you are a beginner who is stepping into web development or technical arena and if you want to understand the technologies behind it, this will be the ideal blog for you.
Without a further due, let’s get straight into tech stuffs…
Well, when it comes to web servers, it can actually refer to two different things, the physical web server itself and the web server software. So a physical web server is literally just a computer, but it’s more specialized and designed to serve up the web pages. A web server software is the actual software that’s on the web servers that actually handle each individual web request (GET, POST, PUT are some of them and you will learn them when you get going).
So for instance,
you will see different things in this figure. So first is the client server architecture. The client is your web browser, so it may be something like Google Chrome, Safari, Internet Explorer or Firefox.
Anyway, so those are your client side in a web application and when you actually request data, what you access is the server. So the client and server interaction happens. So you will get to know about client side development once you go through this blog, so be alive, lot to come from the blog.
As of the figure 01, which it’s how the client server model works in high-level. So essentially what this is, that you’ll have the physical web server that has an operating system on it just like any other computer, it might be Linux, Mac OS or Windows and then you’ll have web server software installed on top of that. It just depends on which technology you want to go with since there are many alternatives available.
What’s a ‘web development stack’ you might be wondering since you are a beginner? Well it’s essentially just a group of technologies that you use to create a website. Website! Is that an uncommon word for you? Can’t be… right?
The technologies are rising day by day. New technologies appears by providing many functionalities for the developer to make their lives easy. So there are many tech stacks used by the software companies to implement their websites. In order to create fully functioning web site, developers use tech stacks like MEAN (MongoDB, Express, Angular, Node.js), MERN (MongoDB, Express, React, Node.js), LAMP (Linux, Apache, MySQL, PHP) and so on.
We may not go deep into these technologies in this blog but just keep in mind these are some technologies used to create fully functioning web sites. So as the industry is growing day by day, sticking in to one technology will not keep you alive in the industry. So, the developers should adhere with these bundles of technologies with their requirements and resources to update and develop the systems.
So when we talk about a web development stack, it can mean different things to different people. These are many development stacks that you can use and also you can switch out components and technologies based on the requirements. So it’s really about picking up the technology that works for your website or your web app depending on what you want to do.
What is HTTP? you might have seen ‘links’ right? Well, it actually stands for Hypertext Transfer Protocol. Now what’s a protocol? a protocol is essentially a standard used with computers and different technologies in order to communicate with each other. It’s kind of like how we speak different languages like English, Spanish, French or Sinhala. It may be an inconvenience to communicate if someone speak me in different language which I don’t know. So a protocol handles that kind of task.
So, HTTP is a standardized way for transferring website data and handles requests, and then responds with data. For instance, you might make a HTTP request to a server, and then it responds with relevant website information. Some common, HTTP requests include GET requests which are used to receive content. So when you’re opening a webpage, and you’re going to Google, you’re making a GET request. A POST request is generally used to make new content. A PUT request is used to update existing content. Also, there’s DELETE request type which is used to delete content. So it’s pretty straightforward. The idea is that when you make a request, the web server response with header information. And also the server provides us a status code. It contains the current status of our request. If you’ve ever heard of 404, that’s an example of an HTTP status code. And then, if it needs to serve up a webpage, it’ll respond with some website content as well.
Okay, now what is HTML? HTML stands for Hypertext Markup Language, and it’s the markup language behind every single website. HTML consists of different HTML elements, such as images, paragraphs video players and other items on a web page. As of the figure, it includes some HTML tags which we can use to structure the web page we are going to create.
So, it’s the code that actually generates the webpage.
After finishing the structure of the web page, we have to pay attention on adding styles for it. There, we need CSS (Cascading Style Sheets). CSS is the language used to describe the presentation, including colors, layout, and fonts, of Web pages. It allows the presentation to be adapted to various device types (mobile devices, tabs, laps) and browsers.
As of the image, the CSS styling is handled in varies ways. For example, text in a web page appears to be same when we write with html, so to make it more attractive we can use the elements shown in the Text section to change font styling, font sizes and font colors and so on. And when we want to separate div section with other div elements, we use the elements inside the Borders and Dimensions section. For example, assume that we have two div elements separated for header section and the body section of the web page. In order to have some gaps around the div sections we make use of margin elements. And if we want to have spaces inside a div for repeating div tags, we can make use of padding element.
So, this article barely scratches the surface of web development, but there are so many tools and frameworks out there, it would be impossible to cover them all here. When it comes to front end development most of the trending technologies goes on top of HTML, CSS and JS which I have touched in this blog. I hope that this guide has been informative and helpful for you to get started with web development. So let’s dive further more into these techie stuffs in my next blogs…Stay Tuned!
Thank you for reading…