From 59b990da4878db68776a73ec534c51f55907f6d0 Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 10 May 2025 15:28:28 +0100 Subject: [PATCH 1/8] create module-onbaording --- Wireframe/index.html | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..fc25bf870 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,24 +10,37 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + Can i give some explaination regarding what the purpose of REAMME.file and wifeframe are and what the branch in Git is.

-

Title

+

README.file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file serves as a crucial documentation tool, primarily used to provide essential information about a software project, dataset, or any other file collection. It's designed to help users (both developers and end-users) understand the project's purpose, functionality, installation instructions, and how to contribute or get help.

- Read more + Read more +
+
+ +

Purpose of wireframe

+

+ Wireframes are a visual guide to what a product should look like. Their main goal is to create an app or site that delivers a cohesive and well-designed experience. They are also a great way to ensure that every element in a UI has a purpose. +

+ Read more +
+
+ +

Branch in Git

+

+ In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code. +

> + Read more
From fe6008b1ae55f689ecf32c5edf98500902a321ce Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 24 May 2025 12:29:50 +0100 Subject: [PATCH 2/8] some change --- Form-Controls/README.md | 4 ++-- Wireframe/index.html | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..10a159585 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -35,8 +35,8 @@ Let's write out our testable criteria. Check each one off as you complete it. ### HTML -- [ ] My form is semantic html. -- [ ] All inputs have associated labels. +- [x ] My form is semantic html. +- [ x] 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. diff --git a/Wireframe/index.html b/Wireframe/index.html index fc25bf870..de5594033 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -2,7 +2,7 @@ - + Wireframe @@ -10,37 +10,37 @@

Wireframe

- Can i give some explaination regarding what the purpose of REAMME.file and wifeframe are and what the branch in Git is. + Can I give some explanation regarding what the purpose of REAMME.file and wireframe are and what the branch in Git is.

- + Diagram placeholder

README.file

A README file serves as a crucial documentation tool, primarily used to provide essential information about a software project, dataset, or any other file collection. It's designed to help users (both developers and end-users) understand the project's purpose, functionality, installation instructions, and how to contribute or get help.

- Read more + Learn more about README files
- + Diagram placeholder

Purpose of wireframe

Wireframes are a visual guide to what a product should look like. Their main goal is to create an app or site that delivers a cohesive and well-designed experience. They are also a great way to ensure that every element in a UI has a purpose.

- Read more + Explore wireframe design principles
- + Diagram placeholder

Branch in Git

In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code. -

> - Read more +

+ Understand Git branching
- ITP-MAY-25 |ping wang module-onboarding| week 1 +

ITP-MAY-25 | Ping Wang | Module: Onboarding | Week 1

From 0b3037479c16de293bd132141820df53f8361dc9 Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 24 May 2025 15:05:54 +0100 Subject: [PATCH 3/8] format changes --- Wireframe/index.html | 98 +++++++++++++++++++++++++------------------- Wireframe/style.css | 30 ++++++++++---- 2 files changed, 79 insertions(+), 49 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index de5594033..8efa80b5d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,46 +1,60 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

Wireframe

+

+ Can I give some explanation regarding what the purpose of REAMME.file and wireframe are and what the branch in Git + is. +

+
+
+
+ Diagram placeholder +

README.file

- Can I give some explanation regarding what the purpose of REAMME.file and wireframe are and what the branch in Git is. + A README file serves as a crucial documentation tool, primarily used to provide essential information about a + software project, dataset, or any other file collection. It's designed to help users (both developers and + end-users) understand the project's purpose, functionality, installation instructions, and how to contribute or + get help.

-
-
-
- Diagram placeholder -

README.file

-

- A README file serves as a crucial documentation tool, primarily used to provide essential information about a software project, dataset, or any other file collection. It's designed to help users (both developers and end-users) understand the project's purpose, functionality, installation instructions, and how to contribute or get help. -

- Learn more about README files -
-
- Diagram placeholder -

Purpose of wireframe

-

- Wireframes are a visual guide to what a product should look like. Their main goal is to create an app or site that delivers a cohesive and well-designed experience. They are also a great way to ensure that every element in a UI has a purpose. -

- Explore wireframe design principles -
-
- Diagram placeholder -

Branch in Git

-

- In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code. -

- Understand Git branching -
-
-
-

ITP-MAY-25 | Ping Wang | Module: Onboarding | Week 1

-
- - + Learn + more about README files + +
+ Diagram placeholder +

Purpose of wireframe

+

+ Wireframes are a visual guide to what a product should look like. Their main goal is to create an app or site + that delivers a cohesive and well-designed experience. They are also a great way to ensure that every element in + a UI has a purpose. +

+ Explore + wireframe design principles +
+
+ Diagram placeholder +

Branch in Git

+

+ In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the + main project. Think of it as a "parallel universe" for your code. +

+ Understand Git branching +
+ +
+

ITP-MAY-25 | Ping Wang | Module: Onboarding | Week 1

+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4849010f7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -31,16 +32,27 @@ body { color: var(--ink); font: var(--font); } + +header h1 { + text-align: center; +} + +header p { + text-align: center; +} + a { padding: var(--space); border: var(--line); max-width: fit-content; } + img, svg { width: 100%; object-fit: cover; } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -49,11 +61,11 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } -footer { - position: fixed; - bottom: 0; + +footer p { text-align: center; } + /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. Inspect this in Devtools and click the "grid" button in the Elements view @@ -65,10 +77,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*:first-child { grid-column: span 2; } } + /* ====== Article Layout ====== Setting the rules for how elements are placed in the article. Now laying out just the INSIDE of the repeated card/article design. @@ -80,10 +94,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } -} +} \ No newline at end of file From 44b2ae87fe41d531b32252890e55984676fb8127 Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 31 May 2025 11:22:13 +0100 Subject: [PATCH 4/8] change form control read.me --- Form-Controls/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 10a159585..d11d1931a 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -35,8 +35,8 @@ Let's write out our testable criteria. Check each one off as you complete it. ### HTML -- [x ] My form is semantic html. -- [ x] All inputs have associated labels. +- [ ] 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. @@ -48,4 +48,4 @@ Let's write out our testable criteria. Check each one off as you complete it. - [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) +- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) \ No newline at end of file From 832adefdd527ede788f650bb69011b07eedc74ea Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 31 May 2025 11:31:30 +0100 Subject: [PATCH 5/8] footer fixed to viewpoint --- Wireframe/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 4849010f7..5c16c398b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -66,6 +66,16 @@ footer p { text-align: center; } +footer { + position: fixed; + bottom: 0; + width: 100%; + background-color: #f2f2f2; + text-align: center; + padding: 10px; +} + + /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. Inspect this in Devtools and click the "grid" button in the Elements view From fc6482d5657136c87d3a82d305b49102502db531 Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 31 May 2025 12:53:56 +0100 Subject: [PATCH 6/8] code check with validator --- Form-Controls/index.html | 64 ++++++++++++++++++++++++++++++++-------- 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..884e6c27c 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -12,16 +12,54 @@

Product Pick

-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
- - +
+ + +
+
+
+ + +
+
+
+ + +
+
+

Size

+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+ + \ No newline at end of file From 61df3a4a4ff0c6144578189139bc4e8acf660f1a Mon Sep 17 00:00:00 2001 From: pathywang Date: Sat, 31 May 2025 14:19:55 +0100 Subject: [PATCH 7/8] undo change for form comtrol --- Form-Controls/README.md | 2 +- Form-Controls/index.html | 64 ++++++++-------------------------------- 2 files changed, 14 insertions(+), 52 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index d11d1931a..bfcdf6c0b 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -48,4 +48,4 @@ Let's write out our testable criteria. Check each one off as you complete it. - [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) \ No newline at end of file +- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 884e6c27c..65a866cdb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -12,54 +12,16 @@

Product Pick

-
- - -
-
-
- - -
-
-
- - -
-
-

Size

- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - -
-
- \ No newline at end of file +
+ + +
+ +
+ +

By HOMEWORK SOLUTION

+
+ + From a9fd8956d113da034899153c300d05deed96cec8 Mon Sep 17 00:00:00 2001 From: pathywang Date: Sun, 18 Jan 2026 15:05:08 +0000 Subject: [PATCH 8/8] wireframe code --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8efa80b5d..d90902ddb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,7 +3,7 @@ - + Wireframe @@ -12,7 +12,7 @@

Wireframe

- Can I give some explanation regarding what the purpose of REAMME.file and wireframe are and what the branch in Git + Can I give some explanation regarding what the purpose of README.file and wireframe are and what the branch in Git is.

@@ -53,7 +53,7 @@

Branch in Git