diff --git a/Form-Controls/README.md b/Form-Controls/README.md deleted file mode 100644 index 844572470..000000000 --- a/Form-Controls/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Form Controls - -## Learning Objectives - - - -- [ ] Interpret requirements and check against a list of criteria -- [ ] 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: - -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 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. - -## Acceptnce Criteria - -### Developers must test their work. - -Let's write out our testable criteria. Check each one off as you complete it. - -- [ ] I have only used HTML and CSS. -- [ ] I have not used any JavaScript. - -### HTML - -- [ ] My form is semantic HTML. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] 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. - -### 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 -- [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) diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 74b591ffc..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - diff --git a/Wireframe/Form Control Lighthouse score.jpg b/Wireframe/Form Control Lighthouse score.jpg new file mode 100644 index 000000000..cca0cf67b Binary files /dev/null and b/Wireframe/Form Control Lighthouse score.jpg differ diff --git a/Wireframe/images/img_1.png b/Wireframe/images/img_1.png new file mode 100644 index 000000000..98354ac9e Binary files /dev/null and b/Wireframe/images/img_1.png differ diff --git a/Wireframe/images/img_2.png b/Wireframe/images/img_2.png new file mode 100644 index 000000000..061f52293 Binary files /dev/null and b/Wireframe/images/img_2.png differ diff --git a/Wireframe/images/img_3.png b/Wireframe/images/img_3.png new file mode 100644 index 000000000..4ed786477 Binary files /dev/null and b/Wireframe/images/img_3.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..72916052e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,30 +3,49 @@ - Wireframe + Developer Fundamentals
-

Wireframe

+

Developer Fundamentals

- This is the default, provided code and no changes have been made yet. + Learn the essentials of building and managing projects in tech — from wireframes for planning designs, to Git branches for version control, and README files for clear project documentation.

- -

Title

+ +

What is a Wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe is a simple visual guide used to plan the layout of a webpage or app. It focuses on structure rather than design, showing where elements like headers, navigation, content, and images will be placed. Wireframes help developers and designers understand how a page will work before adding colors, images, or styling.

- Read more + Read more +
+ +
+ +

What is a Readme.md file

+

+ A README.md file is the main documentation file in a project. It explains what the project is about, how it works, and how to use it. Written in Markdown, it helps developers and users quickly understand the purpose of the project and how to get started. +

+ + Read more + +
+ +
+ +

What is a branch in GIT?

+

+ A branch in Git is a separate version of your code that allows you to work on new features or fixes without affecting the main project. It helps developers collaborate safely by keeping changes isolated until they are ready to be merged into the main branch. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..42a33649a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,6 +30,7 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + } a { padding: var(--space); @@ -45,14 +46,20 @@ svg { Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ + +header { + text-align: center; + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; +} main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; - text-align: center; + display: flex; + justify-content: center; /* Centers horizontally */ + align-items: center; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -87,3 +94,21 @@ article { grid-column: span 3; } } + +button, +.button { + display: inline-block; + background-color: rgb(247, 247, 247); + color: rgb(0, 0, 0); + padding: 10px 20px; + + cursor: pointer; + text-decoration: none; + transition: 0.3s; +} + +button:hover, +.button:hover { + background-color: rgb(163, 163, 179); + transform: scale(1.05); +}