diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..3c5f357f5 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -30,7 +30,7 @@ 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 diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..4003c82e0 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,80 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - + + + + T-shirt Store + + + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+

Premium Short Sleeve Crew Neck T-Shirt £19

+
+ +
+ Colour + + + + + + +
+ +
+ Choose Size + + + + + + + + +
+ + + +
+ +
+ + + diff --git a/Form-Controls/results.html b/Form-Controls/results.html new file mode 100644 index 000000000..be1e9b6c9 --- /dev/null +++ b/Form-Controls/results.html @@ -0,0 +1,30 @@ + + + + + Order Results + + + + +
+

Your Order

+ +
+ +

Back to form

+
+ + + + diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..8243b7101 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link -- [ ] 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 +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] 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 a 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. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including a title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..ba870c220 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,64 @@ - Wireframe + Wireframe Exercise + -
-

Wireframe

-

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

-
+ +
+

Web Development Basics

+

+ This page explains the purpose of a README file, a wireframe, and a Git + branch. +

+
+ +
+ README file illustration +

Purpose of a README file

+

+ A README file explains what a project is, how it works, and how to use + it. It helps other developers understand the project quickly. +

+ + Read more + +
+ +
+ Wireframe illustration +

Purpose of a wireframe

+

+ A wireframe is a simple visual plan of a webpage. It shows the layout + and structure before colours, images, or styling are added. +

+ + Read more + +
+
- -

Title

+ Git branch illustration +

What is a Git branch?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A Git branch allows you to work on changes safely without affecting the + main code until the work is ready.

- Read more + + Read more +
+