From 295dfecbf74fdcbba57ada59ebaa2af53ce68d95 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Sat, 18 Apr 2026 12:29:33 +0100 Subject: [PATCH 01/13] Fix typos and improve validation descriptions in README --- Form-Controls/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index f21386f42..071bda62a 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -35,10 +35,11 @@ Let's write out our testable criteria. Check each one off as you complete it. ### HTML -- [ ] My form is semantic html. +- [ ] My form is semantic HTML. +- [ ] My HTML code has no errors or warnings when validated with https://validator.w3.org/. - [ ] 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 name. I have defined a valid namea as a text string of at least two characters and cannot consist only of spaces. - [ ] 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. From 8902666ff0e965d792b54964a475437527cb608a Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Sat, 18 Apr 2026 13:02:10 +0100 Subject: [PATCH 02/13] Revise acceptance criteria in README for wireframe Updated acceptance criteria for webpage structure and layout. --- Wireframe/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index f7b59df8c..d0de778bf 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -24,12 +24,14 @@ 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 HTML code has no errors or warnings when validated with https://validator.w3.org/. - [ ] 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 an image, 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. +- [ ] The layout of the page should match the wireframe as much as possible + - [ ] The page header includes a title and a short description that are centered horizontally on the page + - [ ] The articles section has three unique articles, each including an image, title, summary, and a link. + - [ ] The page footer is fixed to the bottom of the viewport. ## Resources From 3031ef0f63068abe090292566528673644dfdfac Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Sat, 18 Apr 2026 16:26:44 +0100 Subject: [PATCH 03/13] Add additional requirements for article layout --- Wireframe/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/README.md b/Wireframe/README.md index d0de778bf..f2302761d 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -31,6 +31,8 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] The layout of the page should match the wireframe as much as possible - [ ] The page header includes a title and a short description that are centered horizontally on the page - [ ] The articles section has three unique articles, each including an image, title, summary, and a link. + - [ ] All article components (Image, Title, Summary, Link) must maintain consistent vertical stacking and internal padding across all cards. + - [ ] The second and third articles must be positioned side-by-side in a two-column grid of equal width. - [ ] The page footer is fixed to the bottom of the viewport. ## Resources From 97cf4b7a37ab8726be60ab0b37f3cb26fadb5a12 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Sat, 25 Apr 2026 12:52:18 +0100 Subject: [PATCH 04/13] Revise acceptance criteria in README.md Updated acceptance criteria for webpage layout and articles. --- Wireframe/README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index f2302761d..fc9c393a5 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -19,6 +19,7 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] 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 ## Acceptance Criteria @@ -28,12 +29,9 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] 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 layout of the page should match the wireframe as much as possible - - [ ] The page header includes a title and a short description that are centered horizontally on the page - - [ ] The articles section has three unique articles, each including an image, title, summary, and a link. - - [ ] All article components (Image, Title, Summary, Link) must maintain consistent vertical stacking and internal padding across all cards. - - [ ] The second and third articles must be positioned side-by-side in a two-column grid of equal width. - - [ ] The page footer is fixed to the bottom of the viewport. +- [ ] The layout of the page should match the wireframe as much as possible. +- [ ] 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. ## Resources From 987fc35342e8c15368d7ec19a4f5932b93565cac Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 28 Apr 2026 00:31:37 +0100 Subject: [PATCH 05/13] Update README.md --- Wireframe/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index fc9c393a5..d4c54d492 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -8,6 +8,8 @@ Using the provided wireframe and resources, write a new webpage explaining: 1. What is the purpose of a wireframe? 1. What is a branch in Git? +The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. + There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. ## Learning Objectives @@ -29,9 +31,9 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] 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 layout of the page should match the wireframe as much as possible. - [ ] 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. ## Resources From a5c9a6b9cef4565fab0ed2db02a28209ee211b01 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 28 Apr 2026 04:23:11 +0100 Subject: [PATCH 06/13] Add guidelines for formatting and committing code Added recommended practices for code formatting and committing. --- recommnded_practice.md | 56 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 recommnded_practice.md diff --git a/recommnded_practice.md b/recommnded_practice.md new file mode 100644 index 000000000..6cbca9b6f --- /dev/null +++ b/recommnded_practice.md @@ -0,0 +1,56 @@ +### 1. Formatting code consistently + +- In VS Code, right-click anywhere in the editor and choose "Format Document" from the context menu. + +- You can also use the shortcut: + - Windows/Linux: `Shift + Alt + F` + - macOS: `Shift + Option + F` + +- More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting + +--- +### 2. Enabling automatic formatting + +- Open your VS Code settings (user or workspace settings). + - Guide: https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings +- Search for `editor format` +- Set `editor.formatOnSave` and `editor.formatOnPaste` to true + +This ensures your code stays clean without needing manual formatting each time. + +--- + +### 3. Committing files one by one + +Creating small, focused commits improves both your workflow and team collaboration. + +Why this matters: +- **Clarity**: Each commit tells a clear story (one feature, one fix, one change). +- **Debugging**: Easy to find and undo the commit that caused a bug. +- **Collaboration**: Teammates can review and understand changes faster. +- **History**: Project log becomes a readable timeline, not a messy dump. +- **Safety**: Progress is saved in safe, logical steps—less risk of losing work. + +#### Appraoch 1: Using VS Code + +- In the Source Control panel, stage individual files instead of all changes. +- Commit only what is staged. +- Watch this video (around 12:50): https://www.youtube.com/watch?v=z5jZ9lrSpqk&t=705 + +#### Approach 2: Using Git commands + +1. Stage a changed file (`git add`) + +e.g.: To stage a modified file named `index.html` +``` +git add index.html +``` + +2. Commit the staged changes: (`git commit`) + +e.g.: To commit the staged changes with a short commit message +``` +git commit -m "Fix syntax error" +``` + +- Additional resource: [W3School Git Tutorial](https://www.w3schools.com/git/default.asp?remote=github) From 1703f0190ec4725adfd36535e3249745f09cca89 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 28 Apr 2026 04:25:07 +0100 Subject: [PATCH 07/13] Add section on Clean Code and Smart Commits --- recommnded_practice.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/recommnded_practice.md b/recommnded_practice.md index 6cbca9b6f..2302cc9ad 100644 --- a/recommnded_practice.md +++ b/recommnded_practice.md @@ -1,3 +1,5 @@ +## Clean Code and Smart Commits: A Practical Guide + ### 1. Formatting code consistently - In VS Code, right-click anywhere in the editor and choose "Format Document" from the context menu. From 9a0f62b6bfc54d7ceea14e4ef64a4ac8e1e00bde Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 28 Apr 2026 04:25:54 +0100 Subject: [PATCH 08/13] Rename recommnded_practice.md to practical_guide.md --- recommnded_practice.md => practical_guide.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename recommnded_practice.md => practical_guide.md (100%) diff --git a/recommnded_practice.md b/practical_guide.md similarity index 100% rename from recommnded_practice.md rename to practical_guide.md From 48f0e43f820140d113ea82a697d36b6dc12f2751 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 28 Apr 2026 23:07:28 +0100 Subject: [PATCH 09/13] Update practical_guide.md Co-authored-by: Daniel Wagner-Hall --- practical_guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/practical_guide.md b/practical_guide.md index 2302cc9ad..90537cd76 100644 --- a/practical_guide.md +++ b/practical_guide.md @@ -22,7 +22,7 @@ This ensures your code stays clean without needing manual formatting each time. --- -### 3. Committing files one by one +### 3. Committing files often, in meaningful groups Creating small, focused commits improves both your workflow and team collaboration. From c09a79a6a40407225c6159f0b13d7e2c5ff5f31d Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Wed, 29 Apr 2026 16:49:21 +0100 Subject: [PATCH 10/13] Update README to highlight professional practice --- Form-Controls/README.md | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 071bda62a..c70e144cd 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -8,20 +8,22 @@ - [ ] 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 ## Task -We are selling t-shirts. Write a form to collect the following data: +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 +1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. +2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. +3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? +4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL All fields are required. Do not write a form action for this project. @@ -36,17 +38,27 @@ Let's write out our testable criteria. Check each one off as you complete it. ### HTML - [ ] My form is semantic HTML. -- [ ] My HTML code has no errors or warnings when validated with https://validator.w3.org/. - [ ] All inputs have associated labels. - [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. I have defined a valid namea as a text string of at least two characters and cannot consist only of spaces. +- [ ] 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. -## Resources +## Developers must adhere to professional standards + +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 + +## 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) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) From 5107b9c6a119a4594772d1192519662372a2d141 Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Wed, 29 Apr 2026 16:58:24 +0100 Subject: [PATCH 11/13] Reshuffle sections to match those in Wireframe README Updated section headers for clarity and consistency. --- Form-Controls/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index c70e144cd..a0e978ae1 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -28,7 +28,9 @@ Writing that out as a series of questions to ask yourself: All fields are required. Do not write a form action for this project. -## Developers must test their work. +## Acceptnce Criteria + +### Developers must test their work. Let's write out our testable criteria. Check each one off as you complete it. @@ -46,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it. - [ ] I require one size from a defined set of 6 sizes. -## Developers must adhere to professional standards +### Developers must adhere to professional standards. 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. From 56346f6f1b50590575cc549ca381e03d400a675c Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Wed, 29 Apr 2026 17:07:28 +0100 Subject: [PATCH 12/13] Revise README for wireframe project details --- Wireframe/README.md | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index d4c54d492..aa85ec80b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -1,17 +1,5 @@ # Wireframe -![Wireframe](./wireframe.png) - -Using the provided wireframe and resources, write a new webpage explaining: - -1. What is the purpose of a README file? -1. What is the purpose of a wireframe? -1. What is a branch in Git? - -The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. - -There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. - ## Learning Objectives @@ -24,10 +12,22 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] Develop the habit of writing clean, well-structured, and error-free code +## Task +![Wireframe](./wireframe.png) + +Using the provided wireframe and resources, write a new webpage explaining: + +1. What is the purpose of a README file? +1. What is the purpose of a wireframe? +1. What is a branch in Git? + +The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. + +There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. + ## Acceptance Criteria - [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The HTML code has no errors or warnings when validated with https://validator.w3.org/. - [ ] 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. @@ -35,8 +35,21 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] The page footer is fixed to the bottom of the viewport. - [ ] The page layout closely match the wireframe. +### Developers must adhere to professional standards. + +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? + +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 + ## Resources - [Wireframe](https://www.productplan.com/glossary/wireframe/) - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) From 998d790bd302f5186dc176335e53dbda81d439ba Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Wed, 29 Apr 2026 17:08:50 +0100 Subject: [PATCH 13/13] Add a mental checklist Added a checklist for developers to ensure code quality and adherence to standards. --- Form-Controls/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index a0e978ae1..844572470 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -47,9 +47,10 @@ Let's write out our testable criteria. Check each one off as you complete it. - [ ] I require one colour from a defined set of 3 colours. - [ ] I require one size from a defined set of 6 sizes. - ### Developers must adhere to professional standards. +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? + 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.