In this case study we build the home page of a website from scratch that has layout, navigation bars, side bars and everything else needed to make a decent looking website.
Case Study Lessons
In the Case study we begin by looking at a website proposal and set up the basic environment needed for the future lessons. After this we go through the proposal isolating the comments and presentation required for each layer of the site. We will start by creating a layout for the site and then fill in the various parts of the layout in the following lessons.
Lesson 1: Website Proposal
In this lesson we read a website proposal from a potential client whom we shall call 'Fine Fancy Foods' for want of a better name. This will give us a general outline of what the customer wants from the site and it's our job to decipher the proposal and turn it into a website. After reading through the proposal we will set our environment up for use by later lessons.
Lesson 2: Page Layout
In lesson 6 of the CSS Advanced Tutorials we looked at dividing a webpage into sections using the <div> tag. In this lesson we expand on that knowledge to create a layout for our homepage. We will highlight the appropriate sections of the proposal, that will give us an idea of the layout and create the relevant CSS from this information.
Lesson 3: Website Banner
In this lesson we create a banner for our homepage. We will highlight the appropriate section of the proposal and look at the Fine Fancy Foods Layout Diagram. This will give us the information required to create the banner and the CSS and HTML we need to achieve it.
Lesson 4: Navigation Bar
One of the most important areas of website design is allowing users easy navigation to the other content on our site. In this lesson we create a navigation bar for our homepage for this purpose. Using the relevant section of the proposal and the Fine Fancy Foods Layout Diagram we can see what the client wants with regards to this part of the site. With this information acquired we can create the navigation bar, using CSS and HTML.
Lesson 5: Main Content
In this lesson we create the main content for our homepage. We will highlight the appropriate section of the proposal and look at the Fine Fancy Foods Layout Diagram. Along with the files sent to us by the client we will have the information required to create the main content part of our informational data.
Lesson 6: Left Sidebar
Ok with the main content HTML and CSS out of the way it is time to focus on the other parts of the page that make up the informational content. These areas being the left and right sidebars and the footer. In this lesson we create the left sidebar for our homepage. We will highlight the appropriate section of the proposal and look at the Fine Fancy Foods Layout Diagram once again. With this information and the appropriate files sent to us by the client we will have everything needed to create the left sidebar.
Lesson 7: Right Sidebar
Having completed the left sidebar we can now move on to the right sidebar content for our homepage. We will highlight the appropriate section of the proposal and look at the Fine Fancy Foods Layout Diagram to see the layout. With this information and the relevant files sent to us by the client we will have everything required to create the right sidebar.
Lesson 8: Footer Bar
The left and right sidebars are done so now all that is left to complete the content for our homepage is the footer bar. After highlighting the appropriate sections of the proposal and looking at the Fine Fancy Foods Layout Diagram again, we will have the information to create the footer bar and finish the client site.
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. This summary completes the lessons for the site.
In Lesson 1 we look at a proposal from a client that wants us to write a website for them. The proposal includes a suggested layout and the image files the client wishes us to use for the site. We are also given text required to describe the screenshots for each site. From this collective information we should have the required knowledge to start creating the site. After reading through the proposal we will set our environment up for use by later lessons.