Skip to content

Manchester | ITP-September-2025 | Mohamed Zakaria | Sprint 2 | Form-Controls #891

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
adamazakaria2021 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Manchester | ITP-September-2025 | Mohamed Zakaria | Sprint 2 | Form-Controls #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
024fef6
Done:t-shirt design
mohamedarbab2023 Oct 4, 2025
f3f4497
Reset Wireframe for Form Control submission
adamazakaria2021 Oct 4, 2025
f8216ae
Remove Wireframe images from form controls
adamazakaria2021 Oct 4, 2025
654e0ef
wireframe done
adamazakaria2021 Oct 4, 2025
570b289
I wrote valid form
adamazakaria2021 Oct 7, 2025
f29253e
I have changed min-height
adamazakaria2021 Oct 7, 2025
56d8c5c
Wireframe content modified
adamazakaria2021 Oct 9, 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
41 changes: 37 additions & 4 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,58 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>My Form-Control</title>
<style>
input, select, button {
min-height: 15px;
padding: 10px;
margin-bottom: 12px;
}
</style>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>Selling T-shirts</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
<label for="fname">First name</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name</label><br>
<input type="text" id="lname" name="lname" value=""><br>
<label for="email">Email</label><br>
<input type="text" id="email" email="email" value=""><br>
<form>
<label for="tshirtColour">Colour</label>
<select id="tshirtColour" name="tshirtColour" required>
<option value="Black">Blac</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
<form>
<label for="tshirtSize">Size</label>
<select id="tshirtSize" name="tshirtSize" required>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</form>
<form>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<p2>By Mohamed Zakaria</p2>
</footer>
</body>
</html>
78 changes: 52 additions & 26 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
<main>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn about README files, wireframes, and Git branches." />
<title>Understanding README, Wireframes, and Git Branches</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<h1>Understanding README, Wireframes, and Git Branches</h1>
<p>A brief introduction to three key principles and tools for web development.</p>
</header>

<main>
<section class="articles">
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<h2>What is the Purpose of a README File?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A project is introduced and explained in a README file. It offers details about the project's functions, installation and usage instructions, and ways for others to get involved. When users or collaborators visit your repository, they frequently read it first.
</p>
<a href="">Read more</a>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener">Learn more about READMEs</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>

<article>
<h2>What is the Purpose of a Wireframe?</h2>
<p>
A wireframe is a visual guide that represents the skeletal framework of
a webpage or app. It helps designers and developers plan the layout,
user flow, and functionality before coding begins. Wireframes focus on
structure, not design.
</p>
<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank" rel="noopener">
Learn more about wireframes
</a>
</article>

<article>
<h2>What is a Branch in Git?</h2>
<p>
A branch in Git allows developers to work on different versions of a
project simultaneously. It lets you make changes, test features, or fix
bugs without affecting the main codebase. Once the work is complete,
branches can be merged back into the main branch.
</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener">
Learn more about Git branches
</a>
</article>
</section>
</main>

<footer>
<p>By Mohamed Zakaria</p>
</footer>
</body>
</html>