From ed37d0cd3684817b0a1eb793b17e7f5c6fae2496 Mon Sep 17 00:00:00 2001 From: Chibuikem Okwu <101254316+chibu0070@users.noreply.github.com> Date: Mon, 6 Oct 2025 23:28:53 +0100 Subject: [PATCH 1/2] Created branch called Wire frame after all changes were made earlier --- Wireframe/Untitled-1.txt | 22 +++++++++++++++ Wireframe/index.html | 59 ++++++++++++++++++++++++++++------------ 2 files changed, 64 insertions(+), 17 deletions(-) create mode 100644 Wireframe/Untitled-1.txt diff --git a/Wireframe/Untitled-1.txt b/Wireframe/Untitled-1.txt new file mode 100644 index 000000000..1f5c974ae --- /dev/null +++ b/Wireframe/Untitled-1.txt @@ -0,0 +1,22 @@ +
+

What is the purpose of a wireframe?

+

+ 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. +

+ + Learn more about wireframes + +
+ +
+

What is a branch in Git?

+

+ 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. +

+ + Learn more about Git branches + +
\ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..1a835e0e4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,56 @@ - Wireframe + Project Documentation & Git Concepts
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Project Documentation & Git Concepts

+

Learn about README files, wireframes, and Git branches

+
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
+
+
+

What is the purpose of a README file?

+

+ 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. +

+ + Learn more about README files + +
+ +
+

What is the purpose of a wireframe?

+

+ 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. +

+ + Learn more about wireframes + +
+ +
+

What is a branch in Git?

+

+ 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. +

+ + Learn more about Git branches + +
+
+ From b476a7f3b80a6bfaf0788be5f02595d45a4275ac Mon Sep 17 00:00:00 2001 From: Chibuikem Okwu <101254316+chibu0070@users.noreply.github.com> Date: Sat, 31 Jan 2026 15:48:20 +0000 Subject: [PATCH 2/2] Update README.md --- Form-Controls/README.md | 132 ++++++++++++++++++++++++++-------------- 1 file changed, 86 insertions(+), 46 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..67ae323f2 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -1,51 +1,91 @@ -# Form Controls + + + + + + T-Shirt Order Form + + +
+

T-Shirt Order Form

+

Please confirm your details and choose your t-shirt colour and size.

+
+ +
+
+ +
+ Customer Details + + + +

Enter at least 2 characters.

+ + + +

Enter a valid email address (e.g., name@example.com).

+
+ + +
+ Choose Your T-Shirt Colour + +

Pick one of the available colours below:

+ + + +
+ + +
+ Select Your Size + +

Please choose one size:

+ + + +
+ + + +
+
+ + + + -## Learning Objectives - -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools - -## 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)