Skip to content

Commit d560024

Browse files
serveyanoserveyano
committed
Complete T-shirt order form
1 parent 8f01d67 commit d560024

5 files changed

Lines changed: 40 additions & 40 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@ Do not write a form action for this project.
3434

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

37-
- [ ] I have only used HTML and CSS.
38-
- [ ] I have not used any JavaScript.
37+
- [✓] I have only used HTML and CSS.
38+
- [✓] I have not used any JavaScript.
3939

4040
### HTML
4141

42-
- [ ] My form is semantic HTML.
43-
- [ ] All inputs have associated labels.
44-
- [ ] My Lighthouse Accessibility score is 100.
45-
- [ ] I require a valid name.
46-
- [ ] I require a valid email.
47-
- [ ] I require one colour from a defined set of 3 colours.
48-
- [ ] I require one size from a defined set of 6 sizes.
42+
- [✓] My form is semantic HTML.
43+
- [✓] All inputs have associated labels.
44+
- [✓] My Lighthouse Accessibility score is 100.
45+
- [✓] I require a valid name.
46+
- [✓] I require a valid email.
47+
- [✓] I require one colour from a defined set of 3 colours.
48+
- [✓] I require one size from a defined set of 6 sizes.
4949

5050
### Developers must adhere to professional standards.
5151

@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
5454
These practices reflect the level of quality expected in professional work.
5555
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
5656

57-
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58-
- [ ] My code is consistently formatted
59-
- [ ] My page content is free of typos and grammatical mistakes
60-
- [ ] I commit often and push regularly to GitHub
57+
- [✓] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58+
- [✓] My code is consistently formatted
59+
- [✓] My page content is free of typos and grammatical mistakes
60+
- [✓] I commit often and push regularly to GitHub
6161

6262
## Resources
6363
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)

‎Form-Controls/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@
66

77
<title>T-Shirt Order Form</title>
88

9+
<meta
10+
name="description"
11+
content="Order a T-shirt by entering your details and selecting a colour and size."
12+
>
13+
914
<link rel="stylesheet" href="style.css">
1015
</head>
1116

1217
<body>
1318

1419
<main>
15-
1620
<form>
1721
<h1>T-Shirt Order Form</h1>
1822

@@ -68,7 +72,6 @@ <h1>T-Shirt Order Form</h1>
6872
<button type="submit">Submit Order</button>
6973

7074
</form>
71-
7275
</main>
7376

7477
</body>

‎Form-Controls/style.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
* {
2+
box-sizing: border-box;
23
margin: 0;
34
padding: 0;
4-
box-sizing: border-box;
55
}
66

77
body {
88
font-family: Arial, sans-serif;
9-
background-color: #f3f3f3;
9+
background-color: #f4f4f4;
10+
min-height: 100vh;
1011
display: flex;
1112
justify-content: center;
1213
align-items: center;
13-
min-height: 100vh;
1414
}
1515

1616
form {
1717
background-color: white;
1818
padding: 30px;
1919
border-radius: 10px;
2020
width: 350px;
21-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2221
}
2322

2423
h1 {
@@ -40,17 +39,14 @@ input,
4039
select {
4140
width: 100%;
4241
padding: 10px;
43-
border: 1px solid #ccc;
44-
border-radius: 5px;
4542
}
4643

4744
button {
4845
width: 100%;
4946
padding: 10px;
47+
border: none;
5048
background-color: black;
5149
color: white;
52-
border: none;
53-
border-radius: 5px;
5450
cursor: pointer;
5551
}
5652

‎Module-Onboarding‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit c44123d682bd435b63f5494103678de8fb6bb371

‎Wireframe/README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
<!--{{<objectives>}}>-->
66

7-
- [ ] Use semantic HTML tags to structure the webpage
8-
- [ ] Create three articles, each including an image, title, summary, and a link
9-
- [ ] Check a webpage against a wireframe layout
10-
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
11-
- [ ] Use version control by committing often and pushing regularly to GitHub
12-
- [ ] Develop the habit of writing clean, well-structured, and error-free code
7+
- [✓] Use semantic HTML tags to structure the webpage
8+
- [✓] Create three articles, each including an image, title, summary, and a link
9+
- [✓] Check a webpage against a wireframe layout
10+
- [✓] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
11+
- [✓] Use version control by committing often and pushing regularly to GitHub
12+
- [✓] Develop the habit of writing clean, well-structured, and error-free code
1313
<!--{{</objectives>}}>-->
1414

1515
## Task
@@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u
2727

2828
## Acceptance Criteria
2929

30-
- [ ] Semantic HTML tags are used to structure the webpage.
31-
- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
32-
- [ ] The webpage is styled using a linked .css file.
33-
- [ ] 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.
30+
- [✓] Semantic HTML tags are used to structure the webpage.
31+
- [✓] The page scores 100 for Accessibility in the Lighthouse audit.
32+
- [✓] The webpage is styled using a linked .css file.
33+
- [✓] 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.
3737

3838
### Developers must adhere to professional standards.
3939

@@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
4242
These practices reflect the level of quality expected in professional work.
4343
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
4444

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
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
4949

5050
## Resources
5151

0 commit comments

Comments
 (0)