So I want to take IT as my career

With just only two letters IT is a massive career to get into. As technology becomes the most ever growing facet in modern life it makes logical sense to take up a career in this field. Before handling this colossal beast, I always advice that people that want to venture into this field should know certain things.

Firstly the are two major aspects to deal with mainly hardware and software. In this post I’ll be giving a simple illustration on the most easiest component of sotware development. To be exact, we will build a simply web page, that will give someone that has no clue on what to expect in this career, to have something to stand on. So expect to get an idea on the art of software development. In software development we commonly use what can be referred to as programming languages to formulate certain types of solutions. Kind off like how you would stereotype aggression from the Zulu language, humor from Spedi, loudness from Sesotho and sceptical sophistication from isiXhosa. Okay maybe I am stretching it a bit but it does work similar. The are languages that are used to run mobile solutions like Android. Desktop language solutions, Java and web language solutions, PHP. In our demo we will look into Hyper Text Transfer Protocol (http), which despite the debate is protocol language that formats the diplay of all content rendered through a browser.

So if you load it through a browser (chrome, safari, firefox, internet explorer) then http is what it, was formatted with, for display.

Ideally you would need to download some good softwares that are used to develop in the particular software language. In the case of web pages you actually can do the development using simple notepad, that comes installed on your PC. Open notepad then click through on File then on the drop down click through on Save As. Then navigate to the directory that you want to save your first website. Once there you will be required to change file Save as type to All files from the default Text Document (*.txt). Then on the File Name, you will be required to name the file and add the extension at the end(.html). The extension will give the file web page type. So lets label this file index.html. Once you have done this, clicked save button and feel free to navigate to the saved directory to find your file, which should be a web page type. When you click it open and it uses a browser then you know everything is working as it should.

Now you will notice that the screen is blank though. Now to put content on our page.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="This is a demo web page">
    <meta name="author" content="Tshepo Makhaola">

    <title>First Page</title>
  </head>

  <body>
  </body>
</html>

This code forms as the skeleton to a webpage and everything that is in between a > sign and the > sign, are referred to as tag elements. Each type of tag element plays a specific role. In this demo page we will have 4 tag elements to focus on. Title, body, H, Div

Title refers to the title that will be displayed on the browser tab. The body being the element that carries all the content of a page. H tag being the tag you commonly would use to create headings and the Div tag being the tag used to create anything else that you want to place on your web page.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="This is a demo web page">
    <meta name="author" content="Tshepo Makhaola">

    <title>First Page</title>
  </head>

  <body>
    <div>
        Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </div>
    
  </body>
</html>

You are free to download the following zip to see what kind off cool stuff you can come up with. Notice that the is now link tag which I have added. In this case it is used to access the free CSS framework known as bootstrap. and what is CSS you may ask? well its used for styling the content. Otherwise it would look like one long book. Read more on this link.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="This is a demo web page">
    <meta name="author" content="Tshepo Makhaola">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <title>First Page</title>
  </head>

  <body>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>

    <div class="container">
      <div>
        The are pretty much two major things that I was on the look out for when building this plugin. One was to use the update_options function to store the phone number in the backend. Two was to use the whatsapp api to perform a javascript call and everything would work.
      </div>
    </div>

  </body>
</html>

You would note code with notepad under normal circumstances. Here are two softwares you could use to code that come for free.
Atom and Visual Studio Code