From f0724abec22eb772dcb09ca70269e83b6b17f8fd Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:42:04 +0100 Subject: [PATCH 01/17] added image, title, summary, and context of wireframe --- Wireframe/index.html | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..4028abfd3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,15 +8,34 @@
-

Wireframe

+

Wireframe, branches, and readme files

- This is the default, provided code and no changes have been made yet. + Let's get familiar with wireframe, branches, and readme files.

+
+ +

Wireframe

+

+ Wireframe is a visual guide that represents the skeletal framework of a + website or application. It shows the layout, structure, and features + without focusing on design elements like colors or images. +

+ Read more +
+
+ +

Branches

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, + voluptates. Quisquam, voluptates. +

+ Read more +
-

Title

+

README files

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptates. Quisquam, voluptates. From 715c2d66d192d1d6e91af44948570ed88e9750f6 Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Thu, 28 Aug 2025 19:00:32 +0100 Subject: [PATCH 02/17] updated context of wireframe and branches in git --- Wireframe/index.html | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 4028abfd3..30192b7a8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,30 +8,32 @@

-

Wireframe, branches, and readme files

+

Wireframe, branches in git, and readme files

Let's get familiar with wireframe, branches, and readme files.

- -

Wireframe

+ a black and white photo of wireframe in tablet, webpage, and smartphone +

The purpose of a wireframe

Wireframe is a visual guide that represents the skeletal framework of a website or application. It shows the layout, structure, and features - without focusing on design elements like colors or images. + without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.

- Read more + Read more
- -

Branches

+ a photo of git branches and relationships with main +

Branches in git

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch in Git is a separate line of development that allows you to + work on different features or fixes independently. It enables + collaboration, experimentation, and version control without affecting + the main codebase.

- Read more + Read more
From 1a89b42099286fa914426b40ac60775845b266a5 Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Fri, 29 Aug 2025 18:05:30 +0100 Subject: [PATCH 03/17] add context of readme files --- Wireframe/index.html | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 30192b7a8..37d294a5d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -36,13 +36,12 @@

Branches in git

Read more
- -

README files

+ a picture of a banner written readme +

The purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project.

- Read more + Read more
From 20ea11e1f61c11fdce69b8f38e59b513235141cd Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Fri, 29 Aug 2025 18:54:40 +0100 Subject: [PATCH 04/17] add color styling in style.css --- Wireframe/index.html | 8 ++++---- Wireframe/style.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 37d294a5d..d2220ee64 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -22,7 +22,7 @@

The purpose of a wireframe

website or application. It shows the layout, structure, and features without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.

- Read more + Read more
a photo of git branches and relationships with main @@ -33,7 +33,7 @@

Branches in git

collaboration, experimentation, and version control without affecting the main codebase.

- Read more + Read more
a picture of a banner written readme @@ -41,12 +41,12 @@

The purpose of a README file

A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project.

- Read more + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..515715d61 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,16 +26,36 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +header { + text-align: center; + color: rgb(1, 77, 77); +} + body { background: var(--paper); color: var(--ink); font: var(--font); + background-color: rgb(239, 244, 247); } a { padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; + color: rgb(116, 72, 15); + border-radius: 25px; + border-color: green; + display: flex; + justify-content: center; + align-items: center; +} + +a:hover { + background-color: rgb(116, 72, 15); + color: white; + transition: background-color 0.3s ease; } + img, svg { width: 100%; @@ -53,6 +73,12 @@ footer { position: fixed; bottom: 0; text-align: center; + background-color: rgb(247, 247, 236); + width: 99%; + border: 1px solid; + border-color: green; + color: rgb(116, 72, 15); + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -76,6 +102,7 @@ Keeping things orderly and separate is the key to good, simple CSS. */ article { border: var(--line); + border-radius: 15px; padding-bottom: var(--space); text-align: left; display: grid; @@ -85,5 +112,14 @@ article { } > img { grid-column: span 3; + } + background-color: rgb(240, 240, 235); + border-color: green; + color: rgb(116, 72, 15); +} + +img { + border-top-left-radius: 15px; + border-top-right-radius: 15px; } From 49d1280ed8ed9df5f1031646104d33fd90373d21 Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Fri, 29 Aug 2025 23:31:20 +0100 Subject: [PATCH 05/17] edited styling --- Wireframe/index.html | 7 +++++-- Wireframe/style.css | 11 ++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d2220ee64..05de7da0c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -25,7 +25,10 @@

The purpose of a wireframe

Read more
- a photo of git branches and relationships with main + + a picture of git branches + +

Branches in git

A branch in Git is a separate line of development that allows you to @@ -36,7 +39,7 @@

Branches in git

Read more
- a picture of a banner written readme + a picture of a banner written readme

The purpose of a README file

A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project. diff --git a/Wireframe/style.css b/Wireframe/style.css index 515715d61..f7ef744ce 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,7 +18,7 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, var(--color) 5%, rgb(3, 3, 3)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -123,3 +123,12 @@ img { border-top-left-radius: 15px; border-top-right-radius: 15px; } + +#branches-img, #readme-img { + min-height: 200px; + max-height: 300px; +} + +#branches-img { + object-fit: contain; +} From c8ccb8624a0ce94c9f0a0238b91221a52454b754 Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Mon, 1 Sep 2025 16:03:16 +0100 Subject: [PATCH 06/17] create a form for username, email, color, and size with validation check --- Form-Controls/index.html | 52 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..c007fc575 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,14 +14,60 @@

Product Pick

- + + + +
+ + + +
+
+ + + +
+
+ + + +
+ +
From ee1b40a7a7387cdaa58b8985841a78b137985fc2 Mon Sep 17 00:00:00 2001 From: "TM.HO" <51426129+TzeMingHo@users.noreply.github.com> Date: Mon, 1 Sep 2025 16:21:59 +0100 Subject: [PATCH 07/17] improved accessibility score to 100 --- Form-Controls/index.html | 103 +++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index c007fc575..db75bca10 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,55 +14,64 @@

Product Pick

-
- - - -
-
- - - -
-
- - - -
-
- - - -
+
+ Order your T-shirt + Your name registered with us +
+ + + +
+ Your email registered with us +
+ + + +
+ Please choose the color of T-shirt you like +
+ + + +
+ Please choose the size of T-shirt you like +
+ + + +
+
- +