0% found this document useful (0 votes)
24 views5 pages

Day 1 Task Build A Simple My Favorite Recipe Page

The document outlines a Day 1 task for interns at Datawind Digital Services, which involves creating a 'My Favorite Recipe' webpage using HTML and CSS. It provides detailed instructions on the required sections, including a header, introduction, ingredients list, instructions, and an image, along with styling guidelines. The task is expected to be completed in 2 days and includes optional bonus challenges for additional practice.

Uploaded by

prtabi2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
24 views5 pages

Day 1 Task Build A Simple My Favorite Recipe Page

The document outlines a Day 1 task for interns at Datawind Digital Services, which involves creating a 'My Favorite Recipe' webpage using HTML and CSS. It provides detailed instructions on the required sections, including a header, introduction, ingredients list, instructions, and an image, along with styling guidelines. The task is expected to be completed in 2 days and includes optional bonus challenges for additional practice.

Uploaded by

prtabi2002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

DATAWIND DIGITAL SERVICES

INTERN ASSIGN WORK | DAY 1

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.

Reference Document for Assigned work : LINK 1

Reference Document for Assigned work : LINK 2

Work Details

1. HTML Structure

Your webpage should include the following sections:

Header

●​ Add a header with the title: My Favorite Recipe.

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

❖​ Add an image of the dish:


➢​ If you don't have an actual image, use a placeholder image (e.g.,
https://placehold.co/600x400).

2. CSS Styling

Style the web page to make it more visually appealing and readable:

General Page Styling

●​ 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

❖​ Make the title stand out by:


➢​ Using a larger font size (e.g., font-size: 32px).
➢​ Center-aligning the text.
➢​ Making it bold.

List Styling

●​ Add spacing between list items for better readability.


●​ Use bullet points for the ingredients list and numbers for the instructions list.
Image Styling

❖​ Center the image on the page.


❖​ Add a border or shadow effect around the image to make it visually distinct.
➢​ Example: box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

3. Bonus Challenge (Optional)

❖​ 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

❖​ A functional web page with all required sections.


❖​ Two files:
➢​ index.html: Contains the HTML structure.
➢​ style.css: Contains the CSS for styling.
Example​

Duration
●​ Complete this task in 2 Days.
Good luck! Feel free to ask for help if you have any questions or need
clarification.

You might also like