Assignment 1 | Recipe Cards

Recipes: HTML & CSS Layouts

The task is to style the same HTML in many different ways using pure CSS (no images). This means that once the HTML is setup it won’t change (or just minimal when necessary). You’ll modify the CSS style sheet files instead. Since we don’t use images yet you’ll focus on two aspects: Styling type and making layout variations using some of the basic dimension and positioning techniques within CSS. Pay attention to quality/originality of the composition and the technical execution. The color, type choice and composition should be a visual representation of your specific dish.

Dimensions: Fixed width = 780px, centered on the screen. Height can be treated as needed.
Colors: A maximum of 3 colors can be used and grey scale. Keep the color palette consistent throughout your designs.
Fonts: Not more than 2 different font-family choices per composition

Experiment with typography (sizes, placement, color, background-color…) and composition. Multi-column/grid layouts are possible. Also consider the browser’s background-color as a design element of your composition. Your layout (780px wide) should appear horizontally centered in the browser window (left and ride sides are identical even after re sizing the browser). Create (at least) 10 coded recipe layouts.

Create a design for the first five layouts (prior to coding them) in Illustrator, Photoshop or InDesign. Try to code the other five layouts directly without creating a static design first. Upload JPGs (screenshots) of your first 5 designs to this website by Monday, Sept 02.

Exercise 1_1: Find a recipe for a simple dish
Exercise 1_2: Static Designs
Exercise 1_3: Write the HTML markup
Exercise 1_4: Create a CSS file

File Organization
You should have 10 folders, one for each different recipe card design. Within each folder, you should have one HTML file and one CSS file.

filesandfolders


Exercise 1_1
Find a recipe for a simple dish.

This recipe should include:

  • Title
  • Cooking time
  • List of ingredients
  • Directions
  • A footnote (such as origin of the recipe, for example)

All text should be digital which means you either copy it from a website or you type it. The text should be free of all formatting previously applied to it (such as bullet points for list etc.). We won’t use images for this assignment.

 


Exercise 1_2
Static Designs

Create designs for the first five layouts (prior to coding them) in Illustrator, Photoshop or InDesign. Try to code the other five layouts directly without creating a static design first. Upload JPGs (screenshots) of your first 5 designs to this website by Monday, Sept 02.

Dimensions: Fixed width = 780px, centered on the screen. Height can be treated as needed.
Colors: A maximum of 3 colors can be used and grey scale. Keep the color palette consistent throughout your designs.
Fonts: Not more than 2 different font-family choices per composition


Exercise 1_3
Write the HTML markup 

Writing this will help you get more familiar with HTML tags. Keep in mind that line breaks and text indents/tabs have no effect on the result rendered in a browser. The way to setup the markup this way is a matter of personal preferences.

BUT beside that code is VERY sensitive in regards to writing the opening and closing tags correctly. Be very careful with those. One missing “>” or misspelled tag will most likely break the layout.


Exercise 1_4
Create CSS files

Each of your designs should be created using the same HTML code and different CSS files. (See file organization image above). You will use CSS to create the five card designs you’ve made static designs for. For the second five cards, experiment with CSS to create new designs. Look through your book for different CSS features you can change.

 

Advertisements