HTTP was designed for the web. It was created to fetch HTML documents and show the response to the client. HTTP stands for Hypertext Transfer Protocol. Think of HTTP as the messenger of the web.  It is based on a TCP/IP protocol. HTTP requests are used to deliver content to your pages from a server. The server is where content is pulled from. The client, which could be your phone, tablet or computer makes an HTTP request which goes through your ISP (Internet Service Provider) and then goes to the server. Once the response is handled, the client is disconnected from the server, so there is never a permament connection between the client and the server. Multiple HTTP requests can be sent at one time, but each one is independent of each other. There is no relation between them unless some type of stored data is sent such as session ID's cookies.

HTTP is a stateless protocol which means that the connection between the client and the server is lost. The server will have no knowledge of the previous request. If information is needed again, a new HTTP request gets sent with the necessary information. Now this doesn't mean that information can't be stored. There are plenty of websites and web apps where a users progress needs to be tracked or form data needs to be stored. This can be achieved through HTTP cookies, server side session data

How does the web work?

Here is a basic example of the life cycle of an HTTP request.

There are three main aspects to making an HTTP request. The client, the ISP and a web server. You are the client and when you establish a connection with the internet, you get an IP address. Every machine connected to the internet has an IP address. If you don't know what yours is, you can Google 'what's my IP' and it'll show you your IP address. So let's say for example you want to purchase something and you go to http://www.acoolwebsite.com/products/shirt.html. You send a request to your ISP which does a DNS lookup. It needs to find what the IP address is of the server which is nothing more than a large data repository, that the website is on so it knows where to direct your request. Once the request is sent to the server, the response is sent back to the browser. The browser will show any kind of content. But how does it determine how to parse the data coming back from the server? In the response is a mime type which describes the media type of content being served. For most web pages coming back, this will be a text/html mime type. Once the browser has that information, it knows how to parse the page. Now it gets your index.html or index.php page and from top to bottom it starts to parse the page until it finds another asset such as a JavaScript file or CSS file. 

For each asset that the browser finds, it sends a request to the server to get that asset. For example, if the browser is requesting a CSS file called styles.css, it'll send that request to the server and the server will send back a response with a content type of text/css. Now we know that will be a CSS file and it will be parsed accordingly. In theory, you want to have the smallest amount of CSS files and JavaScript files possible, as each one is considered an asset and will require a new HTTP request. Remember earlier on about how HTTP is stateless and each request is treated individually. After each asset request, the client to server connection is opened, then closed after the response is received, then once a new asset is requested, the connection is re-opened. Since each of these assets require a new HTTP request, this is why a majority of JavaScript files are put into the footer of web pages. This allows the site to render on screen before JavaScript and JQuery are loaded to give a better and faster user experience.

Another way HTTP responses can be sent is through an XHR or XMLHttpRequest which is a JavaScript Object that allows you to send and receive data to the server after the web page has loaded without reloading the web page. This is also known as an Ajax response. I'll cover this more in depth later on in future posts.

A HTTP request contains two things. Headers and possibly a post body. Here is an example of what request headers could look like. In Chrome, search for any website, then right click > Network and click on a name. You can then view the headers and response from  your most recent request. The two most important responses in the headers are the content-type and status. Status is most useful when running JavaScript. Status codes in the 200's is ok, 300's means you are being re-directed, 400's means there was an error content was not found and 500's means something in the server broke. 

 

  1. 5 / 5
  2.   3 Comment
  3.   556 Views
  Jennie Buchanan — Your helpful tips for losing some special effects. We shared various creating Wiki pages beautiful pictures. I would like to thank you for communicating these tips. I decided to try it at home. Simple Tips to Update ......
  Greg A — Good material, explained in a step by step fashion that ties the information together cohesively. I found this quite helpful as a beginner. Going to read up on your other topics as well. Thanks!...

The demand for web developers is high right now.  According to the Bureau of Labor Statistics, the projected growth exceeds 27% by the year 2024. Front-end web development is a fun, challenging and lucrative career choice. But what exactly is front-end development?

Front-End Development

When we refer to front-end development, we are referring to the three core building blocks of most websites. HTML, CSS and JavaScript.  All three of these play a very unique and vital role and they all work together to create what you see on screen.  Let's start with HTML.

HTML

HTML is the most basic core component of most webpages and is also by far the easiest to learn. You can begin writing out HTML code almost immediately. HTML provided the structural foundation of a webpage and tells the browser what type of elements it needs to display for the user, e.g., links, images, lists, headings, paragraphs, etc. Here is the most basic form of an HTML page.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Mt First Website!</title>
    <meta name="description" content="This is my first webpage. It's about how to start    front-end development">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
<body>
<div>
   <h1>Hello World!</h1>
</div>

</body>


</html>

The output in the above code would simply show "Hello World!" on your screen. Nothing fancy, but that's what HTML is about. It's not about the looks, its all about providing the proper foundation. But let's say we don't like where the text is positioned at, and we don't want it to have its default color. How do we do that? This is where CSS or Cascading Style Sheets comes in (my personal favorite too!).

The first thing we have to do is add an "id" or "class" to the element that we want to change. These are known in the CSS world as selectors. an ID can be attached to one element per page and a class can be used across multiple elements at a time. Let's take the above code and style it up a bit with some basic CSS.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Mt First Website!</title>
    <meta name="description" content="This is my first webpage. It's about how to start    front-end development">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <style>
     #main-div {
        text-align:center;
     }
     .heading {
        color:blue;
     }
     
     #main-div p {
        color:red;
     }

  </style>

  </head>
<body>
<div id="main-div">
   <h1 class="heading">Hello World!</h1>
   <p>This is cool!</p>
   <p>I can't wait to get started!</p>
</div>

</body>


</html>

Cool!! We just added color to our heading and paragraph and centered up our text with some simple CSS. Let's take it one step further and add some div tags underneath all of this and put them into columns.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Mt First Website!</title>
    <meta name="description" content="This is my first webpage. It's about how to start    front-end development">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <style>
     #main-div {
        text-align:center;
     }
     .heading {
        color:blue;
     }
     
     #main-div p {
        color:red;
     }
     
     .column {
      width:33%;
      height:200px;
      background-color:#eeeeee;
      display:inline-block;
     }
     
     .column p {
         color:#444;
         text-align:center;
         font-size:1.2rem;
         
     }

  </style>

  </head>
<body>
<div class="container">
    <div id="main-div">
       <h1 class="heading">Hello World!</h1>
       <p>This is cool!</p>
       <p>I can't wait to get started!</p>
    </div>

    <div class="column" id="column1"><p>This is column 1</p></div>
    <div class="column" id="column2"><p>This is column 2</p></div>
    <div class="column" id="column3"><p>This is column 3</p></div>
  </div>
  </body>
</html>

Now we're starting to get a basic layout made. Easy right?  You can get much more advanced with it and add media queries and additional styling to create responsive layouts for different device screens. This is the power of CSS. What about JavaScript?

What is JavaScript?

JavaScript is a front-end programming language that adds logic and interactivity to your websites and web apps. In recent years, it's also been made possible to use JavaScript for server-side implementation such as Node.js which is gaining extreme popularity. On a front-end perspective, it's responsible for form validation, sending form data to the server, animations, navigations, dropdowns, pop-ups, sliders and so much more. 

Let's add a little bit of JavaScript to our current page to see how this works. I've added a div tag that by default is hidden along with a button. When the button gets clicked, we want that div to toggle back and forth and we can also change the text in the main header of the page. 

<!DOCTYPE HTML>
<html>
  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mt First Website!</title>
    <meta name="description" content="This is my first webpage. It's about how to start    front-end development">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <style>
     #main-div {
        text-align:center;
     }
     .heading {
        color:blue;
     }
     
     #main-div p {
        color:red;
     }
     
     .column {
      width:33%;
      height:200px;
      background-color:#eeeeee;
      display:inline-block;
     }
     
     .column p {
         color:#444;
         text-align:center;
         font-size:1.2rem;
     }
     
     #hidden-div {
         display:none;
         height:200px;
         width:100%;
         text-align:center;
     }
     button {
    
        margin-top: 100px;
        width: 300px;
        background: #4889cc;
        padding: 15px;
        border-radius: 5px;
        color: #fff;
        border: 0px;
        box-shadow: 0px 4px 3px -2px #444;
         
     }
     #btn-container {
         text-align:center;
     }
     #json-output {
         text-align:center;
     }
     #json-output-list {
         list-style:none; 
     }

  </style>

  </head>
<body>
<div class="container">
    <div id="main-div">
       <h1 class="heading">Hello World!</h1>
       <p>This is cool!</p>
       <p>I can't wait to get started!</p>
    </div>

    <div class="column" id="column1"><p>This is column 1</p></div>
    <div class="column" id="column2"><p>This is column 2</p></div>
    <div class="column" id="column3"><p>This is column 3</p></div>
        <div id="btn-container">
             <button id="show-div-btn">Click Me!</button>
        </div>
   
        <div id="hidden-div"><h1>You can see me now! Thanks JavaScript!</h1></div>
        <div id="json-output">
            <h3>JSON Results!</h3>
            <ul id="json-output-list">
                
            </ul>
        </div>
    
  </div>
  
      <script>
      
          document.getElementById("show-div-btn").onclick = function() {
              showDivFunction()
              
          };
          
          
          function showDivFunction() {
              var x = document.getElementById("hidden-div");
              
              if(x.style.display == "none") {
                  
                  x.style.display = "block";
                  
              } else {    
                  
                  x.style.display = "none";
              }
              
              let header = document.querySelector(".heading");
              header.textContent = "We changed this text with JavaScript!";
              
          }
      
  
      </script>
      
  </body>
</html>

This is a very basic example what JavaScript can do, but it is essential for front-end development and it will by far take the most time to learn. JavaScript is a programming language that is extremely popular and in high demand and there are numerous frameworks out there that make it quicker and simpler to write JavaScript code. I recommend to learn JavaScript without using frameworks at the beginning to understand how the language works and understand the core functionality. Frameworks are great once you understand what is going on behind the scenes as frameworks condense a lot of the code so you can do more while writing less.

BONUS! JSON (JavaScript Object Notation)

JSON is a lightweight and highly popular method to exchange data across the web set in name/value pairs. It is not a programming language. JSON can be used to display form validations coming back from the server and displaying the results through a JavaScript Object with JSON. You can also get JSON results from a third party site that offers API(application programming interface) access.  When your site sends an HTTP request to another site, you can get a JSON formatted response that you can use to display the results on your page. You could use JSON to get data back from a weather API or get user data back from your server. Here is an example of what a JSON response could look like coming back from the server to display a users information.

 let users = [
                    
                      {
                          name : "Richard",
                          address : "123 mystreet",
                          city : "nowhere",
                          state : "california"
                      },
                      
                      {
                          name : "Fred",
                          address : "456 mystreet",
                          city : "somewhere",
                          state : "Oregon"
                          
                      }
                      
                      ];
          //Now we can loop through our data with a simple for loop
          var output = "";
                
          for(var i = 0; i < users.length; i++) {
              
                output += '<li>' + users[i].name + "</li>";
             
                
          }
       
          document.getElementById("json-output-list").innerHTML = output;

The JSON output from the above script should show Richard and Fred! 

In front-end development, HTML, CSS and JavaScript all work together to create rich UI's. This was just a very simple example of what can be achieved in a short amount of time. CSS and JavaScript are very powerful languages and with the flexibility of JSON, the possibilities are almost limitless.

© 2019 The Code Crypt. All Rights Reserved.