Description: A series of original web pages using HTML and CSS.

This should demonstrate your skills in interface design and in regards to aesthetic principles and embedding media assets.

The Brief: Dessert Recipe Website

A client has requested a treatment for a recipe web site. They require 3 HTML pages of content, plus a Cascading Style Sheet to ensure consistency of design and layout across every page. Their concept is for a general dessert recipes website where users can rate and comment on recipes as well as find out information about the history of recipes. To begin with, they want a design for the site based around a single recipe.
The client has supplied sample images and sample text-cop. (NOTE: you should adapt these to your design including editing the text if necessary):

Text Content: A text document with representative text (i.e. the main body text). This includes a recipe for Pavlova, some tips for cooking, an excerpt from a Wikipedia article about the origins of the Pavlova recipe and some sample comments for the site. These are unedited from the original source and will require some tweaks to make them read well for your site.

Image Content: An image for the body content - two pictures of Pavlova. You can either use the supplied images, or supply your own if you find an alternative that is a better fit for the design of your site. Also consider finding or generating images you may need for backgrounds and other design elements in your pages.

Graphic Identity: The client has requested that your design should reflect a clear graphic identity, suitable for a desert recipe website.

The General Process

1. Identify the main components that will make up the body text document (i.e. title and subtitles, ingredients, how to, origins, image, comments etc.)
2. Sketch on paper a rough layout for all of the components (try at least 3 different options/versions) based on the importance, size, proximity of the content. Consider the importance of each piece of information. Will the different pages link back to each other, in addition to the navigation, why?
3. Translate your rough ideas into a predominantly text based HTML/CSS website applying the skills you have learnt so far. Consider how you will apply the main components of the text to different pages. What other content can you add to the client’s copy (text) to make the content more interesting?
4. Add some graphics to your site either from the images supplied by the client, or from graphics you find yourself. Try to communicate a clear graphic identity as per the client's request.

Solution PreviewSolution Preview

These solutions may offer step-by-step problem-solving explanations or good writing examples that include modern styles of formatting and construction of bibliographies out of text citations and references. Students may use these solutions for personal skill-building and practice. Unethical use is strictly forbidden.

<!DOCTYPE html>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="mycss.css" rel="stylesheet" type="text/css"/>
       <!--[if lt IE 9]>
<script src=""></script>
       <div class="wrapper">
                <div id="logo">
                        <img src="img/logo.jpg" alt="The AUS & NZ recipes" />                                                
                            <li><a href="recipe.html" class="current">recipes</a></li>
                        <li><a href="origin.html">origins</a></li>
                        <li><a href="comments.html">comments</a></li>
                            <li><a href="">about</a></li>
                            <li><a href="">contact</a></li>
            <section class="recipes">...

By purchasing this solution you'll be able to access the following files:

for this solution

or FREE if you
register a new account!

PayPal, G Pay, ApplePay, Amazon Pay, and all major credit cards accepted.

Find A Tutor

View available Web Development (HTML, XML, PHP, JavaScript, Adobe, Flash, etc.) Tutors

Get College Homework Help.

Are you sure you don't want to upload any files?

Fast tutor response requires as much info as possible.

Upload a file
Continue without uploading

We couldn't find that subject.
Please select the best match from the list below.

We'll send you an email right away. If it's not in your inbox, check your spam folder.

  • 1
  • 2
  • 3
Live Chats