Learn to code

We are in the technological age, things are automated, you can chat with a bot and there is a lady in your smart phone that tells you how to get to where you need to go.

with so much of our lives dependent on technology, more precisely computers, wouldn’t you like to know how these applications and tools we use are built? We at e-regardless believe everyone should learn how to code, regardless of your profession or age. As a result, this is a series on learning how to program/code, or at least see what programming involves. It is for total beginners, if you have never seen a line of code, this is for you. All you need is a computer with a browser and a text editor like Notepad.

What is programming? I won’t use definitions, I also won’t try and explain the theory behind it, yet. Over time, you will come to understand what makes up programming an why it is such a powerful skill to know even if you are not a programmer.

In simple words, programming is telling the computer what to do, and in some cases, defining how it does that. A computer is really good at working with numbers, but we people, not so much. Even the people who are good math can’t compare to the speed of a computer when it comes to calculations. This is the biggest thing to remember, and since computers are good at numbers, that allows us to use logic to tell the computer what to do in which cases. Anyway, enough with the talking, let’s get started.

Most people have visited a website, whether on their phone, or on a PC. We will be creating a simple web page. For this all you need is a browser like Internet Explorer/Google Chrome/Firefox/Safari/Opera mini there are many browsers you just need one and a text editor like Notepad/Notepad++/Gedit/Kate then we can get started.

Okay, so in programming there are programming languages, we use them to write commands that the computer can understand. In this case, we will be using something called HTML, this is short for HyperText Markup Language. I will explain more about it later. HTML is used to create the web pages that websites are made of. Let’s see what it looks like.

Step 1 :

Create a new file with your text editor, once the blank new file has been created, save it with the name index.html the .html part(called the extension) must replace the .txt part which would typically mean that a file is a text(txt) file. We want an HTML file, and this is our way of letting the computer know that the file we are creating is for a web page and is to be open by a browser. After saving this file you should see the icon changing to one that shows a browser, now the computer knows what kind of file this is.

Index.html file created from text editor
Index.html file created from text editor

Step 2 :

Open the file we saved(index.html), type the following
<!DOCTYPE>
    <HTML>
    <head></head>
    <body>
    </body>
    </HTML>
Then save the file. We have written our first 6 lines of code!!! But what does all this mean, let’s break it down.

The first line <!DOCTYPE> I will come back to later, you can ignore it. The second line tells the computer and browser reading the file we created that this is where our HTML code starts and the last line </html> tells it this is where it ends. notice the / before the HTML at line 6. This signifies closing. Each HTML file we write needs a head and a body, and you might guess what the tags(that is what they are called) on lines 3, 4 and 5 mean. On line 3, we tell the browser that this is the beginning and end of our HTML head, you can have these on separate lines it does not matter. Then on lines 4 and 5 we tell the browser that this the beginning and end of our HTML body, remember the </body> tag means the end of the body and the <body> tag means the beginning, we will add information in the middle.

Now, if we save our file, then we double click on it, or right click then select the option to open with a browser, you should see a blank page, that is no fun. Let’s add something to it.

What your file sould have
What your file should have

Step 3 :

 Open the file again with a text editor. Now After the body tag, type the following. <h1> Hello World! </h1>

So now you should have this
<!DOCTYPE>
    <HTML>
    <head></head>
    <body>
    <h1> Hello World! </h1>
    </body>
    </HTML>

Save the file, then open it using a browser again. You should see the words Hello World! on the web page, well done on writing you first web page.
What we just did is tell the browser, which is responsible for reading our HTML code and showing it that in our body, we want to show the words “Hello World!” written in a heading. That is what the <h1> is for. Curious why it is called h1? Good, let’s do this.

Step 4 :

Under the line with hello world!, type the following in our index.html file
<h6> Coding is awesome </h6>
Giving you
<!DOCTYPE>
    <HTML>
    <head></head>
    <body>
    <h1> Hello World! </h1>
    <h6> Coding is awesome </h6>
    </body>
    </HTML>

Now save the file and open it with a browser again. Can you see the difference in size? This is caused by the numbers after the h. The <h1> and <h6> are called heading tags. They tell the browser to display text with headings of sizes from 1 to 6. 1 being the biggest size and 6 being the smallest. Play around with the other sizes and see what happens.

Don’t forget that just like with the html, head and body tags all other tags like the heading tags need an opening and closing tags, there are exceptions, but those we will deal with later. So always make sure to open and close your tags, you close your tags with a / inside the corner brackets.

We have added another heading
We have added another heading

Step 5 :

HTML has a lot of tags that used to build up a web page and structure the content in it with. Simple examples are <p>, <strong>, <div>, <i>, <link>, <img> etc
We will start playing with this on the next lesson. In the last step for this lesson we will put in some more information on our page. information about ourselves.

Open up your index.html file again. Let’s add the following lines

<!DOCTYPE>
<html>
<head><head>
<body>
<h1> Hello World! </h1>
<h6> Coding is awesome </h6>

<h3>About me</h3>
<p> I am Cebo, I like coding. I am part of the E-regardless team. This is an awesome team to be a part of. I like doing the follwing list of things.</p>
<ul>
<li>Learning new things in the tech space</li>
<li><strong>Playing</strong> soccer</li>
<li>Making cool looking websites</li>
<li>Reading up on cool stuff on <a href=”http://Quora.com”>Quora</a></li>
</ul>
</body>
</html>

Obviously replace what I wrote with whatever you want to write, then save the file and open it in a browser. Pretty cool huh?

What have we added? well, we used a h3 sized heading to write “About me” then we used a paragraph tag to explain a bit about ourselves. A paragraph tags is used to group text so it looks nice and formatted.

We then used an an unordered list tag(<ul>), inside the unordered list group we added bullet points using the list tag (<li>). Try using an ordered list by replacing the <ul> with <ol>

In the list tags we used some cool tags as well, we used the <strong> tag to make words bold, then we used the <a> tag to create a link to a website.

Final_edit

 

This is what we should have on our browser
This is what we should have on our browser

So what have we learned? We have learned that programming involves telling the computer what to do, and using a special language for that. There are a ton of languages out there for different uses. We will go through some of them later on. However, if you want to do some reading, read up on some of the following. Python, Java, C++, C#, Cobol, Assembly, JavaScript there are too many to list, but don’t get worried.

We have also learned that with the use of a language and some rules, we can get the computer and some software(in our case the browser) to do what we want it to do. There is a lot more we can do, obviously one step at a time. Last, but not least, we have learned that programming is not something scary, anyone can learn it, it just requires some effort, dedication and patience…

Play around with code we have and see what you can create or break.

Feel free to ask if you have any problems, or run into any issues..code on!

1
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail