Skip to content

Adding Registration form html and css files #3

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
ngumasamuel36-del wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding Registration form html and css files #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
096bf90
Adding Registration form html and css files
Apr 22, 2026
64a762b
Added html and css files for About me page
Apr 26, 2026
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
43 changes: 43 additions & 0 deletions About_me.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container{
max-width: 800px;
margin: 0 auto;
}

header, footer{
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}

section{
padding: 20px;
}

h1,h2{
margin-bottom: 10px;
}

nav a{
padding: 10px;
display:inline-block;
color: white;
text-decoration: none;
}

nav a:hover{
color:#ffd700;
}

h1{
color:darkblue;
}
h2{
color:darkblue;
}
78 changes: 78 additions & 0 deletions About_me.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<link rel="stylesheet" href="About_me.css">
</head>
<body>

<header>
<nav>
<a href="#">Home</a>
<a href="#">Skills</a>
<a href="#">Contact</a>
</nav>
</header>

<div class="container">
<main>
<section>
<h1>Samuel</h1>
<p class="highlight">Front-End Developer</p>

<p>My name is Samuel, I am a Web Developer student at SEED WOC26. I enjoy building
clean responsive websites and helping others learn how the wed works.</p>l
Comment on lines +26 to +27
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Stray l character and typo on Line 27.

There is a trailing l after the closing </p> tag that will render as visible text on the page. Additionally, "wed works" should be "web works".

✏️ Proposed fix 
-<p>My name is Samuel, I am a Web Developer student at SEED WOC26. I enjoy building
-    clean responsive websites and helping others learn how the wed works.</p>l
+<p>My name is Samuel, I am a Web Developer student at SEED WOC26. I enjoy building
+    clean responsive websites and helping others learn how the web works.</p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p>My name is Samuel, I am a Web Developer student at SEED WOC26. I enjoy building
clean responsive websites and helping others learn how the wed works.</p>l
<p>My name is Samuel, I am a Web Developer student at SEED WOC26. I enjoy building
clean responsive websites and helping others learn how the web works.</p>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@About_me.html` around lines 26 - 27, Remove the stray "l" character that
appears immediately after the closing </p> tag in the paragraph that starts "My
name is Samuel, I am a Web Developer student at SEED WOC26..." and correct the
typo "wed works" to "web works" within that same paragraph (the element
containing that text).

<p>Outside of coding, I have some soft skills like active listening and communication.
I am also passionate about business, entrepreneurship, research and creative projects.
<strong>Growth is my priority</strong>
</p>
</section>
</main>
Comment on lines +21 to +33
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Mismatched/duplicate <main> tags break document structure.

<main> is opened on Line 21 and closed on Line 33, but then closed again on Line 71 with no matching opening tag. This results in invalid HTML (also flagged by HTMLHint: tag-pair). Either remove the duplicate closing tag on Line 71, or move the </main> from Line 33 down so it actually wraps all sections (Skills, Things to learn, Contact), which is likely the intent.

🛠️ Suggested fix (wrap all content in a single ``) 
 <div class="container">
 <main>
     <section>
         <h1>Samuel</h1>
 ...
 </p>
 </section>
-</main>
 
 <hr>
 ...
 </section>
 </main>
 </div>

Also applies to: 71-71

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@About_me.html` around lines 21 - 33, The document has mismatched/duplicate
<main> tags causing invalid HTML; fix by ensuring a single <main> element wraps
all primary page sections (the opening <main> near the top and a single
corresponding </main> at the end). Locate the initial <main> opening and either
remove the stray closing </main> at the earlier spot (currently after the
About/Samuel section) or move that closing tag down so it closes after the
remaining sections (Skills, Things to learn, Contact); ensure no extra </main>
remains and validate tag pairing for <section> and </section> inside the single
<main>.


<hr>

<img src="https://via.placeholder.com/250"alt="Profile Photo">
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

via.placeholder.com deprecated removed status 2024 2025

💡 Result:

via.placeholder.com was deprecated and removed. It stopped working around early 2025 to March 2026. Multiple projects reported failures starting in January 2025, with explicit "does not work anymore" issues in March-April 2025 and as recent as March 2026. No official announcement found from the service owners, but consistent evidence from GitHub issues across Angular, GrapesJS, filefill, faker-ruby, and foundation-emails confirms shutdown. The main placeholder.com domain was repurposed for warehouse rentals since 2023, with via.placeholder.com lingering briefly before full discontinuation. Recommended replacements include placehold.co (drop-in compatible syntax), dummyimage.com, and local generators.

Citations:

🌐 Web query:

placehold.co placeholder service working available

💡 Result:

Yes, placehold.co is a working and available placeholder image service. The official website at https://placehold.co/ is accessible and provides detailed documentation on generating custom placeholder images in formats like SVG, PNG, JPEG, GIF, WebP, and AVIF. Features include customizable sizes (10x10 to 4000x4000 px), colors (hex or CSS names), text, fonts, and retina support (@2x/@3x). Status checks confirm it is up with no reported issues as of April 6, 2026 (last check ~18 hours prior to that date). It is actively used as a drop-in replacement for discontinued services like placeholder.com and placehold.it, with recent integrations in projects as late as March 2026. Example usage: https://placehold.co/600x400/0066cc/ffffff?text=Hello+World&font=roboto

Citations:

🏁 Script executed:

# Verify the file exists and check the actual code
if [ -f "About_me.html" ]; then
  sed -n '37p' About_me.html
else
  echo "File not found, searching for it..."
  find . -name "About_me.html" -type f 2>/dev/null | head -5
fi

Repository: fadigatardzenyuy/WOC26_Fadidev

Length of output: 137

Fix missing space between src and alt attributes, and replace defunct placeholder service.

Line 37 has no space between the src attribute's closing quote and the alt attribute: "250"alt="Profile Photo". Additionally, via.placeholder.com was deprecated and is no longer functional as of early 2025. Replace it with the working placehold.co service:

🛠️ Proposed fix 
-<img src="https://via.placeholder.com/250"alt="Profile Photo">
+<img src="https://placehold.co/250" alt="Profile Photo">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img src="https://via.placeholder.com/250"alt="Profile Photo">
<img src="https://placehold.co/250" alt="Profile Photo">
🧰 Tools
🪛 HTMLHint (1.9.2)

[error] 37-37: Special characters must be escaped : [ < ].

(spec-char-escape)

[error] 37-37: Special characters must be escaped : [ > ].

(spec-char-escape)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@About_me.html` at line 37, The <img> tag has a missing space between the src
attribute closing quote and the alt attribute and uses the defunct
via.placeholder.com service; update the <img> element so there is a space
between the src and alt attributes (i.e., "...250" alt="Profile Photo") and
change the src URL to use the working placehold.co service (e.g., replace the
domain and path accordingly to request a 250x250 placeholder) so the image loads
correctly.


<hr>

<section>
<h2>My Skills</h2>
<ul>
<li>Coding</li>
<li>Communication</li>
<li>Active listening</li>
<li>Business Strategy and Branding</li>
<li>Football</li>
</ul>
</section>
<hr>

<section>
<h2>Things I want to learn</h2>
<ul>
<li>Back-end Development</li>
<li>UI/UX Designing</li>
<li>Public speaking</li>
</ul>
</section>

<hr>

<section>
<h2>Contact</h2>
<p>
Email me here:
<a href="Ngumasamuel36@gmail.com">Email me</a>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Email link is missing the mailto: scheme.

href="Ngumasamuel36@gmail.com" will be treated as a relative URL by the browser and clicking the link will navigate to a non-existent page rather than opening the user's mail client. Prefix with mailto:.

🛠️ Proposed fix 
-    <a href="Ngumasamuel36@gmail.com">Email me</a>
+    <a href="mailto:Ngumasamuel36@gmail.com">Email me</a>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a href="Ngumasamuel36@gmail.com">Email me</a>
<a href="mailto:Ngumasamuel36@gmail.com">Email me</a>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@About_me.html` at line 68, The anchor tag with text "Email me" currently uses
href="Ngumasamuel36@gmail.com" which is treated as a relative URL; update the
anchor's href to include the mailto: scheme (i.e., change the href on the <a>
element that contains "Email me" so it begins with "mailto:") so clicking it
opens the user's mail client.

</p>
</section>
</main>
</div>

<footer>
<p>Built by Samuel-2026</p>
</footer>
</body>
</html>
46 changes: 46 additions & 0 deletions Registration_form/Form_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* applying google font */
body {
font-family:'Roboto', sans-serif;
background-color: #f4f4f4;
padding:20px
}
/* form styling */
form {
background-color: #ffffff;
padding:20px;
border-radius:8px;
max-width:400px;
margin:auto;
box-shadow:0 0 10pxrgba(0,0,0,0.1);
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Correct invalid box-shadow syntax.

10pxrgba is invalid (pxrgba is treated as an unknown unit), so the shadow is not applied.

✅ Proposed fix 
-    box-shadow:0 0 10pxrgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
box-shadow:0 0 10pxrgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
🧰 Tools
🪛 Stylelint (17.7.0)

[error] 14-14: Unknown unit "pxrgba" (unit-no-unknown)

(unit-no-unknown)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@Registration_form/Form_style.css` at line 14, Fix the invalid box-shadow
syntax in Form_style.css by correcting the box-shadow declaration (the
box-shadow property currently contains "10pxrgba" which is an unknown unit).
Update the value so there is a space between the blur radius and the color token
(use "rgba(0,0,0,0.1)" as the color) so the browser correctly applies the shadow
for the box-shadow property.

}
/*labels*/
label {
display:block;
margin-bottom:5px;
font-weight:bold;
}
/* input fields */
input,select,textarea{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid#ccc;
border-radius:4px;
}
Comment on lines +23 to +29
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Do not style all input types as full-width blocks.

This rule also hits radio buttons and the terms checkbox, making them render poorly and hurting form UX/accessibility.

✅ Proposed fix 
-  input,select,textarea{
+  input[type="text"],
+  input[type="email"],
+  input[type="tel"],
+  input[type="date"],
+  select,
+  textarea {
     width:100%;
     padding:10px;
     margin-bottom:15px;
     border:1px solid#ccc;
     border-radius:4px;
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
input,select,textarea{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid#ccc;
border-radius:4px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid#ccc;
border-radius:4px;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@Registration_form/Form_style.css` around lines 23 - 29, The global selector
"input,select,textarea" is forcing all input types (including radio and
checkbox) to be full-width and padded, breaking their layout; update the
selector to target only textual controls (e.g., use
input:not([type="radio"]):not([type="checkbox"]) or explicitly list types like
input[type="text"], input[type="email"], input[type="password"], plus select and
textarea) so radio buttons and the terms checkbox are excluded, and keep the
existing padding/width/border styles applied to the targeted textual controls
(refer to the original selector "input,select,textarea" to locate the rule).

/* submit button */
button{
width:100%;
padding:12px;
background-color:#007BFF;
color:white;
border:none;
border-radius:4px;
font-size:16px;
cursor:pointer;
}
/* hover effect for button */

button:hover{
background-color:#0056b3;
}

63 changes: 63 additions & 0 deletions Registration_form/Registration_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration form</title>
<link rel="stylesheet" href="Form_style.css">
</head>
<body>
<h1>Training Registration form</h1>
<form>
<!-- full name -->
<label for="fullname">Full name:</label><br>
<input type="text" id="fullname"name="fullname"required>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix malformed input attributes (missing spaces).

These tags are malformed due to missing spaces between attributes, which can break parsing/validation and required behavior.

✅ Proposed fix 
-             <input type="text" id="fullname"name="fullname"required>
+             <input type="text" id="fullname" name="fullname" required>

-              <input type="email" id="email" name="email"required>
+              <input type="email" id="email" name="email" required>

-                   <input type="checkbox" id="terms" name="terms"required>
+                   <input type="checkbox" id="terms" name="terms" required>

Also applies to: 19-19, 52-52

🧰 Tools
🪛 HTMLHint (1.9.2)

[error] 15-15: Special characters must be escaped : [ < ].

(spec-char-escape)

[error] 15-15: Special characters must be escaped : [ > ].

(spec-char-escape)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@Registration_form/Registration_form.html` at line 15, Fix the malformed input
attributes by inserting missing spaces between attributes on the input elements;
e.g., locate the input with id "fullname" (name "fullname", required) and ensure
there is a space between id, name and required, and apply the same spacing fix
to the other input tags flagged in the review that exhibit the same malformed
attribute concatenation.

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

<!-- phone number -->
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<!-- date of birth -->
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>

<!-- Gender -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>

<!-- course section -->
<label for="course" name="course"></label><br>
<select id="course" name="course">
Comment on lines +38 to +39
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Add visible label text for course selection.

The course <label> is empty, so assistive tech users won’t get a proper field name. Also, name is not valid/needed on <label>.

✅ Proposed fix 
-                  <label for="course" name="course"></label><br>
+                  <label for="course">Course:</label><br>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<label for="course" name="course"></label><br>
<select id="course" name="course">
<label for="course">Course:</label><br>
<select id="course" name="course">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@Registration_form/Registration_form.html` around lines 38 - 39, The <label
for="course"> element is empty and incorrectly includes a name attribute, which
hides the field name from assistive tech; update the label for the course select
(label for="course") to include visible descriptive text (e.g., "Course" or a
more specific prompt) and remove the unnecessary name attribute from the
<label>, leaving the <select id="course" name="course"> unchanged so the control
remains associated and accessible.

<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<br><br>

<!-- Message -->
<label for="message">Short Message/Motivation:</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
<br><br>

<!-- terms -->
<input type="checkbox" id="terms" name="terms"required>
<label for="terms">I agree to the training terms</label>
<br><br>

<!-- Submit -->
<button type="submit">Submit</button>

</form>


</body>
</html>