Skip to content

navya-html-projects #526

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
navya-1417 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

navya-html-projects #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 26 additions & 0 deletions html/5-projects/navya/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>HTML Assignments | Your Name</title>
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 page title includes placeholder text "Your Name". This should be updated to reflect your actual name for a more accurate and professional page title.

Suggested change
<title>HTML Assignments | Your Name</title>
<title>HTML Assignments | Navya Jain</title>

</head>

<body>
<details>
<summary>Assignment 1</summary>
<iframe src="./project-1/personal-homepage.html" frameborder="0" width="100%"></iframe>
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 frameborder attribute is obsolete in HTML5 and should not be used. Styling should be done with CSS. Additionally, for accessibility, it's important to provide a title attribute for <iframe> elements so screen readers can describe the frame's content to the user.

Suggested change
<iframe src="./project-1/personal-homepage.html" frameborder="0" width="100%"></iframe>
<iframe src="./project-1/personal-homepage.html" title="Assignment 1: Personal Homepage" style="border:0;" width="100%"></iframe>

</details>

<details>
<summary>
Assignment 2
</summary>
Comment on lines +18 to +20
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 formatting of this <summary> tag is inconsistent with the one for 'Assignment 1'. For better readability and consistency, it's good practice to keep formatting uniform across similar elements.

        <summary>Assignment 2</summary>

<iframe src="./project-2/product-landing_page.html" frameborder="0" width="100%"></iframe>
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

Similar to the previous iframe, the frameborder attribute is obsolete and should be replaced with CSS. A title attribute is also missing, which is important for accessibility.

        <iframe src="./project-2/product-landing_page.html" title="Assignment 2: Product Landing Page" style="border:0;" width="100%"></iframe>

</details>

</body>

</html>
68 changes: 68 additions & 0 deletions html/5-projects/navya/project-1/personal-homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Homepage</title>
</head>

<body>

<header>
<h1>My Personal Homepage</h1>
</header>


<section>
<h2>About Me</h2>
<p>Hello! I am Navya Jain, a Technical Consultant focused on making technology work for people.</p>
</section>

<section>
<h2>Education</h2>
<p>Bachelor of Engineering in Computer Science from Chandigarh University</p>
<p>Graduation Date: <time datetime="2025-06-01">June 2025</time></p>
</section>

<section>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>Semantic HTML</li>
<li>Basic JavaScript</li>
<li>Problem Solving</li>
</ul>
</section>


<section>
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
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 <br> tags for creating space between elements is not a recommended practice. All layout and spacing should be handled by CSS for better control and maintainability. A more semantic approach would be to wrap each label/input pair in a block-level element like <p> or <div>. This comment also applies to lines 48, 52, and 56.


<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<br><br>

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
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 <textarea> element should ideally have rows and cols attributes to define its default size. This ensures a consistent appearance even if CSS fails to load. Also, consider adding the required attribute if you want to make sure the user fills in this field.

Suggested change
<textarea id="message" name="message"></textarea>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>

<br><br>

<button type="submit">Send</button>
</form>
</section>

<footer>
<p>&copy; Navya Jain. All rights reserved.</p>
</footer>

</body>

</html>
87 changes: 87 additions & 0 deletions html/5-projects/navya/project-2/product-landing_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
</head>

<body>

<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#plans">Plans</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>


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

This line is empty and contains whitespace. It can be removed to improve code formatting and cleanliness.

<header>
<h1>TechGadget Pro</h1>
<p>The ultimate solution to simplify your tech life.</p>
</header>

<section id="features">
<h2>Product Features</h2>
<p>TechGadget Pro is designed to make your daily tasks easier, faster, and smarter. It combines cutting-edge
technology with user-friendly design.</p>
<ul>
<li>High-performance hardware</li>
<li>Intuitive interface</li>
<li>Seamless connectivity</li>
<li>Affordable and flexible plans</li>
</ul>
</section>

<section id="video">
<h2>Product Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video"
frameborder="0"
Comment on lines +41 to +42
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 frameborder attribute is obsolete in HTML5. Styling should be handled with CSS. I've replaced it with an inline style attribute. For better practice, consider moving styles to a <style> block or an external stylesheet.

Suggested change
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video"
frameborder="0"
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video" style="border: 0;"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</section>


<section id="plans">
<h2>Product Plans</h2>
<table border="1">
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 border attribute is a presentational attribute and its use is discouraged in HTML5. All styling, including table borders, should be managed with CSS. You can remove this attribute and add CSS rules for table, th, and td to create the desired borders.

Suggested change
<table border="1">
<table>

<caption>Choose the right plan for you</caption>
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>$9.99/month</td>
<td>Access to core features</td>
</tr>
<tr>
<td>Pro</td>
<td>$19.99/month</td>
<td>Core features + priority support</td>
</tr>
<tr>
<td>Premium</td>
<td>$29.99/month</td>
<td>All features + exclusive updates</td>
</tr>
</tbody>
</table>
</section>


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

This line is empty and contains whitespace. It can be removed for cleaner code.

<footer id="contact">
<p>&copy; 2025 TechGadget Pro. Contact: info@techgadget.com</p>
</footer>

</body>

</html>