how to build a website in html and css step by step

WHAT YOU SHOULD KNOW?

Lets begin! First you will need to know what your website is about. 
Determining what will be the content of your websites is an important step before starting anything else.

NOTE:

*NO CONTENT = NO IDEA -> NO WEB PAGES -> NO WEBSITES..

I will give you step by step approach in what it takes for beginners, a pro, web designers to build a website.

Lets Go! 

Step1: Lets Draft a Plan for Your Website

1-Lets determine what type of website  you be working on.
        Make a pick from the following:
* Personal site,            
* educational site,

* e-commerce site,        
* company sites,
* social networking site,  
* file sharing site,
* forum sites,                
* blog and online sites,
* search engine sites,      

2. Now its time to start drafting a plan for your website.
        Revise,Revise until  final draft is done!

Step2: Choose Your Site Name and Layout

1- Decide your site name,domain name
Example: www.mysite.com

2- Choose a hosting company to check if your domain is not already taken.

     Example of hosting companies: 
* www.Godaddy.com      
*  www.Justhost.com

* www. Hostgator.com   

With HOSTGATOR:
  GET 25% OFF by using coupon code: "waycheaper" 
  OR $9.95 by using coupon code: "cheaperfor"

*  www.Hostmonster.com

* www.Ipage.com         
*  www.Bluehost.com 
3- How many pages will you need for the website?

4- Decide the general Layout of your site.

Step3:  Files ( images, videos, notes)

1- Important Note : If  you are not designing the website yourself,  you will need to give all of the following items to the designer.

* Images:

Make a list of images for your website. Images are important because they bring the site to life!

* Videos: 

Most websites such as educational, news use videos to target audience. However, some sites instead like to use slideshow to replace videos. So feel free to choose what you prefer for your site.

*Audio:
Some sites use audio such as radio, music,  audio effects.etc...

Step4: The Coding/Programming Part. 

Websites pages are written in an specific language called HTML ( hyper-text markup language),which is a set of markup tag such as <p> paragraph</p>. 

Web browsers such Google Chrome, Safari, Firefox, Opera, Internet Explorer convert HTML Code into web pages which can be readable. 

 Despite html, Designers have to use CSS (Cascading style sheet)  language ,which brings life to webpages.It allows designer to add color, images, boxes. videos, text formatting, etc.

In Addition,designers use JS (JavaScript)  a scripting language for the web that allows the pages to be more dynamic and interactive.

What you should use:  HTML + CSS + JAVASCRIPT = WEBSITES

Once you are completed with the coding part of the site, Its time for the world to see your website!

Step5: PUT YOUR SITE ONLINE UNDER YOUR DOMAIN NAME

           Now, its time to upload your web pages! This is done with an FTP client.
FTP (File transfer protocol) allows you to upload your files to your public_html file directory.Some FTP clients are FileZilla, SmartFTP.
NOTE: You will have to register a ftp account with the hosting company before transferring files.

Remember:
           When you bought your domain name,  you or the designer was able to add a domain plan that various by companies. Some company charges $8 to $15 per month to host you site.  You  have to choose a plan that you prefer and once purchased, it will take 24 to 48 hours for your domain name to propagate. Then you will need upload your file through your ftp client you created earlier.

USE COUPON CODE ON HOSTGATOR.

"waycheaper" and Get 25% OFF for new hosting. or "cheaperfor" and Get 9.94% OFF.


NOTE:
For beginners, these steps can be frustrating but don't let it be the reason to quit.. You can do it !:)

Step6: YOU ARE ALIVE ON THE INTERNET.

Note:

You website is now online and the world is ready to see it.

Note: These are the basic steps in what it takes to create and publish a website.
However, there is more to know so feel free to do some extra research on your own.
There is always more learn...

Congratulations!

Hope this was helpful for you;)

How to use viewport meta tag to zoom on mobile browsers

What you should know?

     In past, most websites developer/designer used to create web pages for bigger screen  or monitor.

These large monitors varied in sizes such as: 800 pixel  wide and 600 pixel height. 

Well, with time 800X600 pixel resolution was left behind because largest screen starting appeared on the market. 1020x 768 pixel  resolution screen became more common and people enjoyed it.

However, this larger resolution screen was not effective and it was hard  for people to read web pages that was design for bigger screen ( 22 in or 28 in) on a small screen. Consequeces:

The text was too small and unreadable.

      Today,  mobile devices such tablets,  mobile phones, are more in use than ever and they have smaller screen resolution.

Most mobile phones such as, Iphone, Android, Blackeberry, Nokia etc.. have each different sizes width and height which makes a little bit complicated for developers to target every phones while developing a site.

Solution:

Using  mobile meta viewport tag makes everything simpler and easier. Developer do not need to worry too much in writing code for every mobiles phones. 

They simply use a meta tag to target all devices in one: 

<html>

<head>

<title> I love meta tag </title>

<meta name="viewport" content="width=device-width/> 

</head>

<body>

</body>

</html>

NOTE: 

1-Users/clients can easily access different location in websites without squeezing every page.

2-This meta tag is used now in many mobile browsers across the globe.

3-This meta tag is not an standard tag for the web.

Others: You may also try this in case the above meta tag is not working.

<meta name="viewport" content="width=device-width, initial-scale=1.0, 

minimum-scale=1.0, maximum-scale=1.0" />

Thank You! Hope this was helpful for you.

Follow @tutoronthego

Warning: session_start() [function.session-start]: Cannot send session cache limiter or cookie

PHP WARNING:

Warning: session_start() [function.session-start]: Cannot send session cache limiter or
Warning: session_start() [function.session-start]:Cannot send session cookie - headers already sent by 

Explanation:

This problem is normally cause because an html code was placed above the header. You need to be careful on that. header must be parse BEFORE html code.  

Definiton: 

The header() function sends a raw HTTP header to a client. 

It is important to notice that header() must be called before any actual output is sent (In PHP 4 and later, you can use output buffering to solve this problem): for more... w3schools.com

<html>
<?php
// This results in an error.
// The output above is before the header() call
header('Location: http://www.example.com/');
?>

Solution1:
ALWAYS MAKE SURE THAT session_start() is in the first line.

1  <?php
2  session_start();

3  ..................

4  ..................

5  ..................

6  ?>

Solution2:
You can place this line into  your code.

// place this at the top of your page : ob_start()  stored the output in the buffer
<? ob_start(); ?>
// place this at bottom of you page :  ob_flush() flush the buffer
 <?ob_flush();?>

Thank You, Hope this was helpful

Follow @tutoronthego

How to auto hide left panel in Ubuntu

HOW TO HIDE LEFT-PANEL IN UBUNTU

DEFINITION:

Ubuntu is an operating system based on the Linux kernel and the Linux distribution Debian, with Unity as its default desktop environment. It is distributed as free and open source software. It is named after the Southern African philosophy of ubuntu, which often is translated as "humanity towards others" or "the belief in a universal bond of sharing that connects all humanity".  for more visit: Wikipedia

Ubuntu

HERE ARE THE STEPS:

 GO to System Settings --> Appearance --> Behavior --> Switch-OFF

Thank You!

Hope this was a helpful for you...

Follow @tutoronthego

How to show line numbers in Eclipse SDK

You should know:

Eclipse is a multi-language software development environment or IDE (Intergrated Development Environment) that allow software developer to build robust applications by targeting many devices such as  mobile, tables and desktop. Java is the main language used.

NOTE:

Eclipse sdk is set to default after downloaded from Google site: download sdk.

However, to add a line numbers you have to open your eclipse and go to:

Windows ---> Preference ---> General --> Editors ---> select Show line numbers.

Hope this is helpful.
However, if you have any questions about how to download  eclipse sdk and start coding in java please let me know.

Thank You :)

Follow @tutoronthego

html5 templates

BASIC HTML5-CSS3 LAYOUT

Your layout should look like this:

HTML CODE

<!doctype html>

<html lang="en">

<head>
           <meta charset="utf-8" />

           <title>   Your site title  </title>
           <style>  Put your style here</style>

           <script> Put you script here</script>

</head>

<body>

       <div id="container">
        
            <nav>
                    <ul>
                          <li> <a href="#"> Home</a> </li>
                          <li> <a href="#"> News</a> </li>
                          <li> <a href="#">Video</a> </li>
                    </ul>
             </nav>

            <header>
                   Put you header code here...
            </header>

            <div id="content">
                  Put your content code here...
             </div>

             <footer>
                 Put your footer code here...
            </footer>

      </div>

</body>

</html>

Here is the basic html5 page layout. You can also customize by adding more content.
Thank You!

Follow @tutoronthego