html5 Site Icon CSS3 Site Icon CSS Site Icon

Case Study

Lesson 9 - Case Study Summary

In this summary we list the various CSS and HTML used to construct the homepage for Fine Fancy Foods. We start by showing the file structure used for this client, which could be applied to any site creation. After this go down this file structure listing the various HTML and CSS used.

File Structure

The following diagram shows the file structure used for the site. We have only written the homepage to keep the case study manageable and one subfolder for the CSS for the main section content. Generally you would have subfolders under the main folder for other web pages and other subfolders for things such as images and javascript. This keeps the various areas of your site together and is always good practice.

notepad

Our Global CSS

Following is the global.css file which contains the root CSS for our website. For the purpose of the case study we use this CSS file for everything apart from the main content area. In a real life scenario you might have different CSS files for navigation, sidebars etc., or your CSS might be compressed into a global CSS file for efficiency.


/* Reset browser styles */
h1, h2, p, div, ul, ol, li, code, pre, html, body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}
/* wraps entire contents of page */
#wrapper {
  margin: 0 auto;
  background-color: #add8e6;
  border: 1px solid black;
  width: 960px;
}
/* position banner relative to the wrapper and use a blue background */
#banner {
  position: relative;
  background-color: blue;
}
/* style banner header */
#banner h1 {
  color: white;
  margin-bottom: 10px; 
  text-align: center;
  padding: 25px 0 5px; 
  font: 3.8em "Comic Sans", Georgia, "Times New Roman", Times, serif;
  font-weight: 100;
}
/* position banner icon */
#banner #ffficon {
  position: absolute;
  top: 10px;
  left: 45px;
}
/* style list for links */
#banner ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: absolute;
  right: 20px;
  bottom: 5px;
}
#banner li {
  display: inline;
  margin-left: 10px;
}
#banner li a {
  color: white;
  text-decoration: none;
  font: 1em "Comic Sans";
}
#banner li a:hover {
  color: red;
}
#seperator {
  border-right: 1px solid white;
  padding-right: 10px;
}
/* Style nav bar */
#nav {
  margin: 0;
  padding: 0;
  line-height: 1;
  width: 100%;
}
/* Style list */
#nav ul {
  list-style: none;  
}
/* Style list items */
#nav li {
  background-color: #4169e1;
  float: left;
  width: 160px;
}
/* Style Links */
#nav a {
  color: white;
  margin: 0;
  padding: 5px 22px 5px 22px;
  font-weight: 500;
  font-size: 1.2em;
  display: block;
  text-decoration: none;
}
/* On hover */
#nav a:hover{
  color: red;
}
/* wrap main content */
main {
  clear: both;
  position: relative;
  width: 100%;
}
/* Style left sidebar area */
#leftsidebar {
  margin: 5px;
  position: absolute;
  top: 0px;
  bottom: 40px;
  left: 0;
  width: 160px;
}
#leftsidebar td {
 padding-right: 5px;
}
/* Style right sidebar area */
#rightsidebar {
  margin: 5px;
  border: none;
  position: absolute;
  top: 0px;
  bottom: 40px;
  right: 6px;
  width: 160px;
}
#rightsidebar td {
 padding-left: 5px;
}
/* Style footer bar area */
#footer {
  background-color: blue;
  color: white;
  clear: both;
  width: 960px;
}
/* Style footer bar links */
#footer a {
  color: white;
  text-decoration: none;
}
/* Style footer bar hover */
#footer a:hover {
  color: red;
}
/* Style table */
#footer table {
  margin: 10px;
  margin-left: 75px;
}

Our Homepage HTML

Following is the index.html file which contains the homepage HTML for our website.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the Generated Content tutorial follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Doctor Case Study - Website Creation</title>
<meta name="Description" content="Creating a website from scratch at HTML Doctor." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="banner">
    <div id="ffficon">
      <img src="http://htmldoctor.info/images/ffflogo.jpg"  alt="FFF ICon" />
    </div>
    <h1>Fine Fancy Foods</h1>
    <ul>
      <li id="seperator"><a href="mailto:kevandjules@htmldoctor.info">Contact Us</a></li>
      <li><a href="pages/aboutus.html">About Us</a></li>
    </ul><br />
  </div>
  <div id="nav">
    <ul>
      <li><a href="http://homecookbook.info/index.html">Cookbook</a></li>
      <li><a href="http://ilovedesserts.info/">Desserts</a></li>
      <li><a href="http://perfectdinners.info/">Dinners</a></li>
      <li><a href="http://soupheaven.info/">Soups</a></li>
      <li><a href="http://thepatisserie.info/">Cakes</a></li>
      <li><a href="http://thespicekitchen.info/">Spicy</a></li>
    </ul>
  </div>
  <div id="contentwrapper">
    <div id="main">
      <table>
        <tr><td><a href="http://homecookbook.info/">
              <img src="http://htmldoctor.info/images/fffcookbook.jpg" alt="cookbook" 
                   width="300px" height="200px" /></a></td>
            <td><a href="http://ilovedesserts.info/">
              <img src="http://htmldoctor.info/images/fffdesserts.jpg" alt="desserts" 
                   width="300px" height="200px" /></a></td>
        </tr>
        <tr><td><p><strong>Home Cookbook</strong><br />The aim of this website is to share 
        our home recipes and hope they are enjoyed by others as much as us. We cook on a  
        tight budget but have a varied range of meals as we like entertaining and it's often 
        easier for friends to come over to us.</p></td>
        <td><p><strong>I Love Desserts</strong><br />Everyone loves homemade desserts 
        and here is a selection of some of our favourites. The recipes are easy to follow and 
        the dishes are pretty simple to make and include old favourites like bread 
        pudding and spotted dick.</p></td>
        </tr>
        <tr><td></td></tr>  
        <tr><td><a href="http://perfectdinners.info/">
              <img src="http://htmldoctor.info/images/fffdinners.jpg" alt="dinners" 
                   width="300px" height="200px" /></a></td>
            <td><a href="http://soupheaven.info/">
              <img src="http://htmldoctor.info/images/fffsoups.jpg" alt="soups" 
                   width="300px" height="200px" /></a></td>
        </tr>
        <tr><td><p><strong>Perfect Dinners</strong><br />Whether you are doing a family 
        dinner, are entertaining friends or maybe even having a dinner party this site has the 
        recipes. Just click on a picture to see the recipe and print off a printer friendly 
        version of it.</p></td>
        <td><p><strong>Soup Heaven</strong><br />There are plenty of healthy soup 
        recipes here, try some of the vegetarian and fish recipes such as Parsnip, Spiced 
        Carrot and Cod and Sweetcorn Chowder for a  really healthy soup starter.</p></td>
        </tr>
        <tr><td></td></tr>  
        <tr><td><a href="http://thepatisserie.info/">
              <img src="http://htmldoctor.info/images/fffcakes.jpg" alt="cakes" 
                   width="300px" height="200px" /></a></td>
            <td><a href="http://thespicekitchen.info/">
              <img src="http://htmldoctor.info/images/fffspicy.jpg" alt="spicy" 
                   width="300px" height="200px" /></a></td>
        </tr>
        <tr><td><p><strong>The Patisserie</strong><br />Whether you are after home made 
        biscuit, cake or pastry recipes you will find them all here at The Patisserie. These 
        recipes are much healthier, taste fresher and are just so much more packed with 
        flavour than shop bought variants.</p></td>
        <td><p><strong>The Spice Kitchen</strong><br />If you enjoy eating spicy food this is 
        the site for you. There are  a nice selection of spicy starters and soups to really 
        whet the appetite. Also if like us you love a curry you will find spicy curries here 
        to suit all tastes.</p></td>
        </tr>
        <tr><td></td></tr>  
      </table>
    </div>
    <div id="leftsidebar">
      <table>
        <tr><td><a href="http://homecookbook.info/pages/soups.html#0#hotsournoodle">
          <img src="http://htmldoctor.info/images/hotsournoodlesmall.jpeg" alt="hot sour" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://homecookbook.info/pages/soups.html#0#tomato">
          <img src="http://htmldoctor.info/images/tomatosmall.jpeg" alt="tomato" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://homecookbook.info/pages/lunches.html#0#frenchbreadpizza">
          <img src="http://htmldoctor.info/images/frenchbreadpizzasmall.jpeg" alt="pizza" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://homecookbook.info/pages/lunches.html#0#pittabreadpizza">
          <img src="http://htmldoctor.info/images/pittabreadpizzasmall.jpeg" alt="pitta" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://homecookbook.info/pages/lunches.html#1#flapjacks">
          <img src="http://htmldoctor.info/images/flapjackssmall.jpeg" alt="flapjacks" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://homecookbook.info/pages/lunches.html#1#nachos">
          <img src="http://htmldoctor.info/images/nachossmall.jpeg" alt="nachos" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://homecookbook.info/pages/starters.html#0#onionsalad">
          <img src="http://htmldoctor.info/images/onionsaladsmall.jpeg" alt="onion salad" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://homecookbook.info/pages/starters.html#0#prawnavocado">
          <img src="http://htmldoctor.info/images/prawnavocadosmall.jpg" alt="prawn" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://homecookbook.info/pages/starters.html#1#chillifriedseafood">
          <img src="http://htmldoctor.info/images/chillifriedseafoodsmall.jpeg" alt="chilli" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://homecookbook.info/pages/starters.html#1#friedcamembert">
          <img src="http://htmldoctor.info/images/friedcamembertsmall.jpeg" alt="camembert" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td><a href="http://perfectdinners.info/pages/batteredfish.html">
          <img src="http://htmldoctor.info/images/batteredfishmedium.jpg" alt="fish" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://perfectdinners.info/pages/beefalepie.html">
          <img src="http://htmldoctor.info/images/beefalepiesmall.jpg" alt="beef ale pie" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://perfectdinners.info/pages/beefborgy.html">
          <img src="http://htmldoctor.info/images/beefborgysmall.jpeg" alt="beef borgy" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://perfectdinners.info/pages/cheesepotatopie.html">
          <img src="http://htmldoctor.info/images/cheesepotatopiesmall.jpg" alt="cheese" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://perfectdinners.info/pages/coqauvin.html">
          <img src="http://htmldoctor.info/images/coqauvinsmall.jpg" alt="coq au vin" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://perfectdinners.info/pages/fishitaliano.html">
          <img src="http://htmldoctor.info/images/fishitalianosmall.jpeg" alt="italiano" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://perfectdinners.info/pages/fishpie.html">
          <img src="http://htmldoctor.info/images/fishpiesmall.jpg" alt="fish pie" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://perfectdinners.info/pages/lambshanks.html">
          <img src="http://htmldoctor.info/images/lambshankssmall.jpeg" alt="lamb shanks" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://perfectdinners.info/pages/chickenkiev.html">
          <img src="http://htmldoctor.info/images/chickenkievsmall.jpeg" alt="chicken kiev" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://perfectdinners.info/pages/chickenpie.html">
          <img src="http://htmldoctor.info/images/chickenpiesmall.jpeg" alt="chicken pie" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td><a href="http://thepatisserie.info/pages/chocmarblecake.html">
          <img src="http://htmldoctor.info/images/chocmarblecakesmall.jpeg" alt="marble cake" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thepatisserie.info/pages/fruitloaf.html">
          <img src="http://htmldoctor.info/images/fruitloafsmall.jpeg" alt="fruit loaf" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thepatisserie.info/pages/cinnamonswirls.html">
          <img src="http://htmldoctor.info/images/cinnamonswirlssmall.jpeg" alt="swirls" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thepatisserie.info/pages/eclairs.html">
          <img src="http://htmldoctor.info/images/eclairssmall.jpeg" alt="eclairs" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thepatisserie.info/pages/eccles.html">
          <img src="http://htmldoctor.info/images/ecclesmedium.jpeg" alt="eccles" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thepatisserie.info/pages/fairycakesuprises.html">
          <img src="http://htmldoctor.info/images/fairycakesuprisesmall.jpeg" alt="fairycakes" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thepatisserie.info/pages/crispyoatbiscuits.html">
          <img src="http://htmldoctor.info/images/crispyoatbiscuitsmedium.jpeg" alt="crispyoat" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thepatisserie.info/pages/fruitscones.html">
          <img src="http://htmldoctor.info/images/fruitsconesmedium.jpeg" alt="fruit scones" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thepatisserie.info/pages/rockbuns.html">
          <img src="http://htmldoctor.info/images/rockbunsmedium.jpeg" alt="rock buns" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thepatisserie.info/pages/sultanacake.html">
          <img src="http://htmldoctor.info/images/sultanacakemedium.jpeg" alt="sultana cake" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
      </table>
    </div>
    <div id="rightsidebar">
      <table>
        <tr><td><a href="http://ilovedesserts.info/pages/bakedcheesecake.html">
          <img src="http://htmldoctor.info/images/bakedcheesecakesmall.jpeg" alt="cheesecake" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://ilovedesserts.info/pages/panacotta.html">
          <img src="http://htmldoctor.info/images/panacottasmall.jpeg" alt="panacotta" 
               width="75px"  height="60px" /></a></td></tr>
       <tr><td><a href="http://ilovedesserts.info/pages/appleblackberrypie.html">
          <img src="http://htmldoctor.info/images/appleblackberrypiesmall.jpeg" alt="applepie" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://ilovedesserts.info/pages/spotteddick.html">
          <img src="http://htmldoctor.info/images/spotteddicksmall.jpeg" alt="spotted dick" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://ilovedesserts.info/pages/breadbutterpudding.html">
          <img src="http://htmldoctor.info/images/breadbutterpuddingsmall.jpg" alt="breadpud" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://ilovedesserts.info/pages/breadpudding.html">
          <img src="http://htmldoctor.info/images/breadpuddingsmall.jpg" alt="breadbutpud" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://ilovedesserts.info/pages/chocolateorange.html">
          <img src="http://htmldoctor.info/images/chocolateorangesmall.jpg" alt="chocorange" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://ilovedesserts.info/pages/cremebrulee.html">
          <img src="http://htmldoctor.info/images/cremebruleesmall.jpg" alt="brulee" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://ilovedesserts.info/pages/crumble.html">
          <img src="http://htmldoctor.info/images/crumblemedium.jpeg" alt="crumble" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://ilovedesserts.info/pages/trifle.html">
          <img src="http://htmldoctor.info/images/triflemedium.jpeg" alt="trifle" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td><a href="http://soupheaven.info/pages/hamchorizo.html">
          <img src="http://htmldoctor.info/images/hamchorizosmall.jpeg" alt="hamchorizo" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://soupheaven.info/pages/sausagepepper.html">
          <img src="http://htmldoctor.info/images/sausagepeppersmall.jpeg" alt="sausagepepper" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://soupheaven.info/pages/chicken.html">
          <img src="http://htmldoctor.info/images/chickenmedium.jpeg" alt="chicken" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://soupheaven.info/pages/chickenstew.html">
          <img src="http://htmldoctor.info/images/chickenstewmedium.jpeg" alt="chickenstew" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://soupheaven.info/pages/lambstew.html">
          <img src="http://htmldoctor.info/images/lambstewsmall.jpg" alt="lamb stew" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://soupheaven.info/pages/fish.html">
          <img src="http://htmldoctor.info/images/fishsmall.jpeg" alt="fish" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://soupheaven.info/pages/minestrone.html">
          <img src="http://htmldoctor.info/images/minestronesmall.jpeg" alt="minestrone" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://soupheaven.info/pages/beefstew.html">
          <img src="http://htmldoctor.info/images/mumslazybeefstewmedium.jpeg" alt="beefstew" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://soupheaven.info/pages/prawnlaksa.html">
          <img src="http://htmldoctor.info/images/prawnlaksasmall.jpeg" alt="prawn laksa" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://soupheaven.info/pages/sausagestew.html">
          <img src="http://htmldoctor.info/images/sausagestewsmall.jpeg" alt="sausage stew" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td><a href="http://thespicekitchen.info/pages/chickenjalfrezi.html">
          <img src="http://htmldoctor.info/images/chickenjalfrezismall.jpg" alt="jalfrezi" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thespicekitchen.info/pages/chickenkorma.html">
          <img src="http://htmldoctor.info/images/chickenkormasmall.jpg" alt="korma" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thespicekitchen.info/pages/chickenmasala.html">
          <img src="http://htmldoctor.info/images/chickenmasalasmall.jpeg" alt="masala" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thespicekitchen.info/pages/chickenpaprika.html">
          <img src="http://htmldoctor.info/images/chickenpaprikamedium.jpeg" alt="eclairs" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thespicekitchen.info/pages/chilli.html">
          <img src="http://htmldoctor.info/images/chillimedium.jpeg" alt="chilli" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thespicekitchen.info/pages/chinesepork.html">
          <img src="http://htmldoctor.info/images/chineseporksmall.jpeg" alt="chinesepork" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thespicekitchen.info/pages/jambalaya.html">
          <img src="http://htmldoctor.info/images/jambalayamedium.jpeg" alt="jambalaya" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thespicekitchen.info/pages/junglecurry.html">
          <img src="http://htmldoctor.info/images/junglecurrysmall.jpg" alt="jungle curry" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td><a href="http://thespicekitchen.info/pages/lambmadras.html">
          <img src="http://htmldoctor.info/images/lambmadrassmall.jpg" alt="lamb madras" 
               width="75px"  height="60px" /></a></td>
          <td><a href="http://thespicekitchen.info/pages/lambrogan.html">
          <img src="http://htmldoctor.info/images/lambrogansmall.jpeg" alt="lamb rogan" 
               width="75px"  height="60px" /></a></td></tr>
        <tr><td></td></tr>  
        <tr><td></td></tr>  
      </table>
    </div>
    <div id="footer">
      <table>
        <col width="310" />
        <col width="310" />
        <col width="240" />
        <tr>
          <td><strong>Products</strong></td>
          <td><strong>Services</strong></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Furnishings</a></td>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Landscaping</a></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Decorations</a></td>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Removals</a></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Kitchen Accessories</a></td>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Joinery</a></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Tiles</a></td>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Cookery Lessons</a></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Wood</a></td>
          <td><a href="http://htmldoctor.info/casestudy/casestudy.html">Bricklaying</a></td>
          <td>Copyright 2011, Fine Fancy Foods</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

Our Main Content CSS

Following is the main.css file which contains the main content CSS for our website. For the purpose of the case study we are just using this CSS file to show directory structure. We could just have easily included the CSS below in the global.css file.


/* Style main content area */
.content {
 margin-left: 167px;
}
.content td {
 padding: 5px;
 padding-bottom: 0px;
}
.content td p {
  background-color: white;
  margin-top: -5px;
  border: 1px solid #ccf;
  width: 300px;
  height: 130px;
  overflow: auto;
}

Creating the 'About Us' Page

Create a subfolder under the _CaseStudy folder called pages and try to create the aboutus.html webpage so we can link to it from the homepage.

Lesson 9 Complete

In this lesson we have looked at the file structure used for the Fine Fancy Foods website. We also looked at the CSS and HTML used to create the homepage for this client.

Related Tutorials

HTML4 Basic Tutorials - Lesson 2 - Basic HTML Structure?

HTML4 Basic Tutorials - Lesson 6 - Ordered and Unordered Lists

HTML4 Basic Tutorials - Lesson 7 - Images

HTML4 Basic Tutorials - Lesson 8 - Links

HTML4 Intermediate Tutorials - Lesson 1 - What is XHTML?

HTML4 Intermediate Tutorials - Lesson 2 - More HTML Structure

HTML4 Intermediate Tutorials - Lesson 6 - An Introduction to Tables

HTML4 Advanced Tutorials - Lesson 1 - Importing CSS and JavaScript

HTML4 Advanced Tutorials - Lesson 5 - A Final Trip To Tablesville

CSS Basic Tutorials - Lesson 5 - Styling Text

CSS Basic Tutorials - Lesson 8 - Padding & Margins

CSS Basic Tutorials - Lesson 9 - Borders

CSS 1/2 Intermediate Tutorials - Lesson 1 - Backgrounds

CSS 1/2 Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model

CSS 1/2 Intermediate Tutorials - Lesson 7 - Positioning

CSS 1/2 Intermediate Tutorials - Lesson 8 - Display

CSS 1/2 Advanced Tutorials - Lesson 3 - Styling Lists

CSS 1/2 Advanced Tutorials - Lesson 6 - Layout

What's Next?

This summary completes the lessons for the site and I hope you have found the site informative and have learnt from it.

Everything we have covered about HTML and CSS can be accessed easily from the comprehensive reference section of the site, so hopefully you will be back to use these :).



Footer Bar  << Prev          Next >>  References

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.