Project 12 -- CSS Layout/Templates/Final Project

The final project will be a continuation of the Donut Delights Donut Shop midterm project. You will continue to develop the website based on a fictional business as described in this article with link to zip file.

Donut delights project description and zip file link

You may build the site from scratch or Work with a template which may require that you go back to previous projects to look up how to do things. Be careful not to choose a complex design that will be difficult to work with. This project is to demonstrate how well you can apply what you have learned this semester. Allow plenty of time for your own troubleshooting. Utilize W3 Schools and other web-tools as well. Get started as soon as possible to give yourself time for troubleshooting and asking for help if you need it. A basic design that is functional and validates will earn more points than a beautiful design that is loaded with validation errors, broken links, ineffective CSS and problems with images.


Final Project Requirements

You may use the text editor of your choice, templates and techniques you learned on projects to create the website for your final project. This should demonstrate that you have learned how to build a w3-schools standards-based website that:

To earn an "A" on your final project, all pages must:

Utilize w3-schools for reference to standard practices

Setting up your Final Project

Being part of a web design team often requires skill in the use of an existing template. You may be required to update or change a website that is already established. The final project for this course will give you some practice with this type of scenario. Templates can be used as a starting point for your own websites, especially if you do not have your own graphics or much experience in graphic design. The concepts that you have learned in this course should make it possible for you to place content into an existing responsive template and customize the coding to fit your content.

W3-schools templates Be careful, some templates can be very complex and hard to modify. Review the code before you decide on a template to use.

When you select your template from the websites above, download the zip file they give you and extract the files/folders to your storage device. When you extract the files in a Windows environment, a new folder is created for you by default with the name of the zip file as the folder name. The folder for your website should not be stored inside any other folder. It should be stored at the root directory of your storage device. The path to your website's home page should only include one folder name. It should be all lowercase with no spaces. Name the folder: finalproject-xx (replacing the xx with your initials). If necessary, move the files provided to you from the template into your finalproject-xx folder.

Before starting any work on your website, be sure that the files for the template are copied to your finalproject-xx folder. They should not be in a folder that originally came with the template or that was created by default when the files were unzipped. Be sure that images that go with the website are stored in an "images" folder that is inside your finalproject-xx folder.

Make a copy of the original template index.html file and of any stylesheets that are part of the template.

Create a folder inside your finalproject-xx folder and name the new folder: template

Move the copy of the original template index.html file and copies of the original stylesheet(s) to the template folder.

In your finalproject-xx folder, rename the index.html file to home.html

In your template folder, rename the index.html file that comes with the template using the name of the template for the filename. For example: If you are using a template from freecsstemplates called macrospikes, rename the index.html file as: macrospikes.html.

After completing the above steps your file structure should include:

Keep the "comment" in the code that comes with the template that tells which template is being used. For example, if you use the "Open Air" template from the website, you will see this code in the <head> section of the page:

Design by Free CSS Templates
Released for free under a Creative Commons Attribution 2.5 License

Name : Open-Air
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20120818


Example: When you notice that the px unit of measurement has been used for font-size, you need to convert that measurement to a relative unit of measurement like % or em. The following code shows the original CSS commented with a copy of the code used to test out if .8em font-size will look about the same as 11px.

/*font : normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;*/
font : normal .8em "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;

Experiment with one change at a time. View the page in the browser, as Dreamweaver does not always display what the browser will display.

Be very careful about making any changes to properties like position, float, width, margins and padding that are used to construct the layout of the design. Typically the position, float, width, margins and padding properties work together to create a layout. Changing one property often requires changes in other properties to accommodate the change. Work slowly and keep all original code available to make it easy to return to what was working.

When you have it basically like you want it, make two more copies of the home.html page to use as starting points for pages two and three of your site. Give the new pages appropriate filenames based on the content that will be in each page. (More about that later...) When you are ready to submit your project: If HTML elements provided in the template are not being used, delete them from the code. If CSS selectors/properties or style rules from a template are not being used, delete them from the stylesheet. If image files are not being used, move them to your template folder. Having unnecessary code in your website will cause a deduction in your score.


General Instructions for Final Project

All final projects should demonstrate the ability to create a functional, mobile friendly, responsive website, applying the concepts that have been included in this course. For example, you must:

All pages should be using the same stylesheet. If additional styles need to be customized for an individual page, use embedded style rules for that.

You may need to add to the CSS provided with the template. Notes about using IDs and classes:

Validate all pages (including your style sheets)

Scores and general comments will be posted in Cobra at the end of the semester for final projects.