From a0943dd7d801b3159965f1202734a2981333f1ea Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Thu, 15 Jan 2026 12:59:27 +0000 Subject: [PATCH 01/12] Update text to answer three questions in 3 articles, with links. --- Wireframe/index.html | 51 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7a532ddc0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,60 @@ - Wireframe + Wireframe Webcode Assignment

Wireframe

- This is the default, provided code and no changes have been made yet. + This is the initial DRAFT version of this page.

-

Title

+

Wireframe schematic

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Wireframe is a visual guide that represents the skeletal framework + of a website or application. Its purpose is to outline the layout.

Read more -
-
- From 3e103544107a7267a5db3d12bb15d8015649a658 Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Thu, 15 Jan 2026 14:33:45 +0000 Subject: [PATCH 02/12] Changes to page formatting into Wireframe template --- Wireframe/index.html | 44 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7a532ddc0..fa6471dc8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -5,10 +5,50 @@ Wireframe Webcode Assignment - + + + + +
+
Top Article (Centered)
+
Bottom Left Article
+
Bottom Right Article
+
+ +
-

Wireframe

+

Wireframe to Webcode Assignment

This is the initial DRAFT version of this page.

From 73b1697e577ec0e5e26002742fa970eddcfdaa37 Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Fri, 23 Jan 2026 11:31:26 +0000 Subject: [PATCH 03/12] Update to Forms for Sprint 2 exercise --- Form-Controls/Draft | 1 + Form-Controls/index.html | 28 +++++++++----- Wireframe/index.html | 84 ++++++++++------------------------------ Wireframe/old_index.html | 72 ++++++++++++++++++++++++++++++++++ 4 files changed, 113 insertions(+), 72 deletions(-) create mode 100644 Form-Controls/Draft create mode 100644 Wireframe/old_index.html diff --git a/Form-Controls/Draft b/Form-Controls/Draft new file mode 100644 index 000000000..74e0f12e3 --- /dev/null +++ b/Form-Controls/Draft @@ -0,0 +1 @@ +! \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..adc36ccef 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -2,21 +2,31 @@ - - My form exercise - - + + + + + Form -
-

Product Pick

-
-
-
+ + +
+ +
+
+
+ +
+
+
+ +
+
diff --git a/Wireframe/index.html b/Wireframe/index.html index fa6471dc8..e39ac329e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,79 +3,31 @@ - Wireframe Webcode Assignment + Wireframe to Webcode Assignment-Sprint 1 - - - - -
-
Top Article (Centered)
-
Bottom Left Article
-
Bottom Right Article
-
- - +
-

Wireframe to Webcode Assignment

+

Wireframe Webcode Assignment

- This is the initial DRAFT version of this page. + This is the initial DRAFT version of this page.

- -

Wireframe schematic

+ +

What is the Purpose of a Readme File

- Wireframe is a visual guide that represents the skeletal framework - of a website or application. Its purpose is to outline the layout. -

- Read more -
< -

What is the Purpose of a Readme File

-
-

- A readme file serves as a guide for users and developers, providing + >A readme file serves as a guide for users and developers, providing essential information about a project, including its purpose, installation instructions, usage guidelines, and contribution protocols. It helps ensure that everyone involved understands how to effectively use and contribute to the project.

- Read more, Github Document - < -

What is the Purpose of a Wireframe

- + Read more + +
+

What is the Purpose of a Wireframe

A wireframe is a visual guide that represents the skeletal framework of a website or application. Its purpose is to outline the layout, @@ -85,9 +37,9 @@

What is the Purpose of a Wireframe

experience is intuitive and effective.

Read more about Wireframes -
< -
What is a branch in Git
- + +
+

What is a branch in Git

A branch in Git is a separate line of development that allows multiple versions of a project to coexist. It enables developers to @@ -97,6 +49,12 @@

What is a branch in Git
branch when ready.

Read more about Git branches +
+ +
+

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

- + \ No newline at end of file diff --git a/Wireframe/old_index.html b/Wireframe/old_index.html new file mode 100644 index 000000000..8bbc60a65 --- /dev/null +++ b/Wireframe/old_index.html @@ -0,0 +1,72 @@ + + + + + + Wireframe Webcode Assignment + + + + + +
+

Form Results

+
+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..8350c1042 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,6 +31,12 @@ body { color: var(--ink); font: var(--font); } + +header{ + text-align: center; + padding: calc(var(--space) * 2) var(--space); +} + a { padding: var(--space); border: var(--line); From f7fb669825db74de275ac84263fb3cedf1588f41 Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Fri, 23 Jan 2026 12:49:40 +0000 Subject: [PATCH 05/12] refactor: cleaning up code --- Wireframe/old_index.html | 72 ---------------------------------------- 1 file changed, 72 deletions(-) delete mode 100644 Wireframe/old_index.html diff --git a/Wireframe/old_index.html b/Wireframe/old_index.html deleted file mode 100644 index 8bbc60a65..000000000 --- a/Wireframe/old_index.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - Wireframe Webcode Assignment - - - - - -
-

Form Results

-
-
- - - \ No newline at end of file From f054232d872470be14fb4210c632ed9bd7201e42 Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Fri, 23 Jan 2026 16:54:05 +0000 Subject: [PATCH 07/12] added code deleted by mistake --- Form-Controls/README.md | 0 Form-Controls/index.html | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Form-Controls/README.md create mode 100644 Form-Controls/index.html diff --git a/Form-Controls/README.md b/Form-Controls/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/Form-Controls/index.html b/Form-Controls/index.html new file mode 100644 index 000000000..e69de29bb From 0ef0bd2281a3b27d84bbd67ff61a59855539ff30 Mon Sep 17 00:00:00 2001 From: Damian_Dunkley Date: Sat, 24 Jan 2026 16:14:46 +0000 Subject: [PATCH 08/12] revert accidental change --- Form-Controls/README.md | 51 ++++++++++++++++++++++++++++++++++++++++ Form-Controls/index.html | 27 +++++++++++++++++++++ Wireframe/README.md | 10 ++++---- Wireframe/index.html | 8 +++---- 4 files changed, 87 insertions(+), 9 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index e69de29bb..bfcdf6c0b 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -0,0 +1,51 @@ +# Form Controls + +## 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) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e69de29bb..65a866cdb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -0,0 +1,27 @@ + + + + + + My form exercise + + + + +
+

Product Pick

+
+
+
+ + +
+
+
+ +

By HOMEWORK SOLUTION

+
+ + diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..2a6b63b4b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,11 +14,11 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria diff --git a/Wireframe/index.html b/Wireframe/index.html index e39ac329e..202e302d8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,10 +15,10 @@

Wireframe Webcode Assignment

- +

What is the Purpose of a Readme File

- >A readme file serves as a guide for users and developers, providing + A readme file serves as a guide for users and developers, providing essential information about a project, including its purpose, installation instructions, usage guidelines, and contribution protocols. It helps ensure that everyone involved understands how to @@ -36,7 +36,7 @@

What is the Purpose of a Wireframe

the user interface, plan content placement, and ensure that the user experience is intuitive and effective.

- Read more about Wireframes + Read more

What is a branch in Git

@@ -48,7 +48,7 @@

What is a branch in Git

work independently and later merge their changes back into the main branch when ready.

- Read more about Git branches + Read more