wk 2 - pr // recipe -- DESN 368

DESN 368

wk 2 – pr // recipe

Web Design Fundamentals · Spring 2026

Active

Overview

Create a well-structured HTML recipe page using the recipe you brought to class. This assignment will help you practice the fundamental HTML elements we've covered in Week 1.

Objectives

Practice proper HTML document structure
Use semantic HTML elements appropriately
Understand the difference between ordered and unordered lists
Work with text formatting and emphasis
Add images and links to your page
Build confidence with CodePen as your development environment

Required HTML Elements

Your recipe page must include all of the following elements:

Headings

<h1> – Main recipe title
<h2> – At minimum, section headings (Examples: "Ingredients", "Instructions", "About This Recipe")

Text Elements

<p> – Paragraph text for descriptions, stories, or tips about your recipe
<br> – Line breaks where appropriate (use sparingly!)
<strong> – For important text that should be bold
<em> – For emphasized text (italics)

Lists

<ul> – Unordered list with minimum 3 items
- Example use: Ingredients list
<ol> – Ordered list with minimum 3 items
- Example use: Step-by-step instructions

Where to Work: CodePen

Getting Started with CodePen

Go to codepen.io
Click "Start Coding" or "Create" → "Pen"
You'll see three panels: HTML, CSS, and JS
For this assignment, you'll only work in the HTML panel
The preview will update automatically as you type!

CodePen Tips

You don't need to include <!DOCTYPE html>, <html>, <head>, or <body> tags in CodePen – it handles those automatically
Start typing your <h1> tag right away!
Save your work frequently (click "Save" in the top right)
You can fork your pen to create versions if you want to experiment

Submission Guidelines

What to Submit

CodePen Link: The URL to your saved CodePen
- Make sure your pen is saved and the link works!
- Test by opening the link in a private/incognito window
Add your pen to this milanote board: https://app.milanote.com/1Wa7uN1iA4nL7z?p=1kaC1j7112i