Introduction To Web Development - Part 1

Hey there!, welcome to my crash course on web development. In this tutorial I'll be explaining quite a lot of things on how to get started as a web developer. This web development series covers two major parts of web development:

1. Front-End Development

2. Back-End Development

Front-End Development

---

  Front-End development as the name implies is the development of the aesthetics of web applications(blog,websites,eCommerce etc),this would mean that when you log on to Facebook.com or google.com everything you see is what is known as the front end of the site you're on. The menus, the sidebar, the elegant headings and general structuring of any website you visit is all done with front-end development and is what front-end development really means.

To get started with front end development, which is where this course will begin. I should probably tell you that in front end there are three major/standard computer languages one must know(for front end development). These include:
  

1. HTML: Hyper Text Markup Language
2. CSS: Cascading Style Sheet
3. JavaScript

HTML

Hyper Text Markup Language is a markup or a text formatting language that allows users to create actual webpages on a website and without it creating websites would not be possible as we know it.

Html is the backbone of the web and its the first of the three front end development languages you'll be learning in this course.

CSS

CSS or in full: Cascading Style sheet is a styling language and like the name implies it is used to add styles to our website. HTML in its native or very basic form isn't so pleasing to look at. But with CSS it is possible to style our websites and add even more functionality (like make our sites responsive) to our websites in a much easier way than we would (if we wanted to use crude HTML methods to do it)

JAVASCRIPT

This is a high level programming language that is used to make sites that have loads of functionality in them. These functionalities ranges from telling the browser what to do when a certain button on a website is clicked, to displaying pop ups to sign up for a newsletter when a new user visits for the first time, even down to adding gaming interfaces on your website. JavaScript is used for all that cool stuff.

HTML

---

HTML stands for Hyper Text Markup Language and its used in making webpages that make up a whole website. It is basically the backbone of the web. Every website you'll find on the web most certainly has an HTML source code. Now don't fret!, Source code as it sounds is simply the actual text of code (written in HTML,JavaScript and CSS) that makes up the site you're on. To see what source code looks like (you'll see it a lot anyways since that's what we will essentially be doing in this course). If you're on a Windows PC , press "Ctrl + 'U" on the page you want to see in source code. For example, if you want to view the source code of this page you're reading on just hit the key combination highlighted above and you should see your browser display this below:

Lines and lines of sophisticated looking text - i know(lol!). I hope that helped bolster your eagerness to get started with me on this one. Alright to start writing in HTML and create sites you'd need a few things so let me go over them:

• A browser : Chrome/Mozilla Firefox/Microsoft Edge (i advice you don't use Internet Explorer)

• A text editor/IDE (Notepad / Notepad ++ / Visual Studio Code /Sublime Text..etc)

Alright let-me just talk a little bit on the second requirement which is the text editor, if you're on a windows Notepad could be just fine, but there are other advanced editors or editors with much more functionalities like Visual Studio Code that allows developers(programmers) program in all sorts of languages, so it'd give you an advantage if you knew how to use them now regardless of whether its HTML or CSS. I'll be using Sublime Text for this Course (and maybe Visual Studio Code occasionally).

The Basic HTML SKELETON

 Okay let's begin by creating a new folder to store our pages on Desktop. In the desktop right click on any empty area and choose New and then choose Folder or you use the key combinations: 'CTRL + SHIFT + N' Name this folder MyFirstSite. Inside MyFirstSite create new folders namely: 'img' and 'Pages' now still inside MyFirstSite right-click on any empty space and choose New and then choose 'Text Document' : this creates a new text document . If you've done these correctly your folder should like below:

Open up Sublime text after you've installed it and let's get started:

HTML SKELETON

The html skeleton is the basic layout of how an html file should be, and it looks like this:

<!DOCTYPE HTML>

<HEAD>

         <TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

The above shows the basic html layout for any webpage. In order to create webpages using html we must use the html tags shown above i'll begin to explain what each tag does and why the tags are arranged the way they are now:

1. HTML TAG: The html tag is the first tag you see that looks like : <!DOCTYPE HTML> this tag is the parent tag for all other html tags and it is essentially what creates the webpage, without it every other thing wouldn't work.
2. HEAD TAG: The head tag is also an important tag in the HTML skeleton and it holds important tags for a webpage that add some specific kind of data or attribute examples include the title tag(which holds the title for the webpage), Style tags(which hold CSS code for the webpage) , Meta tags(which hold info that search engines use to understand your site so they can rank it in search results)
3. TITLE TAG: As i mentioned in the previous explanation, the title tag is where the title of your page goes. The title is what you see displayed on a tab in your browser while you're on the page.
   
4. BODY TAG: The body tag is the tag where everything on your webpage goes in, everything physical goes in between these tags: text,images,videos etc

These four tags are the fundamentals that make up the basic HTML skeleton. You may have noticed that these tags come in pairs : one opening tag and a closing tag. The opening tag initiates the tag itself and the closing tag is used to end the operation of the tag.

To open a tag we use the less than(<) sign and then type the name of the tag and then finish off with the greater than(>) sign. To close a tag we use the same approach only this time we add a forward slash right after the less than sign (</) and finish off the same way with the greater than sign(>). We must always close each tag we open , else our code may not work properly.

Open up the text document in Sublime Text and lets get started (just right click on it and choose to 'open with' sublime text or better still just open sublime text and create a new file withe the keyboard shortcut:"CTRL +N": and type in the HTML skeleton as I've done above. Next in between the TITLE TAGS type in any title for your page ('index' preferably) so that your code looks like this:

now in Sublime Text go to the file menu and choose to 'Save As' and then from the dialog box that displays leave Change the name to index.html and in the 'Save As Type' option choose 'All files'. This way the computer knows its a webpage , webpages have a file extension of .html or .htm the reason we're doing this is so we can run it in the browser to display our page since the file we originally created was a text file (with the extension of .txt) rather than an html file that can be displayed on our browsers. Also make sure you save it in the same folder MyFirstSite that way your folder should now like as shown below:

You should the new "index.html' file with a thumbnail of your browser beside it. This means the computer recognizes the file as a file the browser can open. You can launch your code by double clicking on the index.html file an it should open up in your browser with a blank page. Why? well this is because we haven't written anything in the <body></body> tag so let's go back and add somethings to our site.
Most likely we would want to add a heading to our webpage, so to do that we will make use of HTML's famous text tags for making headings - the <h1></h1> tag now go to sublime text and type the following in between the body tags

<h1> My First Website</h1>

Next let's see what our code looks like in the browser so Save your files and go back to the MyFirstSite folder and open the html file by double clicking it so it displays in the browser you should see the boldly written text 'My First Website' as shown below:

<h1> isn't the only tag used to make big sized but it is the largest size, so if you want to make an header its probably best to use <h1> , anyways the other tags in descending order include:

• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>

Now let's see what they look like type each tag out in descending order as I've just done and in between each type "My First Website", and then Save and reload the page on your browser, you should see it display the sizes in descending order - this gives you a visual aid to choose which size to use when you work on your own projects. 


Paragraphs And Line Breaks
Alright lets talk about Paragraphs and line breaks before we do that we need some junk text to work with. So go back to sublime text and lets type in some junk text. Now go just underneath the headings we just created.
You can choose to type anything you want or just copy lines of text from anywhere you like but with sublime we can generate this junk text using the <Lorem> tag to use it just open the tag with the less than sign and type Lorem (before you finish typing lorem you should see sublime text suggest it press the enter key the moment you notice this and it will generate some lines of text for you). There's no need to close this tag, just remove the (<) from the rest of the generated text so it doesn't affect other tags. Next copy this text and paste it beneath the first one (do this twice). As shown in the image below.


Save and reload your  page on the browser and you should see the new text you've added display. Now let's say i want to add a new paragraph beneath this block of text, rather than having the text join the existing block of text. For instance if we go back to the editor and leave two lines to type a new paragraph and we type in a new block of text and save and reload . You'll observe that the new text we thought we typed ona new paragraph would not appear to be on a new paragraph on our webpage , rather it'd just add the newly typed text to the existing block. To add a new paragraph we use the <P> tag just before the new block or line of text. So let's use that to add a new paragraph of lorem ipsum junk text. So go to the editor enter to jump to a new line and then type <P> and copy some part of the existing block of text we've generated earlier and paste it directly after or on a new line underneath or beside the <P> tag, like this:


Save and reload your page in the browser and it should move that new block to a new paragraph so keep that while you might seem to be typing with paragraphs and on new lines in the ide the results differ if you don't use the right tags to arrange your text.
Note that the paragraph tag is a self closing tag that doesn't require an ending tag( you could add one but it wouldn't make any difference as long as you don't have another <p>/<br> tag directly after the ending </p> tag) because the computer would recognize the </p> as another paragraph tag on its own and add spacing to any thing beneath it as it would if it were just the <p> tag so if you happen to have another <p>/<br> tag directly beneath it (if you use a closing </p> tag that is) then it'd add two spacing to the text one for the </p> tag and the other for the second <p> or <br> that is after it which isn't the best thing you'd want to see right?. So it's better if you just use one <p> tag whenever the need arises (no need to close it with </p>).

The Break Tag <BR>

 The break tag is used to move to a new line just as the enter key does. So when you want to move to a new line, you'll have to use the <br> tag which is also a self closing tag , just before the text you want to move .

Creating Lists With HTML 

To create lists of items with html you'll need to use tags which come in two forms:

• Ordered List(<OL></OL>)
• Unordered List(<UL></UL>)

 An ordered list is one with bullets or numbering which are in ascending order of counting , this list comes in different types as well e.g numerical listing(1,2,3,4...), roman numerals(i,ii,iii,iv,v...)etc
An unordered list on the other hand make use of bullets that aren't numbered in any way these could be dots,circles or even square listing.

To create a list we must first specify what kind of list we want, (ordered or unordered) we do that with the <Ol></Ol> for ordered list and <UL></UL> for unordered list. After that inbetween these tags is where the actual items on the list goes and each item is added using the <li></li> tag , so overall the general structure for a list is as such:

Unordered List
 
<UL>

     <li>item one</li>
     <li>item two</li>
     <li>item three</li>

</UL>

Ordered List
 
<OL>

     <li>item one</li>
     <li>item two</li>
     <li>item three</li>

</OL>

Task: Create a page called 'article.html' and in it write about yourself and create an unordered list of your hobbies.

We've come to the end of this first part in the next article we will see more html tags and see how to make our site more functional. Thanks for reading ,share this post if you found the article helpful.