From 16a6505305f765123a07663e78115c14f896457a Mon Sep 17 00:00:00 2001 From: Shayida Date: Thu, 5 Jun 2025 15:33:33 +0100 Subject: [PATCH 01/12] Complete wireframe task --- Form-Controls/wireframe-task/index.html | 45 +++++++ Form-Controls/wireframe-task/style.css | 166 ++++++++++++++++++++++++ 2 files changed, 211 insertions(+) create mode 100644 Form-Controls/wireframe-task/index.html create mode 100644 Form-Controls/wireframe-task/style.css diff --git a/Form-Controls/wireframe-task/index.html b/Form-Controls/wireframe-task/index.html new file mode 100644 index 000000000..1d6e73d00 --- /dev/null +++ b/Form-Controls/wireframe-task/index.html @@ -0,0 +1,45 @@ + + + + + + Wireframe + + + +
+

📄 Wireframe Explorer 📄

+

a two-dimensional skeletal outline of a webpage or app.

+
+
+ +
+
+ Wireframe design showing page layout +

WireFrame

+

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

+ Read more +
+ +
+ Diagram showing Git feature branches +

Git Branch

+

In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase. + It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.

+ Learn Git Branching +
+ +
+ YouTube screenshot explaining README file usage +

ReadMe

+

A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data. + You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

+ Read more +
+
+ + + + diff --git a/Form-Controls/wireframe-task/style.css b/Form-Controls/wireframe-task/style.css new file mode 100644 index 000000000..c983cbe3a --- /dev/null +++ b/Form-Controls/wireframe-task/style.css @@ -0,0 +1,166 @@ +:root { + --paper: white; + --ink: color-mix(in oklab, var(--color) 5%, black); + --font: 100%/1.5 system-ui; + --space: clamp(6px, 6px + 2vw, 15px); + --line: 1px solid black; + --container: 1000px; +} + +html, body { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; +} + +body { + background: linear-gradient(to right, #e0f7fa, #e1f5fe); + color: black; + font: var(--font); + min-height: 100vh; +} + +header { + text-align: center; + padding: var(--space) 0; +} + +header hr { + border: none; + border-top: 1.5px solid black; + width: 55%; +} + +header p { + margin-bottom: 0.2rem; +} + +h1, h2 { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #333; + margin-top: 1rem; + margin-bottom: 0.5rem; + font-weight: 600; +} + +h1:hover { + color: purple; + transition: color 0.3s ease; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; +} + +main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + flex: 1; + padding-bottom: 40px; +} + +main > *:first-child { + grid-column: span 2; + padding: var(--space); +} + +main > article:first-child h2, +main > article:first-child p { + font-size: 0.95rem; +} + +a { + padding: 6px 12px; + font-size: 0.85rem; + background-color: #007acc; + color: white; + text-decoration: none; + border-radius: 4px; + display: inline-flex; + align-items: center; + gap: 4px; + margin-top: var(--space); + max-width: fit-content; + transition: background-color 0.2s ease; +} + +a::after { + content: 'â–¶'; + font-size: 1rem; + margin-left: 2px; +} + +a:hover { + background-color: #005f99; +} + +img, +svg { + width: 100%; + object-fit: cover; +} + +article { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + border-radius: 8px; + padding-bottom: var(--space); + text-align: left; + padding: var(--space); + display: grid; + grid-template-columns: var(--space) 1fr var(--space); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background-color: rgba(255, 255, 255, 0.3); +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: span 3; + max-height: 300px; +} + +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.9); + text-align: center; + padding: 1.5px 2px; + border-top: 1px solid #ccc; + font-size: 0.80rem; + font-weight: 400; + z-index: 1000; +} + +@media (max-width: 600px) { + img { + max-height: 200px; + } + + main { + grid-template-columns: 1fr; + padding: 0 var(--space); + padding-bottom: 0; + } + + main > *:first-child { + grid-column: auto; + } + + footer { + font-size: 0.80rem; + position: static; + } +} From 50e50e18aedf53ba03ae5b5a0787b6fa557b7259 Mon Sep 17 00:00:00 2001 From: Shayida Date: Thu, 5 Jun 2025 20:24:09 +0100 Subject: [PATCH 02/12] Fix: moved wireframe code to Wireframe folder and deleted extra folder --- Wireframe/index.html | 40 ++++++--- Wireframe/style.css | 203 +++++++++++++++++++++++++++++-------------- 2 files changed, 166 insertions(+), 77 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..1d6e73d00 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,38 @@
-

Wireframe

-

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

+

📄 Wireframe Explorer 📄

+

a two-dimensional skeletal outline of a webpage or app.

+
+
- -

Title

-

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

- Read more + Wireframe design showing page layout +

WireFrame

+

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

+ Read more
+ +
+ Diagram showing Git feature branches +

Git Branch

+

In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase. + It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.

+ Learn Git Branching +
+ +
+ YouTube screenshot explaining README file usage +

ReadMe

+

A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data. + You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

+ Read more +
+
-

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

+

© 2025 CodeYourFuture — All rights reserved.

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..c983cbe3a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,166 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); + --paper: white; --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; + --line: 1px solid black; + --container: 1000px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +html, body { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; +} + body { - background: var(--paper); - color: var(--ink); + background: linear-gradient(to right, #e0f7fa, #e1f5fe); + color: black; font: var(--font); + min-height: 100vh; } -a { + +header { + text-align: center; + padding: var(--space) 0; +} + +header hr { + border: none; + border-top: 1.5px solid black; + width: 55%; +} + +header p { + margin-bottom: 0.2rem; +} + +h1, h2 { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: #333; + margin-top: 1rem; + margin-bottom: 0.5rem; + font-weight: 600; +} + +h1:hover { + color: purple; + transition: color 0.3s ease; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; +} + +main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + flex: 1; + padding-bottom: 40px; +} + +main > *:first-child { + grid-column: span 2; padding: var(--space); - border: var(--line); +} + +main > article:first-child h2, +main > article:first-child p { + font-size: 0.95rem; +} + +a { + padding: 6px 12px; + font-size: 0.85rem; + background-color: #007acc; + color: white; + text-decoration: none; + border-radius: 4px; + display: inline-flex; + align-items: center; + gap: 4px; + margin-top: var(--space); max-width: fit-content; + transition: background-color 0.2s ease; +} + +a::after { + content: 'â–¶'; + font-size: 1rem; + margin-left: 2px; } + +a:hover { + background-color: #005f99; +} + 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/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + +article { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + border-radius: 8px; + padding-bottom: var(--space); + text-align: left; + padding: var(--space); + display: grid; + grid-template-columns: var(--space) 1fr var(--space); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + background-color: rgba(255, 255, 255, 0.3); +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: span 3; + max-height: 300px; } + footer { position: fixed; bottom: 0; + left: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.9); text-align: center; + padding: 1.5px 2px; + border-top: 1px solid #ccc; + font-size: 0.80rem; + font-weight: 400; + z-index: 1000; } -/* ====== 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 -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; + +@media (max-width: 600px) { + img { + max-height: 200px; } -} -/* ====== 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. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; + + main { + grid-template-columns: 1fr; + padding: 0 var(--space); + padding-bottom: 0; + } + + main > *:first-child { + grid-column: auto; } - > img { - grid-column: span 3; + + footer { + font-size: 0.80rem; + position: static; } } From 273828935f9e63a540d47403b45b210b3b024018 Mon Sep 17 00:00:00 2001 From: Shayida Date: Thu, 5 Jun 2025 20:35:55 +0100 Subject: [PATCH 03/12] Remove unwanted wireframe-task folder and files --- Form-Controls/wireframe-task/index.html | 45 ------- Form-Controls/wireframe-task/style.css | 166 ------------------------ 2 files changed, 211 deletions(-) delete mode 100644 Form-Controls/wireframe-task/index.html delete mode 100644 Form-Controls/wireframe-task/style.css diff --git a/Form-Controls/wireframe-task/index.html b/Form-Controls/wireframe-task/index.html deleted file mode 100644 index 1d6e73d00..000000000 --- a/Form-Controls/wireframe-task/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - Wireframe - - - -
-

📄 Wireframe Explorer 📄

-

a two-dimensional skeletal outline of a webpage or app.

-
-
- -
-
- Wireframe design showing page layout -

WireFrame

-

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

- Read more -
- -
- Diagram showing Git feature branches -

Git Branch

-

In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase. - It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.

- Learn Git Branching -
- -
- YouTube screenshot explaining README file usage -

ReadMe

-

A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data. - You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

- Read more -
-
- -
-

© 2025 CodeYourFuture — All rights reserved.

-
- - diff --git a/Form-Controls/wireframe-task/style.css b/Form-Controls/wireframe-task/style.css deleted file mode 100644 index c983cbe3a..000000000 --- a/Form-Controls/wireframe-task/style.css +++ /dev/null @@ -1,166 +0,0 @@ -:root { - --paper: white; - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid black; - --container: 1000px; -} - -html, body { - height: 100%; - margin: 0; - display: flex; - flex-direction: column; -} - -body { - background: linear-gradient(to right, #e0f7fa, #e1f5fe); - color: black; - font: var(--font); - min-height: 100vh; -} - -header { - text-align: center; - padding: var(--space) 0; -} - -header hr { - border: none; - border-top: 1.5px solid black; - width: 55%; -} - -header p { - margin-bottom: 0.2rem; -} - -h1, h2 { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #333; - margin-top: 1rem; - margin-bottom: 0.5rem; - font-weight: 600; -} - -h1:hover { - color: purple; - transition: color 0.3s ease; -} - -h1 { - font-size: 2rem; -} - -h2 { - font-size: 1.5rem; -} - -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - flex: 1; - padding-bottom: 40px; -} - -main > *:first-child { - grid-column: span 2; - padding: var(--space); -} - -main > article:first-child h2, -main > article:first-child p { - font-size: 0.95rem; -} - -a { - padding: 6px 12px; - font-size: 0.85rem; - background-color: #007acc; - color: white; - text-decoration: none; - border-radius: 4px; - display: inline-flex; - align-items: center; - gap: 4px; - margin-top: var(--space); - max-width: fit-content; - transition: background-color 0.2s ease; -} - -a::after { - content: 'â–¶'; - font-size: 1rem; - margin-left: 2px; -} - -a:hover { - background-color: #005f99; -} - -img, -svg { - width: 100%; - object-fit: cover; -} - -article { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border-radius: 8px; - padding-bottom: var(--space); - text-align: left; - padding: var(--space); - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - background-color: rgba(255, 255, 255, 0.3); -} - -article > * { - grid-column: 2 / 3; -} - -article > img { - grid-column: span 3; - max-height: 300px; -} - -footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - background-color: rgba(255, 255, 255, 0.9); - text-align: center; - padding: 1.5px 2px; - border-top: 1px solid #ccc; - font-size: 0.80rem; - font-weight: 400; - z-index: 1000; -} - -@media (max-width: 600px) { - img { - max-height: 200px; - } - - main { - grid-template-columns: 1fr; - padding: 0 var(--space); - padding-bottom: 0; - } - - main > *:first-child { - grid-column: auto; - } - - footer { - font-size: 0.80rem; - position: static; - } -} From da99ff4f0405be6b63ad177d18af7c5f9daf72f8 Mon Sep 17 00:00:00 2001 From: Shayida Date: Fri, 6 Jun 2025 12:28:54 +0100 Subject: [PATCH 04/12] ch --- Form-Controls/index.html | 70 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..f76c4da0a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,16 +3,76 @@ - My form exercise + Selling Clothes +
-

Product Pick

+

T-Shirt Order Form

+ +
-
+ + + + + + + + Please enter your full name (min 2 characters). +

+ + + + + Please enter a valid email address. +

+ + +
+ T-Shirt Colour (choose one): + + + + + + + + + +
+
+ + + + +

+ + -

By HOMEWORK SOLUTION

+

By Xiayidan

- + \ No newline at end of file From 118bd817af55882f305bea9cf9903a8b1c243d3b Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 20 Sep 2025 10:50:41 +0100 Subject: [PATCH 05/12] Fix: remove arrow icons and unify first article font size --- Wireframe/index.html | 9 ++++++--- Wireframe/style.css | 23 ++++++----------------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1d6e73d00..fa53b36e3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -18,7 +18,7 @@

📄 Wireframe Explorer 📄

Wireframe design showing page layout

WireFrame

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

- Read more + Read more
@@ -26,7 +26,7 @@

WireFrame

Git Branch

In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase. It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.

- Learn Git Branching + Learn Git Branching
@@ -34,12 +34,15 @@

Git Branch

ReadMe

A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data. You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

- Read more + Read more

© 2025 CodeYourFuture — All rights reserved.

+

Created by Shayida

+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index c983cbe3a..f8c21f908 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,12 +36,13 @@ header p { margin-bottom: 0.2rem; } -h1, h2 { +h2 { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; margin-top: 1rem; margin-bottom: 0.5rem; - font-weight: 600; + font-size: 24px; + font-weight: bold; } h1:hover { @@ -53,9 +54,6 @@ h1 { font-size: 2rem; } -h2 { - font-size: 1.5rem; -} main { max-width: var(--container); @@ -72,11 +70,6 @@ main > *:first-child { padding: var(--space); } -main > article:first-child h2, -main > article:first-child p { - font-size: 0.95rem; -} - a { padding: 6px 12px; font-size: 0.85rem; @@ -92,11 +85,6 @@ a { transition: background-color 0.2s ease; } -a::after { - content: 'â–¶'; - font-size: 1rem; - margin-left: 2px; -} a:hover { background-color: #005f99; @@ -137,11 +125,12 @@ footer { width: 100%; background-color: rgba(255, 255, 255, 0.9); text-align: center; - padding: 1.5px 2px; + padding: 4px 0; border-top: 1px solid #ccc; - font-size: 0.80rem; + font-size: 0.75rem; font-weight: 400; z-index: 1000; + line-height: 1.2; } @media (max-width: 600px) { From 3e35c52991b4c9b623caec7a2a22733975a3fd71 Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 20 Sep 2025 11:32:06 +0100 Subject: [PATCH 06/12] Fix form validation and remove tags, add placeholders for cleaner UX --- Form-Controls/index.html | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index f76c4da0a..dad79cb5d 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,35 +15,29 @@

T-Shirt Order Form

- + - - - Please enter your full name (min 2 characters). -

+

- - Please enter a valid email address. -

- +

T-Shirt Colour (choose one): From df12af10f74d4803e9f2a71065af06d250aa6f55 Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 27 Sep 2025 11:10:31 +0100 Subject: [PATCH 07/12] Remove Form-Controls file from Wireframe PR --- Form-Controls/index.html | 81 ---------------------------------------- 1 file changed, 81 deletions(-) delete mode 100644 Form-Controls/index.html diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index dad79cb5d..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - Selling Clothes - - - - - -
-

T-Shirt Order Form

-
- - -
- - - - - -

- - - -

- -
- T-Shirt Colour (choose one): - - - - - - - - - -
-
- - - - -

- - - - - -
-
- -

By Xiayidan

-
- - \ No newline at end of file From da21e3b366d93d094bdaa7565125498b0a043fd5 Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 27 Sep 2025 11:22:41 +0100 Subject: [PATCH 08/12] Fix footer spacing so buttons are not hidden and update footer text --- Wireframe/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index f8c21f908..1407b84a1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -62,7 +62,7 @@ main { grid-template-columns: 1fr 1fr; gap: var(--space); flex: 1; - padding-bottom: 40px; + padding-bottom: 100px; } main > *:first-child { @@ -141,7 +141,7 @@ footer { main { grid-template-columns: 1fr; padding: 0 var(--space); - padding-bottom: 0; + padding-bottom: 100px; } main > *:first-child { @@ -153,3 +153,4 @@ footer { position: static; } } + From 3f6143b1507418b44fa080ed6237473f41aa8728 Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 27 Sep 2025 11:31:43 +0100 Subject: [PATCH 09/12] Fix footer spacing so buttons are not hidden and update footer text --- Wireframe/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 1407b84a1..142d9f1a5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -61,8 +61,9 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - flex: 1; padding-bottom: 100px; + flex: 1; + } main > *:first-child { @@ -140,8 +141,9 @@ footer { main { grid-template-columns: 1fr; - padding: 0 var(--space); padding-bottom: 100px; + padding: 0 var(--space); + } main > *:first-child { From 5e4f7477e3afbf9f7d1f58b07d73470538ce277f Mon Sep 17 00:00:00 2001 From: Shayida Date: Fri, 3 Oct 2025 23:29:35 +0100 Subject: [PATCH 10/12] Restore Form-Controls/index.html and update Wireframe --- Form-Controls/index.html | 81 ++++++++++++++++++++++++++++++++++++++++ Wireframe/index.html | 2 +- 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 Form-Controls/index.html diff --git a/Form-Controls/index.html b/Form-Controls/index.html new file mode 100644 index 000000000..dad79cb5d --- /dev/null +++ b/Form-Controls/index.html @@ -0,0 +1,81 @@ + + + + + + Selling Clothes + + + + + +
+

T-Shirt Order Form

+
+ + +
+
+ + + + +

+ + + +

+ +
+ T-Shirt Colour (choose one): + + + + + + + + + +
+
+ + + + +

+ + + + +
+
+
+ +

By Xiayidan

+
+ + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index fa53b36e3..6679a9383 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -18,7 +18,7 @@

📄 Wireframe Explorer 📄

Wireframe design showing page layout

WireFrame

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

- Read more + Read more
From e53cd4f8dff292393e68f98895dd90c325a308c0 Mon Sep 17 00:00:00 2001 From: Shayida Date: Fri, 3 Oct 2025 23:57:33 +0100 Subject: [PATCH 11/12] Remove Form-Controls changes from Wireframe PR --- Form-Controls/index.html | 64 ++++------------------------------------ 1 file changed, 5 insertions(+), 59 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index dad79cb5d..65a866cdb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,70 +3,16 @@ - Selling Clothes + My form exercise -
-

T-Shirt Order Form

+

Product Pick

- -
-
- - - - -

- - - -

- -
- T-Shirt Colour (choose one): - - - - - - - - - -
-
- - - - -

- - + -

By Xiayidan

+

By HOMEWORK SOLUTION

- \ No newline at end of file + From de9a9c6ca831b318572277a27c6f4ee183105f49 Mon Sep 17 00:00:00 2001 From: Shayida Date: Sat, 11 Oct 2025 11:18:20 +0100 Subject: [PATCH 12/12] Fix article links for wireframe, git branch, and README --- Wireframe/index.html | 67 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 52 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 6679a9383..4b8229395 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,34 +15,71 @@

📄 Wireframe Explorer 📄

- Wireframe design showing page layout + Wireframe design showing page layout

WireFrame

-

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

- Read more +

+ A website wireframe, also known as a page schematic or screen + blueprint, is a visual guide that represents the skeletal framework of + a website. +

+ Read more
- Diagram showing Git feature branches + Diagram showing Git feature branches

Git Branch

-

In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase. - It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.

- Learn Git Branching +

+ In Git, branching allows developers to create independent lines of + development, diverging from the main project line and working on new + features or bug fixes without affecting the primary codebase. It's + like creating a separate "parallel universe" for your code, enabling + parallel development efforts. +

+ Learn Git Branching
- YouTube screenshot explaining README file usage + YouTube screenshot explaining README file usage

ReadMe

-

A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data. - You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

- Read more -
+

+ A README file is a plain text file, often used in software + repositories or when sharing datasets, that provides a brief + introduction and explanation of the project or data. You can add a + README file to your repository to tell other people why your project + is useful, what they can do with your project, and how they can use + it. +

+ Read more +
- -