HomeWeb Designing

Learn Web Designing for FREE – Basics of Web Designing ( Lesson 1 ) 

Learn Web Designing for FREE – Basics of Web Designing ( Lesson 1 ) 
Like Tweet Pin it Share Share Email

Hello, What Not Blog (WNB) readers this is our first post and in this blog, I am going to teach you basics of Web Designing & Blogging for FREE. I am creating a complete series of tutorials where you can easily learn step by step through tutorials .

Basics of Web Designing

To learn Web Designing you must first have basic knowledge of what is Web Designing, what are the technologies required to learn and many basic things. So in this post, we are covering the basic terms.

Internet: The network which connects the whole World that network is called Internet. It is provided by Internet providers like Airtel, Reliance, Beam Network and many more.

Intranet: The network which is developed for the Large Companies, Organisation, MNC for high-security reasons. This type of network is called Intranet.

HTTP:  Http stands for Hyper Text Transfer Protocol. Http is a protocol to retrieve the websites from the HTTP servers (or) web servers from online. All web servers can understand only HTTP request and they are sent to web browsers as plain HTML documents.

W3C:  W3C stands for World Wide Web Consortium. This is an organisation formed by ‘Tin Berner’s Lee‘ to maintain web standards. Xhtml, CSS etc are some of the few technologies introduced by W3c.

Domain: Domain means the name of your website. For example, if you want to build a website on your name then domain name will be www.yourname.com. It’s is an identity of your business. It is as important as a person having a name. In the same way, your business should have online identity.Basic charge usually cost you 10$ from Godaddy.

Hosting: Hosting is something where you will host your domain and files. After you’ve registered your domain, the next thing you need to do is buy hosting and host your domain name in the rented space.

Hosting means renting a space on a server so that it can serve your website to the World Wide Web (WWW); this is often called ‘hosting’. Companies that provide this service are called hosting companies and some of the top companies are Bluehost, Hostgator.

Hosting can cost you around 70$ .

So with total 80$ you can launch a website if you learn web designing or else for building website you need to pay to web developer according to requirement.






CMS:  CMS stands for  Content Management System. A content management system (CMS) is a software application that is used to create and manage digital content. CMSes are something where we can easily develop websites and update content easily.

List of CMS which have the Php Backend

  • WordPress
  • Joomla
  • Drupal
  • Zend Framework

Web Browsers: Web Browsers are something which help to browse websites and content on the Internet. Web browser will send the HTTP request to web servers. Some of the famous web browsers are:

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Opera

Static Website: A website which is not updated automatically that type of website is called “Static Website”. We need different technologies to develop a static site.

  • Html
  • CSS
  • Javascript
  • Jquery (Ajax)

Dynamic Website: A website which is changed (or) edited automatically by the code is called “Dynamic Website”. We need below technologies to develop a dynamic website.

  • Server-side Script Language
  • Webserver
  • Database
  • PHP
  • MY-SQL
  • Asp
  • IIS
  • Java
  • Tomcat
  • Oracle

We cannot develop Banking Applications using PHP.

Advantages of having a Website?

  • We can reach the people throughout the World.
  • We can grow our business online.
  • We can promote ( or ) Sell the product online.




Below are the requirements to start learning web designing online.

Internet: You should have a dedicated Internet Connection to learn and practice web designing.

Editors: This is where we usually write our code to build web pages. Some of the top online editors used by top developers are Sublime, Dreamweaver, Notepad, Notepad++ . First of all to write html markup you need is editor. There are many editors available and you can choose which one you are comfortable with. As a beginner you can opt for notepad or notepad++ . When you are little confident you can opt for Dreamweaver, Sublime because they will have inbuilt tags.  This editors will suggest with the syntaxes. But this way you can’t learn on your own . So choose notepad++ or notepad.

Dedicated Time: Yes, what you heard is right. You need dedicated time to learn and practice web designing. If you practice daily you can learn within a short span of time.

HTML: HTML stands for Hyper Text Markup Language.

HTML is a subset of SGML ( Standardized General Markup Language)

We can create “web pages” or Html Documents by using HTML.

All HTML files or web pages are interpreted by web browsers.

HTML is not a case-sensitive language. It means you can either enter capital letters or small letters but small letter is preferred according to XHTML rules.

Ex: <p> </p> or <P> </P> you can write code either way but small letter tags are preferred.

HTML documents or Web pages can be created by using following text editors.

Ex: Notepad, Notepad++, Dreamweaver, Sublime

All Html documents should be saved with the extension of .htm or .html

HTML page basic structure:

<head></head>: This is called Header tag

  • This is called Header tag and is the most important place to embed different languages like CSS, Javascript, Jquery etc.
  • We can place the meta tags in the header section of the HTML documents.
  • Search Engine spiders will give the importance of the header part in indexing the pages into their database
  • <head> is called header opening tag
  • </head> is called header closing tag
  • If we open <head> tag then we should definitely close with </head> tag

<title></title>: The title should be related to that page content.

For example, you are creating a new web page related to ” Learn Web Designing ” then you should enter that keyword in title tag,  like this.

<title>Learn Web Designing </title>

SEO Note: We can target a particular keyword by placing the keyword in the title tag like we did above. Google spiders will index the page using ” title” tag.

<body></body>: This is the section where the coding part is done. You can place the tags and code in between this tags.



<h1> This is my first sample code </h1>

<p> I want to learn web designing </p>


 How to save your HTML file:

We are writing our first HTML code but we also need to save it. To save your web page

  • Click the File menu at the top of Notepad (or any Text Editor you are using.)
  • In the File menu, select Save As, then Save As dialogue box appears.
  • Create a new folder in your system to store all our web pages we are creating, and name the folder as Learn Web Designing). Check the below screenshot:

How to view Web Pages:

Save the file as “filename.html”

Open it by double clicking on it. Your file will be opened with the default browser you are using.

Over to you: 

So these are the basics of web designing which you need knowledge, to start with. If you have any doubts you can comment below in the comment section.

If you found this article useful please do share with your friends so that they can also learn web designing for FREE online.