Want To Create Websites? Things You Must Know Before Beginning!! [ COMPLETE + FREE LESSON ]

Jibraan AhmedJibraan Ahmed February 07, 2018

LEARN HOW WEB-DESIGNING WORKS

howtocodeandmakeourownwebsite-html-css-javascript

Added on : 05 - Feb - 2018

Hello All,
Today I'm going to show you step by step process of doing web designing but I'm not sure if you're going to read this all or just catch the headings due to its length but if you read this article, then you will start making your own websites and easily code in languages below.
  • HTML/HTML5
  • CSS/CSS3
  • JAVA-SCRIPT
From the very basics to the end, we will be discussing all here to learn and create our own websites ! 

 GRAB A CUP OF COFFEE/TEA ENJOY LEARNING !

THINGS WE WILL BE LEARNING BY HEADINGS :
  1. Web page creation
  2. Usage of tags to create html file
  3. How to create headings, paragraph
  4. How to create DIV in html
  5. Use of closing tags/ non-closing tags 
  6. Some in-line Css, internal/external Css
  7. How to get hands on Css completely 
  8. Use of Java-Script on basic functions
  9. Some advance uses of Java-Script
  10. Finally, we will create our Website 
Let's Start Working

What Learning Takes From Me!

 I'm here sharing all my 15 TOPICS I created on WEB DESIGN.
  • Practice makes me more like "codes on hands"
  • I will show you my project I created [ my first site ]

 --------------------------------------------------------------------------------

  • WEB PAGE CREATION :
To create your own web page, you have to know about the extensions i.e. yourpagename.html / stylingpage.css
Open your compiler such as dream viewer or notepad.
saved noteapd file as .html 

PROTOTYPE


Save yourname.css for css file to get created as you can see my file is style !

  • HOW TO CREATE HTML FORMAT :
In this section , we will be using some specials tags to complete the source code required for a html file .

 CODE PROTOTYPE 

-----------------------------------------------------------------------

<!DOCTYPE Html>    // this is latest html = html5
<html>
           <head> // this is the head of body , select name inside title tag
                     <title></title>
           </head>
<body>
</body>
</html>

--------------------------------------------------------------------------

  • NORMAL TAG'S [HEADING + PARAGRAPH] :
 Here we can use some tags to creating headings on our page, how they are build to write paragraphs there are also some tags used for it. let see what we got !
CODE PROTOTYPE


-----------------------------------------------------------------------

<!DOCTYPE Html>    // this is latest html = html5
<html>
           <head> // this is the head of body , select name inside title tag
                     <title>LEARNING HTML</title>
           </head>
<body>
<h1>HELLO WORLD</h1> // h1 means heading 1 .
<h1>WorldTrueSight</h1> //   h1 can be used again and again. h2 , h3 will descrease the size of headings, you can practice for it.
<p>
      You are learning web designing through world true sight , currently there are two content writer. we are trying to give our best to you. 
</p>
// the above example is of paragraph writing !
</body>
</html>

--------------------------------------------------------------------------

  • FORMATION OF DIV :
Since, the home page or any page we are working contains much data which we want to separate from each other, for example of home page : a header a body and a footer in a simple page ! to design them saperately with our needs what is required ? A Div.

 Question :  what is DIV? 

In short, DIV is a container , so we are going to create different containers to make our needs possible, we will design each container [ each work ] as we want !

CODE PROTOTYPE


-----------------------------------------------------------------------

<!DOCTYPE Html>    // this is latest html = html5
<html>
           <head> // this is the head of body , select name inside title tag
                     <title>LEARNING HTML</title>
           </head>
<body>
<h1>HELLO WORLD</h1> // h1 means heading 1 .
<h1>WorldTrueSight</h1> //   h1 can be used again and again. h2 , h3 will descrease the size of headings, you can practice for it.
<p>
      You are learning web designing through world true sight , currently there are two content writer. we are trying to give our best to you. 
</p>
// the above example is of paragraph writing !
<div class="truesight">
// your work here 
</div>
<div Id="worldtruesight">
// your work here
</div>
</body>
</html>>

--------------------------------------------------------------------------

You can call div through class or id ? we set class or id and give our name we want , because later we can call them with their name and can design it on css, on below topic in css it is discuss. 
  1. To call class use [.truesight] 
  2. To call Id use [#worldtruesight]

  • CLOSING / NON-CLOSING TAGS :
There are some different tags we can use in HTML in which there are some tags which need to be closed. All the code we performed above is closing tags code, let me show you some tags which doesn't need to be closed !


CODE PROTOTYPE


-----------------------------------------------------------------------

<!DOCTYPE Html>    // this is latest html = html5
<html>
           <head> // this is the head of body , select name inside title tag
                     <title>LEARNING HTML</title>
           </head>
<body>
<h1>HELLO WORLD</h1> // h1 means heading 1 .
<h1>WorldTrueSight</h1> //   h1 can be used again and again. h2 , h3 will descrease the size of headings, you can practice for it.
<p>
      You are learning web designing through world true sight , currently there are two content writer. we are trying to give our best to you. 
</p>
// the above example is of paragraph writing !
<div class="truesight">
// your work here 
<hr / > // gives a straight line where written 
<input type="button" placeholder="truesight" class="callbynametoedit"> 
To create button !
</div>
<div Id="worldtruesight">
<br!> // gives a line break
<input type="text" value="truesight" class="callbynametoedit">
To create a text place
<input type="password" value="truesight" class="callbynameedit">
To create a place for password 
// your work here
</div>
</body>
</html>>

--------------------------------------------------------------------------

  • CSS WORK-OUT :
What is Css ? 

Cascading Style Sheet . Is a language used to design, edit make colorful your content to look like. To design your website as you want, make it more attractive than before !   

TRUESIGHT SAYS :

"CSS CONTROLS THE ELEMENTS BEHAVIOR OF HTML"



CODE PROTOTYPE


-----------------------------------------------------------------------

<!DOCTYPE Html>    // this is latest html = html5
<html>
           <head> // this is the head of body , select name inside title tag

           <link rel="stylesheet" type="text/css" href="yourfilename.css">
// This is how a css file is link to html in-between the head tags

                     <title>LEARNING HTML</title>
           </head>
<body>
<h1>HELLO WORLD</h1> // h1 means heading 1 .
<h1>WorldTrueSight</h1> //   h1 can be used again and again. h2 , h3 will descrease the size of headings, you can practice for it.
<p>
      You are learning web designing through world true sight , currently there are two content writer. we are trying to give our best to you. 
</p>
// the above example is of paragraph writing !
<div class="truesight">
// your work here 
</div>
<div Id="worldtruesight">
// your work here
</div>
</body>
</html>>

--------------------------------------------------------------------------

  • CSS BASES ; [THINGS TO KNOW] :
Css is of three basic types , in-line/internal and external. For professional working only external file of css is used, so I'm here to teach you directly external file ! Every code we will perform will be in a range .. there are some universal tags which we don't have to create for example :
<h1> and <body> 
just type .body open its range and work on it. same for h1, these are tags which will be applied for all headings 1 and all on body.
After connectings css file, open it and apply some codes like.

CODE PROTOTYPE

---------------------------------------------------------
.body
{
   background-color: #000; or type white/black/grey any you want.
   text-align: center; all tag will be displayed at center.
   color: maroon; // changes text color on whole body !
   font-family: monospace; // changes font of body !
}
TO WORK ON CLASS OR ID WE CREATED :

// the class we created above :
.truesight
{
   your code here :
}
// the Id we created :
#worldtruesight
{
  your code here :
}
---------------------------------------------------------
  •  JAVA-SCRIPT / PLANE JAVA FOR BEGINNERS :
 Why we use java-script ? don't mix up java and java-script.
 TRUESIGHT SAYS :
"Java-script makes your website useful/meaningful"


To use java, we need to know the syntax, its case sensitive ! I will show you what can we perform with java-script ! I will use it behind buttons !
"Make create script of java" tags will be.
--------------------------------------------
<script type="text/javascript">
// your code here
</script>
-------------------------------------------
Let me show you how a button works with java-script !


CODE PROTOTYPE
----------------------------------------------------------
<!DOCTYPE html>
<html en="lang">
<body style="background-color:grey;color:white;">
<head>
  <title>
  WorldTrueSight
  </title>
    </head>
<body>
<center>
<h1> TASK FOR WEBSITE </h1>
Username: 
<input type="text" value="" id="t1"><br><br>
Password:
<input type="password" value="" id="t2"><br><br>
<input type="button" value="Login Now" onclick="Add()"/>
</center>
<script>
function Add()
{
var num1,num2;
num1=String(document.getElementById("t1").value);
num2=String(document.getElementById("t2").value);
if(num1=='Jibraan' && num2=='pass123')
{
alert("Sir Azam.");
}
else if(num1=='' || num2=='')
{
alert("Fields Are Empty.");
}
else
{
alert("Welcome : "+num1+" : You Have Logged In.");
}
}
</script>

 </body>

</html>
---------------------------------------------------------------

  • WEBSITE WITH THE USE OF HTML/CSS & J-SCRIPT :
Here we come up in the final step of our web building ! web designing ! 
I want you to comments your link when you done creating your website. Let me show you a sample website , which code is easy to understand and is a simple website , uses html  and css along too many functions in a simple manner !

LETS BEGIN :
Perform steps before creating your own website :
  1. Create a folder name it what you want.
  2. Save your all file inside the folders.
  3. Create separate .css files for navbar,body and footer.
  4. To create separate tabs create separate files as name.html
  5. paste all the content you inserting in web in same folder !
TRUE SIGHT #1


TRUE SIGHT #2


TRUE SIGHT #3


TRUE SIGHT #4
 


TRUE SIGHT #5

 I created this website for someone, so you can also start creating or working as a job on freelancer or anywhere !

If you want the code of above website, contact me below in comments box !

END OF TEACHINGS TO OUR TOPICS, HOPE YOU LEARN SOMETHING FROM THIS !!
BY TRUESIGHT !


Related Topics :

TOPIC #1 : CLICK ME !
TOPIC #2 : CLICK ME !
TOPIC #3 : CLICK ME !

-----------------------------------------------
Share with your mates! make them learn too, Don't forget to comment below !
-------------------- Everything at @WorldtrueSight -----------------------

Written by : Admin Of Website ! : Jibraan Ahmed.
Took 3 Days To Complete As I Sort Out Topics, Collected Materials !
Article Above 1000+ Words !
Enjoy -------------------------------------------------------------------------------------------



Jibraan Ahmed

Posted by Jibraan Ahmed

Coding since 2017, I have experience with multiple companies including freelancing, I have worked in many projects and products, my expertise lies in .NET and NodeJS and from from database side I am good with MongoDB (NoSQL) and MS SQL!

Post a Comment

14 Comments

  1. cynthiawilliams23 January 2019 at 11:45

    I am very happy to visit your blog. This is definitely helpful to me, eagerly waiting for more updates.
    AWS Training in Chennai
    AWS course in Chennai
    DevOps certification in Chennai
    DevOps Training in Chennai
    Data Science Course in Chennai
    Data Science Training in Chennai
    AWS Training in Velachery
    AWS Training in Tambaram

    ReplyDelete
  2. John Brick7 May 2019 at 12:52

    Really great post. This answered the majority of my questions. When I read this I actually opened up a word document and started taking notes haha.
    mediaonlines.com

    ReplyDelete
  3. Unknown7 August 2019 at 16:46

    Pocket Pussy
    Just saying thanks wouldn’t just be enough, for the fantastic fluency in your writing.

    ReplyDelete
  4. Damien Grant26 July 2020 at 21:36

    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/
    https://digitalweekday.com/

    ReplyDelete
  5. Best Data Science Courses In Bangalore 4 August 2020 at 23:29

    Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
    Best Data Science Courses In Bangalore

    ReplyDelete
  6. Tableau Course in Raipur - 360DigiTMG14 August 2020 at 15:58

    Great blog found to be amazing that the blog includes the complete description on the creation of Web designing that everyone will understand and gain the enough knowledge from your blog being more informative is an added advantage for the users who are going through it. Once again nice blog keep it up.

    360DigiTMG Cloud Computing Course

    ReplyDelete
  7. EXCELR25 September 2020 at 16:46

    "It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    data science courses"

    ReplyDelete
  8. EXCELR25 September 2020 at 16:56

    "It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    data science courses"

    ReplyDelete
  9. data scientist course6 April 2021 at 10:36

    I will really appreciate the writer's choice for choosing this excellent article appropriate to my matter.Here is deep description about the article matter which helped me more.
    data scientist training and placement

    ReplyDelete
  10. Maneesha10 June 2021 at 15:06

    I enjoy it for creating the details, keep up the truly amazing perform continuing
    data scientist training in hyderabad

    ReplyDelete
  11. Digital Marketing Course in Bangalore16 June 2021 at 07:46

    I am more curious to take an interest in some of them. I hope you will provide more information on these topics in your next articles.
    Digital Marketing Course in Bangalore

    ReplyDelete
  12. Business Analytics Course8 September 2021 at 19:20

    You have completed certain reliable points there. I did some research on the subject and found that almost everyone will agree with your blog.

    Business Analytics Course

    ReplyDelete
  13. Best Data Science Courses 8 September 2021 at 20:00

    I'm looking for and I like to post a comment that says "The content of your post is amazing" Great job!
    Best Data Science Courses in Bangalore

    ReplyDelete
  14. Professional Courses and Training26 November 2021 at 20:29

    It's like you've got the point right, but forgot to include your readers. Maybe you should think about it from different angles.

    Artificial Intelligence Courses in Bangalore

    ReplyDelete