Skip to content

Durga-css-basics #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Saidurgasatturi wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Durga-css-basics #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9a7c08
durga-css-basics
Saidurgasatturi Sep 17, 2025
45bf102
durga-css-basics
Saidurgasatturi Sep 23, 2025
a269722
durga-css-basics
Saidurgasatturi Sep 23, 2025
d2bc221
durga-css-basics
Saidurgasatturi Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Binary file added css/basics/Assignment-1/apty_image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions css/basics/Assignment-1/basic_webpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS</title>

<link rel="stylesheet" href="style.css">

<style>
* {
margin: 0;
padding: 0;
}
p {
font-size: 18px;
}
.container {
background-color: #f5f5f5;
padding: 20px;
align-items: center;
}
Comment on lines +18 to +22
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The align-items: center; property is ineffective here because it only applies to flex containers (display: flex or inline-flex). Since .container is a standard block element, this property has no effect. The text and image content within are already being centered by other means, so this line can be safely removed.

Suggested change
.container {
background-color: #f5f5f5;
padding: 20px;
align-items: center;
}
.container {
background-color: #f5f5f5;
padding: 20px;
}

img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="container">
<h1 id="main-heading">Welcome to My Webpage</h1>

<p>This is a simple webpage demonstrating inline, internal, and external CSS styling.</p>

<ul>
<li style="color: blue;">This list item is styled using inline CSS</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>

<img src="apty_image.png" alt="Sample Image of Apty">
</div>
</body>
</html>
13 changes: 13 additions & 0 deletions css/basics/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@

#main-heading {
font-size: 32px;
color: darkgreen;
text-align: center;
margin-bottom: 15px;
}

ul li {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The ul li selector is too generic and will style every list item inside any unordered list across the entire site. This can lead to unintended side effects and styling conflicts. It's a best practice to scope selectors to the specific component they are intended for, for instance, by prefixing it with a parent class like .container.

Suggested change
ul li {
.container ul li {

color: darkred;
margin: 5px 40px;
line-height: 1.5rem;
}
Binary file added css/basics/Assignment-2/cake_image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
143 changes: 143 additions & 0 deletions css/basics/Assignment-2/recipe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Chocolate Cake</title>


<style>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #fafafa;
color: #333;
}

section {
margin: 10px auto;
width: 90%;
max-width: 900px;
border-radius: 15px;
padding: 20px;
}
#recipe-name {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using IDs for styling (like #recipe-name) leads to high specificity, which can make your CSS difficult to override and maintain. It's a best practice to use classes for styling to create more reusable and scalable stylesheets. If you change this to a class selector (.recipe-name), remember to also update the HTML from id="recipe-name" to class="recipe-name".

Suggested change
#recipe-name {
.recipe-name {

background-color: #e63946;
color: white;
text-align: center;
padding: 30px 20px;
font-size: 42px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 12px;
margin-top: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#ingredients {
background-color: #d4edda;
}

#ingredients h2 {
margin-bottom: 15px;
color: #155724;
font-size: 26px;
}

#ingredients ul {
list-style-type: disc;
margin-left: 20px;
font-size: 18px;
line-height: 1.8;
}
#steps {
background-color: #fff3cd;
}

#steps h2 {
margin-bottom: 15px;
color: #856404;
font-size: 26px;
}

#steps ol {
margin-left: 20px;
font-size: 18px;
line-height: 1.9;
}
#dish-image {
background-color: #f8f9fa;
text-align: center;
}

#dish-image img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
margin-bottom: 10px;
}

#dish-image p {
font-style: italic;
font-size: 16px;
color: #555;
}

@media (max-width: 600px) {
#recipe-name {
font-size: 28px;
padding: 20px;
}
#ingredients ul, #steps ol {
font-size: 16px;
}
section {
padding: 15px;
}
Comment on lines +101 to +103
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The section selector in this media query is too broad and will apply to all <section> elements, overriding their individual padding settings on smaller screens. For example, it reduces the padding on the #recipe-name section. To avoid such unintended consequences, use more specific selectors or a shared class for sections that require this responsive padding adjustment.

}
</style>
Comment on lines +9 to +105
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Per the best practices in the PR description, CSS should be organized into modular, external files. Placing all of this CSS into a separate file (e.g., recipe.css) and linking it in the <head> with <link rel="stylesheet" href="recipe.css"> will improve separation of concerns, make the code more maintainable, and allow browsers to cache the stylesheet.

</head>
<body>
<section id="recipe-name">
Delicious Chocolate Cake
</section>
Comment on lines +108 to +110
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The main title of the page, "Delicious Chocolate Cake", is placed directly within a <section> tag as plain text. For semantic correctness and accessibility, it should be wrapped in an <h1> tag. Heading tags are crucial for screen readers and search engines to understand the document's structure.

Suggested change
<section id="recipe-name">
Delicious Chocolate Cake
</section>
<section id="recipe-name">
<h1>Delicious Chocolate Cake</h1>
</section>

<section id="ingredients">
<h2>Ingredients</h2>
<ul>
<li>2 cups all-purpose flour</li>
<li>1 and 1/2 cups sugar</li>
<li>3/4 cup cocoa powder</li>
<li>1 and 1/2 tsp baking soda</li>
<li>1 and 1/2 tsp baking powder</li>
<li>2 large eggs</li>
<li>1 cup milk</li>
<li>1/2 cup vegetable oil</li>
<li>2 tsp vanilla extract</li>
<li>1 cup boiling water</li>
</ul>
</section>
<section id="steps">
<h2>Preparation Steps</h2>
<ol>
<li>Preheat oven to 350°F (175°C). Grease and flour two cake pans.</li>
<li>In a bowl, whisk together flour, sugar, cocoa powder, baking soda, and baking powder.</li>
<li>Add eggs, milk, oil, and vanilla. Mix until smooth.</li>
<li>Slowly stir in boiling water until batter is well mixed.</li>
<li>Pour batter into pans and bake for 30–35 minutes.</li>
<li>Let cakes cool before frosting and serving.</li>
</ol>
</section>

<section id="dish-image">
<img src="cake_image.jpg" alt="Delicious Chocolate Cake">
<p>A rich and moist chocolate cake, perfect for celebrations.</p>
</section>
</body>
</html>
Binary file added css/basics/Assignment-3/mypicture.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/basics/Assignment-3/profilecard_1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/basics/Assignment-3/profilecard_2.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions css/basics/Assignment-3/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@

body {
font-family: Arial, sans-serif;
background-color: #f2f5f9;
margin: 0;
padding: 0;
}

.team-container {
margin: 20px auto;
padding: 20px;
border: 3px solid #ccc;
background-color: #fff;
width: 90%;
max-width: 1200px;
text-align: center;
}

.gallery-title {
margin-bottom: 20px;
font-size: 2rem;
color: #333;
}

.profile-card {
display: inline-block;
width: 280px;
margin: 15px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 10px;
background-color: #fafafa;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.187);
vertical-align: top;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
Comment on lines +25 to +36
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

You're using display: inline-block to create the gallery layout. A more modern and flexible approach is to use Flexbox. By applying display: flex, flex-wrap: wrap, and justify-content: center to the parent .team-container, you can achieve a more robust layout. This also allows you to use the gap property for spacing, which can simplify the CSS for .profile-card by removing the need for margin and vertical-align.


.profile-card:hover {
transform: scale(1.05);
box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
}

.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #333;
margin-bottom: 10px;
}

.profile-card h2 {
margin: 10px 0 5px;
font-size: 1.4rem;
color: #222;
}

.profile-card h3 {
margin: 5px 0 10px;
font-size: 1rem;
color: #666;
}

.bio {
font-size: 0.9rem;
color: #444;
margin-bottom: 10px;
}

.contact {
font-size: 0.85rem;
color: #333;
line-height: 1.4;
}

@media (max-width: 768px) {
.profile-card {
width: 90%;
}
}
55 changes: 55 additions & 0 deletions css/basics/Assignment-3/team_gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Member Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="team-container">
<h1 class="gallery-title">Our Team</h1>


<div class="profile-card">
<img src="profilecard_1.jpg" alt="John Doe" class="profile-pic">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The alt text "John Doe" does not match the team member's name, "Sai". For accessibility, the alt text for a profile picture should be the person's name to provide equivalent information to users of screen readers.

Suggested change
<img src="profilecard_1.jpg" alt="John Doe" class="profile-pic">
<img src="profilecard_1.jpg" alt="Sai" class="profile-pic">

<h2>Sai</h2>
<h3>Front-End Developer</h3>
<p class="bio">
Sai builds dynamic web pages using JavaScript frameworks.
</p>
<p class="contact">
📧 sai.ali@example.com <br>
📞 +1234567890
</p>
</div>

<div class="profile-card">
<img src="profilecard_2.webp" alt="Jane Smith" class="profile-pic">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The alt text "Jane Smith" does not match the team member's name, "Durga". For accessibility, the alt text for a profile picture should be the person's name to provide equivalent information to users of screen readers.

Suggested change
<img src="profilecard_2.webp" alt="Jane Smith" class="profile-pic">
<img src="profilecard_2.webp" alt="Durga" class="profile-pic">

<h2>Durga</h2>
<h3>Back-End Developer</h3>
<p class="bio">
Durga specializes in server-side logic and database management.
</p>
<p class="contact">
📧 Durga.satt@example.com <br>
📞 +0987654321
</p>
</div>

<div class="profile-card">
<img src="mypicture.jpg" alt="Mike Lee" class="profile-pic">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The alt text "Mike Lee" does not match the team member's name, "Sai Durga". For accessibility, the alt text for a profile picture should be the person's name to provide equivalent information to users of screen readers.

Suggested change
<img src="mypicture.jpg" alt="Mike Lee" class="profile-pic">
<img src="mypicture.jpg" alt="Sai Durga" class="profile-pic">

<h2>Sai Durga</h2>
<h3>UI/UX Designer</h3>
<p class="bio">
Sai Durga creates user-friendly interfaces with modern design principles.
</p>
<p class="contact">
📧 saidurga.satturi@example.com <br>
📞 +1122334455
</p>
</div>

</div>
</body>
</html>