From 657c3d2057b23ccf57c5be43951be87367526292 Mon Sep 17 00:00:00 2001 From: lintsang Date: Thu, 21 May 2026 07:50:21 +0100 Subject: [PATCH 01/12] html form created --- Form-Controls/index.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..d75d64584 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,24 @@ - My form exercise + Sprint 1 form controls exercise
-

Product Pick

+

Insert Your Name Below

- - + + +
From 17f876a7809e7944e38ace8feac939c936343cd7 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:30:16 +0100 Subject: [PATCH 02/12] delete js file for the task requirement --- Form-Controls/css/style.css | 3 +++ Form-Controls/index.html | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 Form-Controls/css/style.css diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css new file mode 100644 index 000000000..2f3b958b6 --- /dev/null +++ b/Form-Controls/css/style.css @@ -0,0 +1,3 @@ +h1{ + font-size: 1.5rem; +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d75d64584..63e16c6de 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,7 @@ Sprint 1 form controls exercise +
@@ -22,5 +23,6 @@

Insert Your Name Below

By Lin Tsang

+ From 196b343ba374c2f451ebb0d223fb5fedd6c308f8 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:56:22 +0100 Subject: [PATCH 03/12] added name and email in form --- Form-Controls/index.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 63e16c6de..69d3d615f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,20 +3,35 @@ - Sprint 1 form controls exercise + My Sprint 1 form controls exercise
-

Insert Your Name Below

+

Product Pick

- - - +
+ + Person name and email +
+ + +
+
+ + +
+ + + +
+
From 5da6e4f84ba3b86ea3c5c0fa61ce8f130cccadd4 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:05:48 +0100 Subject: [PATCH 04/12] added tshirt colour and size in form --- Form-Controls/index.html | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 69d3d615f..f157b909f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,8 +25,25 @@

Product Pick

- - +
+ + +
+
+ + + + + + + +
+
+

By Lin Tsang

- From a67be9d2307d97e05317caa0bb1313af0c5433ae Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:49:47 +0100 Subject: [PATCH 07/12] added css style to form --- Form-Controls/css/style.css | 35 ++++++++++++++++++++++++++++++++++- Form-Controls/index.html | 4 ++-- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index 2f3b958b6..febd7e2e6 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -1,3 +1,36 @@ h1{ + font-family: 'Times New Roman', Times, serif; font-size: 1.5rem; -} \ No newline at end of file +} +fieldset{ + background-color: #becce2; + border: 2px solid #c0cde0; + border-style: solid; + border-radius: 0.5em; + margin: 1em auto; + padding: 1em; + width: 40em; + max-width: 800px; +} + +legend{ + color: #222; + background-color: #f6f9ff; + font-size: 90%; + padding: 1em 2em; + border: solid 1px #becce2; + border-radius: 0.3em; + + +} +fieldset > div{ + padding: 0.5em 3em; + display: grid; + grid-template-columns: 2fr 4fr; +} +input, select, button{ + border: solid 1px #becce2; + padding: 4px; + font-size: 1em; + border-radius: 0.3em; +} diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e4eafc31f..03d31986e 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,8 +15,8 @@

Product Pick

- - Person name and email + + Person name and email
From b1cdf63fdb567ee5f8ca1e780b148d5eea43d389 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 08:57:10 +0100 Subject: [PATCH 08/12] checked all requirements fulfilled --- Form-Controls/README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..9ffd4556d 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,12 +4,12 @@ -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [x] Test with Devtools +- [x] Refactor using Devtools +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -34,18 +34,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 only used HTML and CSS. -- [ ] I have not used any JavaScript. +- [x] I have only used HTML and CSS. +- [x] I have not used any JavaScript. ### HTML -- [ ] My form is semantic HTML. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. -- [ ] 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. +- [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. ### Developers must adhere to professional standards. @@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it. These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) From 2af122abb684d14d545a32cda3ebc17df5ff372d Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 08:00:01 +0100 Subject: [PATCH 09/12] change the html and css to look same to wireframe --- Wireframe/index.html | 20 +++++++++++++++++++- Wireframe/style.css | 14 +++++++++++--- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..a67482584 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -23,10 +23,28 @@

Title

Read more +
+ +

Title

+

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

+ Read more +
+
+ +

Title

+

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

+ Read more +

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

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..9c2a61f14 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,10 +26,15 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ -body { + + body { background: var(--paper); color: var(--ink); font: var(--font); + justify-items: center; + text-align: center; + display: grid; + } a { padding: var(--space); @@ -41,6 +46,9 @@ svg { width: 100%; object-fit: cover; } +p { + padding: 0 0 30px 0; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,9 +58,9 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; + width: 100%; text-align: center; + background-color: #ccc; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 7dfbf5ba595393f4caaf3063a30a7ceacc881d14 Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 09:25:22 +0100 Subject: [PATCH 10/12] add questions, answer and images --- Wireframe/index.html | 31 +++++++++++++++++-------------- Wireframe/style.css | 6 ++++++ 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a67482584..113d7476b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,36 +8,39 @@
-

Wireframe

+

Web Development Foundation

- This is the default, provided code and no changes have been made yet. + There are some frequently asked questions for beginner developers.

- -

Title

+
+ +
+

1. What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.

Read more
- -

Title

+
+ +
+

2. What is the purpose of a wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.

Read more
- -

Title

+
+ +
+

3. What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.

Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index 9c2a61f14..ea5c2cc55 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -49,6 +49,12 @@ svg { p { padding: 0 0 30px 0; } +.image-wrapper img { + width: 100%; + + /* 1:1 aspect ratio for square */ + aspect-ratio: 16 / 9; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ From 446677041223401f913d59f3a063cb77c485b682 Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 09:28:22 +0100 Subject: [PATCH 11/12] add links to each article --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 113d7476b..22246af3e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -22,7 +22,7 @@

1. What is the purpose of a README file?

README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.

- Read more + Read more
@@ -32,7 +32,7 @@

2. What is the purpose of a wireframe?

Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.

- Read more + Read more
@@ -42,7 +42,7 @@

3. What is a branch in Git?

A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.

- Read more + Read more
From dec48eb9b43f84c36d1a6daae20a8fb994241009 Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 12:20:04 +0100 Subject: [PATCH 12/12] fine tune all interface to wireframe requirenment --- Wireframe/README.md | 32 ++++++++--------- Wireframe/index.html | 81 +++++++++++++++++++++++--------------------- Wireframe/style.css | 14 +++++--- 3 files changed, 69 insertions(+), 58 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..816f484ba 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,12 +4,12 @@ -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including an image, title, summary, and a link +- [x] 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 -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The page layout closely match the wireframe. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. +- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The page layout closely match the wireframe. ### Developers must adhere to professional standards. @@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 22246af3e..341e35f98 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -7,48 +7,53 @@ -
-

Web Development Foundation

-

- There are some frequently asked questions for beginner developers. -

-
-
-
-
- -
-

1. What is the purpose of a README file?

+
+
+

Web Development Foundation

- README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute. + There are some frequently asked questions for beginner developers.

- Read more -
-
-
- -
-

2. What is the purpose of a wireframe?

-

- Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design. -

- Read more -
-
-
- -
-

3. What is a branch in Git?

+
+
+
+
+ +
+

1. What is the purpose of a README file?

+

+ README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute. +

+ Read more +
+
+
+ +
+

2. What is the purpose of a wireframe?

+

+ Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design. +

+ Read more +
+
+
+ +
+

3. What is a branch in Git?

+

+ A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development. +

+ Read more +
+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index ea5c2cc55..004dbb747 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,7 +31,6 @@ As well as useful links to learn more */ background: var(--paper); color: var(--ink); font: var(--font); - justify-items: center; text-align: center; display: grid; @@ -51,10 +50,15 @@ p { } .image-wrapper img { width: 100%; - - /* 1:1 aspect ratio for square */ + /* aspect ratio for image */ aspect-ratio: 16 / 9; } +#wrapper{ + /* wrapper to make the content to 80% width */ + width:80%; + margin: 0 auto; +} + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -66,7 +70,9 @@ main { footer { width: 100%; text-align: center; - background-color: #ccc; + background-color: #eee; + font-size: 0.8rem; + padding: 60px 0 60px 0; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.