From 9b6a2f3c281fb296efa10946f4ffd35f88f6396d Mon Sep 17 00:00:00 2001 From: Abdul Moiz <104764143+A-Moiz@users.noreply.github.com> Date: Sat, 10 Jan 2026 11:44:07 +0000 Subject: [PATCH 1/5] Created webpage with answers to questions --- Wireframe/answers.html | 47 ++++++++++++++++++++++++++++++++++++++++++ Wireframe/style.css | 17 +++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 Wireframe/answers.html diff --git a/Wireframe/answers.html b/Wireframe/answers.html new file mode 100644 index 000000000..e90e45896 --- /dev/null +++ b/Wireframe/answers.html @@ -0,0 +1,47 @@ + + + + + + Wireframe Answers + + + +
+

Wireframe Answers

+

This code includes the answers to the wireframe exercise.

+
+
+ +
+ placeholder image +

1. What is the purpose of a README file?

+

A README file provides essential information about a project, including its purpose, usage instructions, and setup requirements.

+ + +

2. What is the purpose of a wireframe?

+

A wireframe is a visual guide that represents the skeletal framework of a website or application, used to plan layout and functionality.

+ Read more +
+ +
+ +
+

3. What is a branch in Git?

+

A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously without affecting the main codebase.

+ Read more +
+ + +
+

4. What is the point of the article tag in HTML?

+

The article tag in HTML is used to define a self-contained piece of content that can be independently distributed or reused, such as a blog post or news article.

+ Read more +
+
+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a4d970d5a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,3 +87,20 @@ article { grid-column: span 3; } } + +.container { + padding: 0 10%; +} + +.second-container { + padding-top: 20px; + display: flex; + gap: 1.5rem; + align-items: stretch; +} + +.second-container article { + flex: 1; + max-width: 45%; + padding: 1rem; +} From 05328f44c0ec11b3c0ee179ddd39d60b3b5fadc1 Mon Sep 17 00:00:00 2001 From: Abdul Moiz <104764143+A-Moiz@users.noreply.github.com> Date: Sat, 10 Jan 2026 12:01:39 +0000 Subject: [PATCH 2/5] Added main tag for main content --- Wireframe/answers.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Wireframe/answers.html b/Wireframe/answers.html index e90e45896..e0504aefb 100644 --- a/Wireframe/answers.html +++ b/Wireframe/answers.html @@ -11,7 +11,8 @@

Wireframe Answers

This code includes the answers to the wireframe exercise.

-
+
+
placeholder image @@ -40,6 +41,7 @@

4. What is the point of the article tag in HTML?

+ From b67c38c7c677a1a515662d267ec816bab64db95a Mon Sep 17 00:00:00 2001 From: Abdul Moiz <104764143+A-Moiz@users.noreply.github.com> Date: Sat, 10 Jan 2026 12:03:23 +0000 Subject: [PATCH 3/5] Ticked wireframe objectives in README.md --- Wireframe/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..8243b7101 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,22 +14,22 @@ 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 -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including a title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. ## Resources From 07b9f24eea919ba95673e62d2bb5d1cd6a22d24e Mon Sep 17 00:00:00 2001 From: Abdul Moiz <104764143+A-Moiz@users.noreply.github.com> Date: Sat, 10 Jan 2026 13:58:09 +0000 Subject: [PATCH 4/5] Created valid form and checked off list --- Form-Controls/README.md | 24 ++++++++++++------------ Form-Controls/index.html | 35 ++++++++++++++++++++++++++++++----- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..1028d39dc 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,10 +4,10 @@ -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [x] Test with Devtools +- [x] Refactor using Devtools ## Task @@ -30,18 +30,18 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [ ] I have used HTML only. +- [x] 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. +- [x] My form is semantic html. +- [x] All inputs have associated labels. +- [x] My Lighthouse Accessibility score is 100. +- [x] I require a valid name. I have defined a valid name as a text string of two characters or more. +- [x] I require a valid email. +- [x] I require one colour from a defined set of 3 colours. +- [x] I require one size from a defined set of 6 sizes. ## Resources diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..e06ca9578 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,15 +13,40 @@

Product Pick

- - + +

+ +

+ +

+ +

+ + + +

+ + + +

+ +
From b5a94e5d1247ca237f6a6a8509392d7c98b6dd55 Mon Sep 17 00:00:00 2001 From: Abdul Moiz <104764143+A-Moiz@users.noreply.github.com> Date: Sat, 10 Jan 2026 16:01:57 +0000 Subject: [PATCH 5/5] Removed changes made in Form --- Form-Controls/README.md | 24 ++++++++++++------------ Form-Controls/index.html | 35 +++++------------------------------ 2 files changed, 17 insertions(+), 42 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 1028d39dc..bfcdf6c0b 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,10 +4,10 @@ -- [x] Interpret requirements and check against a list of criteria -- [x] Write a valid form -- [x] Test with Devtools -- [x] Refactor using Devtools +- [ ] Interpret requirements and check against a list of criteria +- [ ] Write a valid form +- [ ] Test with Devtools +- [ ] Refactor using Devtools ## Task @@ -30,18 +30,18 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [x] I have used HTML only. +- [ ] I have used HTML only. - [x] I have not used any CSS or JavaScript. ### HTML -- [x] My form is semantic html. -- [x] All inputs have associated labels. -- [x] My Lighthouse Accessibility score is 100. -- [x] I require a valid name. I have defined a valid name as a text string of two characters or more. -- [x] I require a valid email. -- [x] I require one colour from a defined set of 3 colours. -- [x] I require one size from a defined set of 6 sizes. +- [ ] 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 diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e06ca9578..65a866cdb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,40 +13,15 @@

Product Pick

- -

- -

- -

- -

- - - -

- - - -

- - + +