diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..1028d39dc 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,10 +4,10 @@ -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [x] Test with Devtools +- [x] Refactor using Devtools ## Task @@ -30,18 +30,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 used HTML only. +- [x] I have used HTML only. - [x] I have not used any CSS or JavaScript. ### HTML -- [ ] My form is semantic html. -- [ ] 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 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. I have defined a valid name as a text string of two characters or more. +- [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. ## Resources diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..e00a32287 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,7 +4,7 @@ My form exercise - + @@ -12,16 +12,83 @@

Product Pick

+
- - + +
+ + Customer identification + + + + + + +
+
+ Choose Colour + + + + + + + + +
+
+ Size + + + +
+
+ + + + +
+ +
diff --git a/Wireframe/branch.png b/Wireframe/branch.png new file mode 100644 index 000000000..4f16eaaac Binary files /dev/null and b/Wireframe/branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..1b2109397 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -9,24 +9,51 @@

Wireframe

-

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

+

This is the sample solution.

- -

Title

+ +

README

+

+ README files are how developers explain their project to other people. + They introduce the codebase, explain what it is for and how to use it. +

+ Read more +
+
+ +

Wireframe

+

+ When we build applications, we usually break down pages into + components we can build separately. Wireframes show the placement and + organisation of components without details like fonts, colours, or + functionality. +

+ Read more +
+
+ +

Git branches

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Imagine a repository as a big, growing tree and each new idea or + feature as a new branch. In Git, a 'branch' is like an offshoot from + the main trunk. It's a space to nurture new growth - new code - + independently from the rest of the tree. You can cultivate your + branch, tweaking and pruning it until it's exactly right.

- Read more + Read more
diff --git a/Wireframe/readme.png b/Wireframe/readme.png new file mode 100644 index 000000000..8b23fa8cc Binary files /dev/null and b/Wireframe/readme.png differ diff --git a/Wireframe/sample.png b/Wireframe/sample.png new file mode 100644 index 000000000..b2c93d739 Binary files /dev/null and b/Wireframe/sample.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bcaa6e1a3 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -49,6 +49,9 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } +header { + text-align: center; +} footer { position: fixed; bottom: 0; @@ -77,7 +80,6 @@ Keeping things orderly and separate is the key to good, simple CSS. article { border: var(--line); padding-bottom: var(--space); - text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); > * { diff --git a/index.html b/index.html index 30e3ff1d9..80aa49666 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,6 @@

Project 2: Form Controls

- +