Skip to content

Wire frame #1111

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

Closed
chibu0070 wants to merge 2 commits into from
Closed

Wire frame #1111

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
ed37d0c
Created branch called Wire frame after all changes were made earlier
chibu0070 Oct 6, 2025
b476a7f
Update README.md
chibu0070 Jan 31, 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
132 changes: 86 additions & 46 deletions Form-Controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,91 @@
# Form Controls
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-Shirt Order Form</title>
</head>
<body>
<header>
<h1>T-Shirt Order Form</h1>
<p>Please confirm your details and choose your t-shirt colour and size.</p>
</header>

<main>
<form aria-label="T-Shirt Order Form">
<!-- Customer Name -->
<fieldset>
<legend>Customer Details</legend>

<label for="name">Full Name:</label>
<input
type="text"
id="name"
name="name"
minlength="2"
required
aria-required="true"
aria-describedby="nameHelp"
>
<p id="nameHelp">Enter at least 2 characters.</p>

<label for="email">Email Address:</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-describedby="emailHelp"
>
<p id="emailHelp">Enter a valid email address (e.g., name@example.com).</p>
</fieldset>

<!-- T-Shirt Colour -->
<fieldset>
<legend>Choose Your T-Shirt Colour</legend>

<p>Pick one of the available colours below:</p>

<label for="colour">T-Shirt Colour:</label>
<select id="colour" name="colour" required aria-required="true">
<option value="" disabled selected>-- Select Colour --</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
</select>
</fieldset>

<!-- T-Shirt Size -->
<fieldset>
<legend>Select Your Size</legend>

<p>Please choose one size:</p>

<label for="size">Size:</label>
<select id="size" name="size" required aria-required="true">
<option value="" disabled selected>-- Select Size --</option>
<option value="XS">Extra Small (XS)</option>
<option value="S">Small (S)</option>
<option value="M">Medium (M)</option>
<option value="L">Large (L)</option>
<option value="XL">Extra Large (XL)</option>
<option value="XXL">Double Extra Large (XXL)</option>
</select>
</fieldset>

<!-- Submit -->
<button type="submit">Submit Order</button>
</form>
</main>

<footer>
<p>© 2025 T-Shirt Store</p>
</footer>
</body>
</html>

## Learning Objectives

<!--{{<objectives>}}>-->

- [ ] Interpret requirements and check against a list of criteria
- [ ] Write a valid form
- [ ] Test with Devtools
- [ ] Refactor using Devtools
<!--{{<objectives>}}>-->

## Task

We are selling t-shirts. Write a form to collect the following data:

Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size.

Writing that out as a series of questions to ask yourself:

1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL

All fields are required.
Do not write a form action for this project.

## Developers must test their work.

Let's write out our testable criteria. Check each one off as you complete it.

- [ ] I have used HTML only.
- [x] I have not used any CSS or JavaScript.

### HTML

- [ ] My form is semantic html.
- [ ] All inputs have associated labels.
- [ ] My Lighthouse Accessibility score is 100.
- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
- [ ] I require a valid email.
- [ ] I require one colour from a defined set of 3 colours.
- [ ] I require one size from a defined set of 6 sizes.

## Resources

- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
22 changes: 22 additions & 0 deletions Wireframe/Untitled-1.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<article>
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a simple visual guide showing the structure of a webpage
or app. It helps plan layout and user experience before development or
design begins.
</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 is an independent line of development. It lets you work
on new features or bug fixes without affecting the main codebase.
</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>
59 changes: 42 additions & 17 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,56 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Project Documentation & Git Concepts</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>
<h1>Project Documentation & Git Concepts</h1>
<p>Learn about README files, wireframes, and Git branches</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
<section>
<article>
<h2>What is the purpose of a README file?</h2>
<p>
A README file introduces and explains a project. It contains installation
instructions, usage guides, and contribution info so others can understand
and use your project effectively.
</p>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener">
Learn more about README files
</a>
</article>

<article>
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a simple visual guide showing the structure of a webpage
or app. It helps plan layout and user experience before development or
design begins.
</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 is an independent line of development. It lets you work
on new features or bug fixes without affecting the main codebase.
</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>
This is the default, provided code and no changes have been made yet.
</p>
<p>© 2025 My Project Documentation Page chibu0070@gmail.com</p>
</footer>
</body>
</html>
Loading