Now that you’ve learned how to make a basic web page using HTML and CSS, you’re going to get creative with your skills! For this activity, you will be making a web page with a tutorial explaining a favorite hobby, game, or process.
For an example, check out this tutorial of how to play a tambourine!
Your tutorial must include the following elements:
An informative title
A brief overall description of the hobby, skill, or process
At least two different headings
An ordered list to show the steps required, with a nested unordered list for at least one step (Remember what nested means? Think “a list within a list”)
A picture for each ordered list that demonstrates the corresponding part of the process
At least four CSS rules for the various elements on your web page
A caption under each picture that includes the source of the image
Title: How to Bake a Chocolate Chip Cookie
Description:
In this tutorial, you will learn how to bake delicious chocolate chip cookies from scratch. Follow the step-by-step instructions below to create mouthwatering cookies that are perfect for any occasion.
Headings:
1. Ingredients
2. Baking Instructions
Ordered List:
1. Ingredients
- 2 and 1/4 cups all-purpose flour
- 1 teaspoon baking soda
- 1/2 teaspoon salt
- 1 cup unsalted butter, softened
- 3/4 cup granulated sugar
- 3/4 cup packed brown sugar
- 1 teaspoon vanilla extract
- 2 large eggs
- 2 cups semisweet chocolate chips
2. Baking Instructions
a. Preheat the oven to 375°F (190°C)
- [Picture of preheating oven](image-source.com/preheat-oven.jpg)
b. In a medium bowl, combine the flour, baking soda, and salt. Set aside.
- [Picture of combined dry ingredients](image-source.com/combined-dry-ingredients.jpg)
c. In a large bowl, cream together the butter, granulated sugar, and brown sugar until light and fluffy.
- [Picture of creamed butter and sugars](image-source.com/creamed-butter-sugars.jpg)
d. Beat in the vanilla extract and eggs, one at a time, until well combined.
e. Gradually add the dry ingredient mixture to the wet ingredients and mix until just combined. Stir in the chocolate chips.
f. Drop rounded tablespoons of dough onto ungreased baking sheets, spacing them about 2 inches apart.
- [Picture of cookie dough on baking sheet](image-source.com/dough-on-baking-sheet.jpg)
g. Bake for 9-11 minutes or until golden brown. Cool on baking sheets for 2 minutes before transferring to a wire rack to cool completely.
CSS Rules:
1. body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
2. h1 {
color: #333;
text-align: center;
}
3. img {
display: block;
max-width: 100%;
margin: 0 auto;
}
4. .caption {
text-align: center;
font-style: italic;
color: #777;
}
Caption Sources:
1. Image Source: Unsplash.com
2. Image Source: Pixabay.com
3. Image Source: Freepik.com
4. Image Source: Shutterstock.com