Day 1 Task Build A Simple My Favorite Recipe Page
Day 1 Task Build A Simple My Favorite Recipe Page
Objective
Create a webpage that showcases your favorite recipe using HTML and CSS. This task will help
you practice structuring a webpage and applying basic styles to make it visually appealing.
Work Details
1. HTML Structure
Header
Introduction
❖ Write a short paragraph introducing the recipe. Include details such as:
➢ Why do you like this recipe?
➢ Any special memories associated with it.
Ingredients
❖ Create an unordered list (<ul>) of ingredients required for the recipe. For example:
➢ 1 cup of flour
➢ 2 eggs
➢ 1/2 cup of sugar
Instructions
❖ Create an ordered list (<ol>) with step-by-step instructions on how to prepare the dish.
For example:
1. Preheat the oven to 350°F.
2. Mix the dry ingredients in a bowl.
3. Add the wet ingredients and stir well.
Image
2. CSS Styling
Style the web page to make it more visually appealing and readable:
● Set a background color for the entire page (e.g., light pastel colors like #f9f9f9).
● Add padding and margins to separate sections and improve readability.
● Use a clean, readable font (e.g., Arial, Helvetica, or a Google Font like Roboto).
Header Styling
List Styling
❖ Add a hover effect to the recipe image (e.g., scale it up slightly when hovered).
➢ Example: transform: scale(1.05);
❖ Use Flexbox to center-align the content of the webpage.
Expected Deliverables
Duration
● Complete this task in 2 Days.
Good luck! Feel free to ask for help if you have any questions or need
clarification.