To start with Web Designing, need good Code Editors, patience and lots of practices. The more you do practice the more you learn, even the mistakes give you more knowledge. So, lets start learning.

First of all we need a good code editor. Here are the list of good code editors which I use:


TEX EDITFor Mac computers. You do not have to install it as it comes with it.

NOTEPAD++For Windows 10. It is FREE. To download click HERE The NOTEPAD which comes with windows 10, does not work for web programming code.

BRACKETS: Works for both Windows and Mac. It is also FREE. It is very powerful and give you live preview that you do not have to refresh the browser every time you edit the code in this editor. To download this code editor click HERE or go to website address

CODEPEN: It works on everything, Mac, Windows, any Smart Phones, iPad, Notepad etc. This is for practicing the codes and it is indeed very handy because you can use it anywhere and anytime. This code editor also gives live preview and its FREE also but, if you want to sign up for pro version then you may pay monthly for it. This is my favourite because I can  practice any time while I have no access to my computer and another good thing I like about it that it saves all my progress and pages I have created for my practice and also it tells where and what error I made. You do not have to download it because it is online access. So click HERE or go to its website address:

THIMBLEThis code editor is also my one of favourite and it is the same as CODEPEN and it is also FREE. But you may have to pay for pro version. So click HERE or go to its website address: editor is from MDN web docs its website address is This site is one of my favourite site where I get lots of help.

If you are learning PHP code then you need local server XAMPP or WAMPSERVER installed and setup in your computer as XAMPP is a most popular. I am also using XAMPP. It is FREE. To download click HERE or go to its website address:




It is a language which describes how the pages of text, graphics, images, videos, and other information are organised, formatted and linked together.


Web Browser is a computer program which interprets HTML commands to collect, arrange, and display the parts of a Web Page.

Now, it is time to know the structure of HTML5 to write codes for designing Web Page.

Default HTML5 page to write codes:


<!DOCTYPE html>

<html Lang=”en”>


               <meta charset=”utf-8″>

               <title> some text </title>






We have to write this HTML page structure on every HTML page. Without this structure or any spelling mistake, the Browser will not be able to display the page.

Now, I am going to explain you the Definitions and Usage of HTML structure tags then later we will make our first web page. Make sure you have downloaded code editor on your computer.

Definitions and Usage of HTML structure tags:

All the tags have Opening <…> and Closing </…> Tags except <!DOCTYPE html> and <meta charset=”utf-8″>, there are few more which I will explain later when I explain about more Elements and Attributes.

<!DOCTYPE html>

It is an instruction to Web Browsers that what version of HTML is written. Its case is not sensitive but, it must be written first on top of the page. It has no closing tag.


HTML is a container of all the html elements and attribute, means it is a house and all the elements and attributes live in it. It tell the Browser that it is HTML document page.


This element contains information about metadata such as <meta>, <link>, <title> and <style> etc. It is placed in between <html> and <body>.

<meta charset=”utf-8″>

Charset is a “Character Set”. It is an Attribute written within “meta” element. It specifies the character encoding for the HTML document.  This tag does not have closing tag.


This tag is an Element and required in all HTML pages. It has opening and closing tags.

It defines the title in the Browser in the toolbar.

It shows the title in the browser’s favourite.

It shows the title on the browser page’s tab.

This tag must be written in all HTML pages. Without this tag the document will not be validated as HTML.


This is an Element. It is a body of the Document. It contains all the contents such as TEXT, HYPERLINKS, IMAGES, VIDEOS, LISTS, TABLES etc. means that, basically we do all the writing, placing images and videos, everything we do within this element.

Have you downloaded your code editor now?

If you are using Notepad++ follow the steps below or Click Here for more help using Notepad++.

Before you begins you need to create a file. Let me help you in this first.

On your computer Document Folder or your Desktop Folder which ever you prefer:

  1. Create a Folder, name it: Demo
  2. In folder Demo create a file and name it: index.html (file name is index and when you save as, you must write .html after index ).
  3. open this file index.html in your code editor.
  4. start writing the code I have written below.
  5. after writing the code you must save it ( you must save it, without saving the work the browser will not display your page.
  6. If you are using code editor Notepad++, after saving your work click on RUN then on Drop Down Menu click on your chosen Browser like Microsoft Edge or Google Chrome. I normally use Google Chrome.
  7. If you see any error on page or it is not displaying properly, then check the spelling of your coding tags and any special character in case they are missing like < > / , ” ! = -.

Let’s write first web page. :


<!DOCTYPE html>

<html Lang=”en”>


               <meta charset=”utf-8″>

               <title> MY FIRST PAGE </title>



Good Day World, I am a new Web site Designer.




You will see that the content  MY FIRST PAGE between the <title>  </title> displayed on the TAB of Browser and the content ” Good Day World, I am a new Web site Designer. ” between <body>  </body> displayed within the Web Page.


Well? this is the most important to design Website. All the website pages depend on Web Page Structure and I will explain this later.

Click Here for More Help Using Notepad++ ⇒

to be continued, Please be Patience

Thank you.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.


%d bloggers like this: