Scribd
Upload
11 views9 pages

Kishvar Ssa2

Uploaded by

notkowsik007
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
11 views9 pages

Kishvar Ssa2

Uploaded by

notkowsik007
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/ 9

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SELF STUDY ASSIGNMENT – 2

(REAL TIME PROBLEMS)

CGB1101 - Web Application Development

Name : KISHVAR. C

Register No. : CSE082

Year / Sec : I / C4

Marks Awarded:

Technology/ Solution Conclusion


Descriptive Problem
Objective Methodology and and Total
Headline Analysis
(3) Adopted Results References (20)
(2) (4)
(4) (4) (3)

Assignment Topic CO PO addressed BTL Level

Create a page displaying a recipe with PO1, PO2, BTL 4


ingredients and instructions with a appropriate CO1 PO3, PO4,
images and link using css style. PO12
Create a page displaying a recipe with ingredients and instructions
with a appropriate images and link using css style.
Objective:

Create a visually appealing and easy-to-navigate recipe webpage that showcases


ingredients, instructions, and provides a link to additional recipes. This page should be
straightforward for users to access, and present information in a clear and readable format.

Problem Analysis:

1. User Requirement: The primary users are cooking enthusiasts looking for
clear and concise recipes. They need an intuitive layout for ingredient lists and step-
by-step instructions.

2. Design Challenges: A responsive design is essential to ensure the page


displays well on both desktop and mobile devices. Additionally, the text and images
need to complement each other without cluttering the page.

Technology/ Methodology Adopted:

1. HTML: Used for structuring the content of the page, dividing it into
sections such as header, recipe content, and footer.

2. CSS: Employed for styling, including layout adjustments, color schemes,


fonts, and responsiveness.

3. Responsive Design: CSS Flexbox is used to structure the layout,


providing adaptability to different screen sizes.

Solution:

1. Responsive Layout: Using CSS Flexbox allows the recipe content to align
side-by-side on larger screens, enhancing readability.

2. Styling: Colors, padding, and margins make the text readable and ensure
the page has an inviting look.

3. Navigation: A footer link to additional recipes encourages user engagement


and offers further value.
Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Delicious Recipe</title>

<style>

/* Global Styles */

body {

font-family: Arial, sans-serif;

background-color: #f3f3f3;

color: #333;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.recipe-container {

max-width: 600px;

background-color: #fff;

padding: 20px;

border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

h1 {

font-size: 2rem;

color: #d2691e;

text-align: center;

margin-bottom: 20px;

.recipe-image img {

width: 100%;

border-radius: 8px;

.ingredients-section, .instructions-section {

margin-top: 20px;

h2 {

font-size: 1.5rem;

color: #333;

margin-bottom: 10px;

ul, ol {

margin: 0;
padding: 0;

list-style-position: inside;

li {

margin: 5px 0;

.recipe-link {

margin-top: 20px;

text-align: center;

.recipe-link a {

text-decoration: none;

color: #fff;

background-color: #d2691e;

padding: 10px 20px;

border-radius: 5px;

transition: background-color 0.3s ease;

.recipe-link a:hover {

background-color: #c1521d;

</style>

</head>
<body>

<div class="recipe-container">

<!-- Recipe Title -->

<h1>Classic Chocolate Chip Cookies</h1>

<!-- Recipe Image -->

<div class="recipe-image">

<img src="chocolate-chip-cookies.jpg" alt="Chocolate Chip Cookies">

</div>

<!-- Ingredients Section -->

<div class="ingredients-section">

<h2>Ingredients</h2>

<ul>

<li>1 cup butter, softened</li>

<li>1 cup white sugar</li>

<li>1 cup packed brown sugar</li>

<li>2 eggs</li>

<li>2 tsp vanilla extract</li>

<li>3 cups all-purpose flour</li>

<li>1 tsp baking soda</li>

<li>2 tsp hot water</li>

<li>1/2 tsp salt</li>

<li>2 cups chocolate chips</li>

<li>1 cup chopped walnuts (optional)</li>

</ul>

</div>
<!-- Instructions Section -->

<div class="instructions-section">

<h2>Instructions</h2>

<ol>

<li>Preheat oven to 350°F (175°C).</li>

<li>Cream together the butter, white sugar, and brown sugar until smooth.</li>

<li>Beat in the eggs one at a time, then stir in the vanilla.</li>

<li>Dissolve baking soda in hot water and add to the batter along with salt.</li>

<li>Stir in flour, chocolate chips, and nuts.</li>

<li>Drop by large spoonfuls onto ungreased pans.</li>

<li>Bake for about 10 minutes, or until edges are nicely browned.</li>

</ol>

</div>

<!-- Link to Full Recipe -->

<div class="recipe-link">

<a href="https://www.example.com/full-recipe" target="_blank">View Full


Recipe</a>

</div>

</div>

</body>

</html>
Output:
Results:

The final page meets user needs by providing a clear, concise recipe structure.
The page is functional, visually appealing, and responsive, ensuring usability on a
range of devices.

Conclusion:

This webpage effectively displays recipe details in an accessible format.


Leveraging HTML and CSS, the layout is both responsive and easy to navigate,
enhancing the overall user experience.

References

1.MDN Web Docs: HTML

2.MDN Web Docs: CSS

3.W3Schools CSS Flexbox Guide

You might also like