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..a72a37226 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -17,11 +17,42 @@

Product Pick

+ +
+ +
+ + +
+ + +

What color do you like?

+ + + +
+ + +
+ + +
+ + + + 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/images/branchGit.jpeg b/Wireframe/images/branchGit.jpeg new file mode 100644 index 000000000..727abf5e2 Binary files /dev/null and b/Wireframe/images/branchGit.jpeg differ diff --git a/Wireframe/images/readme-github1.jpg b/Wireframe/images/readme-github1.jpg new file mode 100644 index 000000000..a8cfb3d6d Binary files /dev/null and b/Wireframe/images/readme-github1.jpg differ diff --git a/Wireframe/images/wireframe1.png b/Wireframe/images/wireframe1.png new file mode 100644 index 000000000..5fd025e76 Binary files /dev/null and b/Wireframe/images/wireframe1.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..cc5e30e66 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,63 @@ - + - Wireframe + Intro to Web Development
-

Wireframe

+ +

Web Development for Dummies

- This is the default, provided code and no changes have been made yet. + Explanation of the purpose of a README file, a wireframe, and what a Git branch is. These three elements are + fundamental to structuring, planning, and collaborating effectively in software development.

- -

Title

+ + image of a symbol from a readme file +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Including a clear and well-structured README is considered a best practice as it helps others quickly + understand the project, encourages adoption or contributions, and makes maintenance easier for everyone + involved.

- Read more + + Read more +
+ +
+ + image of a wireframe +

What is the purpose of a wireframe?

+

+ The purpose of a wireframe is to visually map out the basic structure and functionality of a website, app, or + digital product before adding any detailed design elements or content. Wireframes focus on layout, user flow, + and placement of key elements like menus, buttons, and content sections, helping teams to plan and refine + usability, navigation, and information architecture at an early stage. +

+ Read more +
+ +
+ + image of a example of a git branch +

What is a branch in Git?

+

+ A branch in Git is an independent line of development that allows you to work on new features, bug fixes, or + experiments in isolation from the main code base (usually the main or master branch). It works like a parallel + workspace where changes can be made without affecting other branches, enabling multiple streams of work to + happen simultaneously. +

+ Read more
+ - + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..0890f433c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,6 +30,7 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + text-align: center; } a { padding: var(--space); diff --git a/readme.md b/readme.md index b788b727f..2a663f7e1 100644 --- a/readme.md +++ b/readme.md @@ -2,15 +2,9 @@ ## 🔑 Do the prep -Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep. +I deleted some texts here. +Hope that works!! +https://github.com/HackYourFutureBelgium -## 📅 Planning and managing your work - -All the coursework is listed as issues on this repo. - -You will copy these issues to your Coursework Planner, which is one repo that will hold all your coursework and assignments for the entire course. - -If you do not already have your own Coursework Planner, set one up now: - -https://github.com/HackYourFutureBelgium/My-Coursework-Planner \ No newline at end of file +I change something here! \ No newline at end of file