Create a website

Written By: Avinash Malhotra

Updated on

CSS Tutorial rating by Jasmine Average rating: 5.0, based on 69 reviews
  1. Home
  2. Web Designing
  3. CSS
  4. Website Project

How to create a website

How to create a website using HTML & CSS. As we had finished basics of HTML and CSS, we will learn how to design a website. Try to use proper HTML syntax with standard tags and attributes.

Steps to create a website

  1. Create a html page
  2. Add a wrap class
  3. Add CSS to html
  4. Add two columns in container
  5. Add navigation menu
  6. W3C Validation test

Create a html page

Website design starts with html first. Create a webpage first with doctype, html tag, head, body and necessary elements. See example

<!doctype html>    
<html lang="en"> 
<head>    
    <title>Website Design</title>    
    <meta charset="utf-8">    
</head>    
<body>    
</body>    
</html>

Add a wrap class

Create a wrap class in body. The wrap is a container to group page header, nav, container and footer. The width of wrap will be 960px or 1200px and will align in center of body. 

<!doctype html>    
<html lang="en"> 
<head>    
    <title>Website Design</title>    
    <meta charset="utf-8">    
</head>    
<body>    
    <div class="wrap">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="container"> container </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>

Add CSS to Html

Now lets add some css to our html page. CSS can be used in external or internal form. For multipage website, use external css, but for single page website, we can use internal css.

Header
Nav
Container
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>Website Design</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0;}

img{ vertical-align:bottom }

a{ text-decoration:none}

body{
    font:14px sans-serif;
}

.wrap{ 
    width:960px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.container{
    background:#afa;
    padding:10px;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="wrap">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="container"> container </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>

Add Left and right divisions in container

Now lets add some css to our html page. For left column, use div with class aside with width approx 25%. Now add another div with class section with width approx 75%.

After aside and section divs, do not forget to add a class clear to clear both.

Header
nav
Aside
Section
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>Website Design</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0;}

img{ vertical-align:bottom }

a{ text-decoration:none}

body{
    font:14px sans-serif;
}

.wrap{ 
    width:960px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.container{
    background:#afa;
}
.aside{
    width: 220px;
    float:left;
    padding:10px;
}
.section{
    width: 700px;
    float:left;
    padding:10px;
    background:#ccc;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="wrap">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="container">
            <div class="aside">aside</div>
            <div class="section">section</div>
            <div class="clear"></div>
        </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>

Now lets create a navigation menu. Create a UL ( unordered list) with five li elements and a hyperlink in each li.

Header
Aside
Section
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>Website Design</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0;}

img{ vertical-align:bottom }

a{ text-decoration:none}

body{
    font:14px sans-serif;
}

.wrap{ 
    width:960px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.nav ul{
    list-style:none;
    padding:0;
}
.nav ul li{
    float:none;
    margin-right:10px;
}
.nav ul li a{
    color:inherit;
    display:block;
}
.container{
    background:#afa;
}
.aside{
    width: 220px;
    float:left;
    padding:10px;
}
.section{
    width: 700px;
    float:left;
    padding:10px;
    background:#ccc;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="wrap">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="container">
            <div class="aside">aside</div>
            <div class="section">section</div>
            <div class="clear"></div>
        </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>

W3C Validation test

We have to follow W3C web standards while coding. Try to test your final layout on w3c validator. To do this, follow steps below.

W3C Validation test

  1. Open w3c validator.
  2. Click second tab, i.e, Validate by File Upload.
  3. Upload your file from system.
  4. Press Check button to validate.
  5. Check errors and warning in red and yellow backgrounds.