Update Wireframe and Form-Control README.md

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.

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
@@ -19,17 +21,19 @@ 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
 <!--{{</objectives>}}>-->
 
 ## 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 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
 

practical_guide.md

@@ -0,0 +1,58 @@
+## 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.
+
+- 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)