Assignment: Build a narrative webpage around a featured recipe and links to other recipes.
Look at the examples to understand what a recipe page is supposed to do. It has a purpose, and the
parts of the page do different "jobs" for the reader.
Choose a recipe or two for the main subject of your page.
Collect photos, a list of the ingredients and amounts, the instructions.
What else is on a good recipe web page?
Update your website before each class, and add a link for each stage of progress (v1,
v2, v3, final)
Before you start: A few sketches and a blank canvas
Start with a few quick sketches on paper that show content areas of your web page.
Will you use a list? Some icons? A photo carousel? Videos?
Create your project folder with a css folder, an images folder, and a blank html file.
You must begin coding with a blank canvas!
Build one section that is responsive and has two or three simple design elements
that you will re-use throughout your project.
Is your first section responsive? Test it in your browser!
Next, duplicate that section, and modify it for your content needs.
Test it and repeat...
After the basic framework is built, add your real text, add images, and then make some
design or layout variations to the sections of the case study.
Practice, Repetition, Good habits
Practice and repetition are the best ways to learn coding and web design!
I want to see your progress each step of the way.
We will be working in code pairs again.
We'll be working on this project for a few classes, so keep your files and
folders organized, save your work frequently.
Force yourself to start over with a blank canvas for each version!
I will be looking for:
Good coding -- you started with a blank canvas, your page is responsive, proper indenting of
HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for
your layout, and organized project folders.
Good content -- a clear theme, a narrative featuring your recipe, use of your own
work for the text and images.
Good design -- customization, use of color, fonts and typography and strong images.