Skip to content

Commit 3692bcb

Browse files
Jacknguyen4438Jacknguyen4438
authored
Merge branch 'main' into Form-control-work
2 parents 42ec49d + a7b8a25 commit 3692bcb

3 files changed

Lines changed: 122 additions & 16 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,17 @@
88
- [x] Write a valid form
99
- [x] Test with Devtools
1010
- [x] Refactor using Devtools
11+
- [ ] Interpret requirements and check against a list of criteria
12+
- [ ] Write a valid form
13+
- [ ] Test with Devtools
14+
- [ ] Refactor using Devtools
15+
- [ ] Use version control by committing often and pushing regularly to GitHub
16+
- [ ] Develop the habit of writing clean, well-structured, and error-free code
1117
<!--{{<objectives>}}>-->
1218

1319
## Task
1420

15-
We are selling t-shirts. Write a form to collect the following data:
21+
We are selling T-shirts. Write a form to collect the following data:
1622

1723
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 color and size.
1824

@@ -22,11 +28,17 @@ Writing that out as a series of questions to ask yourself:
2228
2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
2329
3. What color should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colors?
2430
4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
31+
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
32+
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
33+
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
34+
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
2535

2636
All fields are required.
2737
Do not write a form action for this project.
2838

29-
## Developers must test their work.
39+
## Acceptnce Criteria
40+
41+
### Developers must test their work.
3042

3143
Let's write out our testable criteria. Check each one off as you complete it.
3244

@@ -44,10 +56,29 @@ Let's write out our testable criteria. Check each one off as you complete it.
4456
- [x] I require a valid email.
4557
- [x] I require one color from a defined set of 3 colors.
4658
- [x] I require one size from a defined set of 6 sizes.
59+
- [ ] My form is semantic HTML.
60+
- [ ] All inputs have associated labels.
61+
- [ ] My Lighthouse Accessibility score is 100.
62+
- [ ] I require a valid name.
63+
- [ ] I require a valid email.
64+
- [ ] I require one colour from a defined set of 3 colours.
65+
- [ ] I require one size from a defined set of 6 sizes.
4766

48-
## Resources
67+
### Developers must adhere to professional standards.
68+
69+
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
4970
71+
These practices reflect the level of quality expected in professional work.
72+
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
73+
74+
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
75+
- [ ] My code is consistently formatted
76+
- [ ] My page content is free of typos and grammatical mistakes
77+
- [ ] I commit often and push regularly to GitHub
78+
79+
## Resources
5080
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
5181
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
5282
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
5383
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
84+
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Wireframe/README.md‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
# Wireframe
22

3-
![Wireframe](./wireframe.png)
4-
5-
Using the provided wireframe and resources, write a new webpage explaining:
6-
7-
1. What is the purpose of a README file?
8-
1. What is the purpose of a wireframe?
9-
1. What is a branch in Git?
10-
11-
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.
12-
133
## Learning Objectives
144

155
<!--{{<objectives>}}>-->
@@ -19,20 +9,47 @@ There are some provided HTML and CSS files you can use to get started. You can u
199
- [ ] Check a webpage against a wireframe layout
2010
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
2111
- [ ] Use version control by committing often and pushing regularly to GitHub
12+
- [ ] Develop the habit of writing clean, well-structured, and error-free code
2213
<!--{{</objectives>}}>-->
2314

15+
## Task
16+
![Wireframe](./wireframe.png)
17+
18+
Using the provided wireframe and resources, write a new webpage explaining:
19+
20+
1. What is the purpose of a README file?
21+
1. What is the purpose of a wireframe?
22+
1. What is a branch in Git?
23+
24+
The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted.
25+
26+
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.
27+
2428
## Acceptance Criteria
2529

2630
- [ ] Semantic HTML tags are used to structure the webpage.
2731
- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
28-
- [ ] The page header includes a title and description.
29-
- [ ] The articles section has three unique articles, each including an image, title, summary, and a link.
30-
- [ ] The page footer is fixed to the bottom of the viewport.
3132
- [ ] The webpage is styled using a linked .css file.
3233
- [ ] The webpage is properly committed and pushed to a branch on GitHub.
34+
- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
35+
- [ ] The page footer is fixed to the bottom of the viewport.
36+
- [ ] The page layout closely match the wireframe.
37+
38+
### Developers must adhere to professional standards.
39+
40+
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
41+
42+
These practices reflect the level of quality expected in professional work.
43+
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
44+
45+
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
46+
- [ ] My code is consistently formatted
47+
- [ ] My page content is free of typos and grammatical mistakes
48+
- [ ] I commit often and push regularly to GitHub
3349

3450
## Resources
3551

3652
- [Wireframe](https://www.productplan.com/glossary/wireframe/)
3753
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
3854
- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
55+
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎practical_guide.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
## Clean Code and Smart Commits: A Practical Guide
2+
3+
### 1. Formatting code consistently
4+
5+
- In VS Code, right-click anywhere in the editor and choose "Format Document" from the context menu.
6+
7+
- You can also use the shortcut:
8+
- Windows/Linux: `Shift + Alt + F`
9+
- macOS: `Shift + Option + F`
10+
11+
- More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting
12+
13+
---
14+
### 2. Enabling automatic formatting
15+
16+
- Open your VS Code settings (user or workspace settings).
17+
- Guide: https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings
18+
- Search for `editor format`
19+
- Set `editor.formatOnSave` and `editor.formatOnPaste` to true
20+
21+
This ensures your code stays clean without needing manual formatting each time.
22+
23+
---
24+
25+
### 3. Committing files often, in meaningful groups
26+
27+
Creating small, focused commits improves both your workflow and team collaboration.
28+
29+
Why this matters:
30+
- **Clarity**: Each commit tells a clear story (one feature, one fix, one change).
31+
- **Debugging**: Easy to find and undo the commit that caused a bug.
32+
- **Collaboration**: Teammates can review and understand changes faster.
33+
- **History**: Project log becomes a readable timeline, not a messy dump.
34+
- **Safety**: Progress is saved in safe, logical steps—less risk of losing work.
35+
36+
#### Appraoch 1: Using VS Code
37+
38+
- In the Source Control panel, stage individual files instead of all changes.
39+
- Commit only what is staged.
40+
- Watch this video (around 12:50): https://www.youtube.com/watch?v=z5jZ9lrSpqk&t=705
41+
42+
#### Approach 2: Using Git commands
43+
44+
1. Stage a changed file (`git add`)
45+
46+
e.g.: To stage a modified file named `index.html`
47+
```
48+
git add index.html
49+
```
50+
51+
2. Commit the staged changes: (`git commit`)
52+
53+
e.g.: To commit the staged changes with a short commit message
54+
```
55+
git commit -m "Fix syntax error"
56+
```
57+
58+
- Additional resource: [W3School Git Tutorial](https://www.w3schools.com/git/default.asp?remote=github)

0 commit comments

Comments
 (0)