Front-End Web Development - The 3 Building Blocks

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.

Comments (0)

Rated 0 out of 5 based on 0 voters
There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Rate this post:
Attachments (0 / 3)
Share Your Location
© 2019 The Code Crypt. All Rights Reserved.