Getting Started With Web Technologies…
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…
First we will understand what a ‘web server’ is. And then we will dive into some tech stacks on the web development and then we will briefly discuss the base for all those when it comes to front end web development obviously HTML, CSS and JavaScript and what actually they mean.
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.
Let’s move on to the next basic technology which has been popular for last decade or so. Before that, what is ‘client side programming’? It’s simply, programming for the client side. So in our instance, our client is our web browser. So if you have a web page that’s already been loaded, and you want to manipulate that content. You might want to drag and drop, you might want to make a GET request to a server without having to reload a webpage. If you’ve gone on Twitter, Google or if you browse the internet, you should have seen websites that utilizes JavaScript. Okay, so, JavaScript is an example of client side programming.
Now we’ll remind that HTML is used to organize the web page while CSS is used to style it to look elegant and get users interacted. Then we use JavaScript to handle the things you want to do in the website. It’s used to manipulate the web page after it’s already been loaded. Alright?
Does JavaScript have anything to do with Java? Simply ‘NO’. They do share some of the common c syntax and similar naming conventions, but other than that they’re not related. In fact, Java and JavaScript are just like you are having a car and a carpet. You can have carpet in your car but other than that they’re really not related. Now as I mentioned earlier, Java Script is a client side programming language. There are some new extensions to this because there are new technologies coming out such as react, angular to develop front end which is a combination of HTML, CSS and JavaScript. But in general, in the traditional sense, JavaScript is strictly a client side programming language. That’s it for JavaScript.
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…
