From 0b5f732b14342ad2157563df908b9d34bc739e52 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Thu, 22 Jan 2026 20:37:32 +0000 Subject: [PATCH 01/10] Add README article content and improve page header and footer --- Wireframe/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..ecb8e8f25 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,23 +10,23 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + This page explains key concepts used in web development and version control.

- -

Title

+ Illustration of a README file +

What are README files?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project is, how to use it, and why it is useful. + It helps users and contributors understand how to get started and where to get help.

- Read more + Read more about README files
From fb2587f5d6736044431fad17823729aa80adf664 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Thu, 22 Jan 2026 21:54:41 +0000 Subject: [PATCH 02/10] Add all three articles with semantic HTML and descriptive content --- Wireframe/index.html | 44 +++++++++++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index ecb8e8f25..8b26b66f9 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,19 +14,41 @@

Wireframe

-
- Illustration of a README file -

What are README files?

-

- A README file explains what a project is, how to use it, and why it is useful. - It helps users and contributors understand how to get started and where to get help. -

- Read more about README files -
-
+
+
+ Illustration of a README file +

What is the purpose of a README file?

+

+ A README file explains what a project is, how to use it, and why it is useful. + It helps users and contributors understand how to get started and where to get help. +

+ Read more about README files +
+ +
+ Illustration of a wireframe +

What is the purpose of a wireframe?

+

+ A wireframe is a basic illustration of a website or app. + They are used to design the layout, showing all elements of the page without going into details such as fonts and colours. +

+ Read more about Wireframes +
+ +
+ Illustration of a Git branch +

What is a branch in Git?

+

+ A branch in Git is like a separate workspace where you can make changes and try new ideas without affecting the main project. + Creating a branch allows you to make changes without affecting the original version. +

+ Read more about Git branches +
+
+

- © Code Your Future + © Code Your Future

From 1288ec139058677e584ffcb7d01646b18cc5e066 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 24 Jan 2026 15:32:48 +0000 Subject: [PATCH 03/10] I have changed the grid layout and fixed the footer to bottm of viewport. --- Wireframe/index.html | 2 +- Wireframe/style.css | 162 +++++++++++++++++++++++-------------------- 2 files changed, 86 insertions(+), 78 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8b26b66f9..2392616d8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -26,7 +26,7 @@

What is the purpose of a README file?

- Illustration of a wireframe + Illustration of a wireframe

What is the purpose of a wireframe?

A wireframe is a basic illustration of a website or app. diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bfe0dc90d 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,97 @@ -/* 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); - --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; +V/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +/* Base styles */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + color: #333; + line-height: 1.6; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +/* Header */ +header { + background: #222; + color: #fff; + padding: 2rem 1rem; + text-align: center; } -img, -svg { - width: 100%; - object-fit: cover; + +header p { + max-width: 700px; + margin: 0 auto; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ + +/* Main container */ main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + max-width: 1100px; + margin: 2rem auto; + padding: 0 1rem; } -footer { - position: fixed; - bottom: 0; - 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 -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { + +/* GRID LAYOUT */ +section { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + gap: 1.5rem; } -/* ====== 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. -*/ + +/* First article spans full width */ +section article:first-child { + grid-column: 1 / -1; +} + +/* Article styling */ 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; - } - > img { - grid-column: span 3; - } + background: #fff; + padding: 1.5rem; + border: 1px solid #ccc; + border-radius: 6px; +} + +/* Images */ +article img { + width: 100%; + height: auto; + margin-bottom: 1rem; + border: 1px solid #ddd; +} + +/* Headings */ +article h2 { + margin-bottom: 0.75rem; +} + +/* Links */ +article a { + display: inline-block; + margin-top: 1rem; + color: #0066cc; + text-decoration: none; + font-weight: bold; } + +article a:hover { + text-decoration: underline; +} + +/* Footer */ +footer { + background: transparent; + color: black; + text-align: center; + padding: 1rem; + position: fixed; + bottom: 0; +} + +/* MOBILE: stack everything */ +@media (max-width: 700px) { + section { + grid-template-columns: 1fr; + } +} \ No newline at end of file From dff033cab9c7311b9c6dc16ab5ee5b09f3092451 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 24 Jan 2026 16:04:03 +0000 Subject: [PATCH 04/10] Footer centralised --- Wireframe/index.html | 8 +++++--- Wireframe/style.css | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2392616d8..ec9fc0fb4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -47,9 +47,11 @@

What is a branch in Git?

-

- © Code Your Future -

+
+

+ © Code Your Future +

+
diff --git a/Wireframe/style.css b/Wireframe/style.css index bfe0dc90d..367755081 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,6 +31,7 @@ main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; + padding-bottom: 4rem; } /* GRID LAYOUT */ @@ -83,7 +84,7 @@ article a:hover { footer { background: transparent; color: black; - text-align: center; + left: 45%; padding: 1rem; position: fixed; bottom: 0; From 89bdacca84ba32d3ca666516740dd075f4a726cc Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 24 Jan 2026 21:51:51 +0000 Subject: [PATCH 05/10] Header background changed, Buttons added for Read Me links, article backgound changed and padding added. --- Wireframe/style.css | 46 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 367755081..a67894ead 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -9,14 +9,14 @@ V/* Reset */ body { font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4; - color: #333; + color: black; line-height: 1.6; } /* Header */ header { - background: #222; - color: #fff; + background: #f4f4f1; + color: black; padding: 2rem 1rem; text-align: center; } @@ -26,7 +26,27 @@ header p { margin: 0 auto; } -/* Main container */ + +a { + color: #007BFF; + text-decoration: none; +} + +.button { + display: inline-block; + padding: 10px 20px; + background-color: #0056b3; + color: #ffffff; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; +} + +.button:hover { + background-color: #0056b3; +} + main { max-width: 1100px; margin: 2rem auto; @@ -46,14 +66,20 @@ section article:first-child { grid-column: 1 / -1; } -/* Article styling */ +article img { + width: 100%; + max-width: 200px; + height: auto; + display: block; + margin: 0 auto; +} + article { - background: #fff; + background-color: #f4f6f8; padding: 1.5rem; - border: 1px solid #ccc; - border-radius: 6px; } + /* Images */ article img { width: 100%; @@ -86,8 +112,8 @@ footer { color: black; left: 45%; padding: 1rem; - position: fixed; - bottom: 0; + position: fixed; + bottom: 0; } /* MOBILE: stack everything */ From d4c4bd450171b65705fcbfa85b203f97ddeae68c Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 24 Jan 2026 22:14:10 +0000 Subject: [PATCH 06/10] Made button positions uniformed. --- Wireframe/style.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index a67894ead..3e2bd407a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -77,6 +77,8 @@ article img { article { background-color: #f4f6f8; padding: 1.5rem; + display:flex; + flex-direction: column; } @@ -93,19 +95,23 @@ article h2 { margin-bottom: 0.75rem; } -/* Links */ -article a { +.button { display: inline-block; - margin-top: 1rem; - color: #0066cc; + padding: 10px 20px; + background-color: #0056b3; + color: #ffffff; + border: none; + outline: none; + border-radius: 5px; text-decoration: none; font-weight: bold; + transition: background-color 0.3s; } -article a:hover { - text-decoration: underline; +article .button { + margin-top: auto; + align-self: flex-start; } - /* Footer */ footer { background: transparent; From bdb588a980435ea7b7cef20c940e37f403da2006 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 31 Jan 2026 15:34:08 +0000 Subject: [PATCH 07/10] Form controls updated --- Form-Controls/index.html | 105 +++++++++++++++++++++++++++++---------- Wireframe/index.html | 57 --------------------- 2 files changed, 80 insertions(+), 82 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..a67e87cae 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,82 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
- - + + + + T-Shirt Order Form + + + +
+

Order Your T-Shirt

+ +
+ + +
+ Customer Details + +

+
+ +

+ +

+
+ +

+ +
+ + +
+ T-Shirt Colour + +

Please choose a colour:

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ + +
+ T-Shirt Size + +

+
+ +

+ +
+ + +

+ +

\ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index ec9fc0fb4..e69de29bb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,57 +0,0 @@ - - - - - - Wireframe - - - -
-

Wireframe

-

- This page explains key concepts used in web development and version control. -

-
-
-
-
- Illustration of a README file -

What is the purpose of a README file?

-

- A README file explains what a project is, how to use it, and why it is useful. - It helps users and contributors understand how to get started and where to get help. -

- Read more about README files -
- -
- Illustration of a wireframe -

What is the purpose of a wireframe?

-

- A wireframe is a basic illustration of a website or app. - They are used to design the layout, showing all elements of the page without going into details such as fonts and colours. -

- Read more about Wireframes -
- -
- Illustration of a Git branch -

What is a branch in Git?

-

- A branch in Git is like a separate workspace where you can make changes and try new ideas without affecting the main project. - Creating a branch allows you to make changes without affecting the original version. -

- Read more about Git branches -
-
-
-
-
-

- © Code Your Future -

-
-
- - From 9593e2063e2b8e62fbbde8e301935df86376dfef Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 31 Jan 2026 15:52:06 +0000 Subject: [PATCH 08/10] Removed wireframe css from form control branch --- Wireframe/style.css | 130 -------------------------------------------- 1 file changed, 130 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 3e2bd407a..e69de29bb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,130 +0,0 @@ -V/* Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* Base styles */ -body { - font-family: Arial, Helvetica, sans-serif; - background-color: #f4f4f4; - color: black; - line-height: 1.6; -} - -/* Header */ -header { - background: #f4f4f1; - color: black; - padding: 2rem 1rem; - text-align: center; -} - -header p { - max-width: 700px; - margin: 0 auto; -} - - -a { - color: #007BFF; - text-decoration: none; -} - -.button { - display: inline-block; - padding: 10px 20px; - background-color: #0056b3; - color: #ffffff; - border-radius: 5px; - text-decoration: none; - font-weight: bold; - transition: background-color 0.3s; -} - -.button:hover { - background-color: #0056b3; -} - -main { - max-width: 1100px; - margin: 2rem auto; - padding: 0 1rem; - padding-bottom: 4rem; -} - -/* GRID LAYOUT */ -section { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; -} - -/* First article spans full width */ -section article:first-child { - grid-column: 1 / -1; -} - -article img { - width: 100%; - max-width: 200px; - height: auto; - display: block; - margin: 0 auto; -} - -article { - background-color: #f4f6f8; - padding: 1.5rem; - display:flex; - flex-direction: column; -} - - -/* Images */ -article img { - width: 100%; - height: auto; - margin-bottom: 1rem; - border: 1px solid #ddd; -} - -/* Headings */ -article h2 { - margin-bottom: 0.75rem; -} - -.button { - display: inline-block; - padding: 10px 20px; - background-color: #0056b3; - color: #ffffff; - border: none; - outline: none; - border-radius: 5px; - text-decoration: none; - font-weight: bold; - transition: background-color 0.3s; -} - -article .button { - margin-top: auto; - align-self: flex-start; -} -/* Footer */ -footer { - background: transparent; - color: black; - left: 45%; - padding: 1rem; - position: fixed; - bottom: 0; -} - -/* MOBILE: stack everything */ -@media (max-width: 700px) { - section { - grid-template-columns: 1fr; - } -} \ No newline at end of file From 56f4109a8e24f386df1241b2cf711f1e51a4c109 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 31 Jan 2026 15:59:18 +0000 Subject: [PATCH 09/10] updated work --- Wireframe/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index e69de29bb..69763a710 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file From a74fe90f49ef6744109302b09bbe9751a7fde6f0 Mon Sep 17 00:00:00 2001 From: grantriches-byte Date: Sat, 31 Jan 2026 16:05:16 +0000 Subject: [PATCH 10/10] name added at the bottom --- Form-Controls/index.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index a67e87cae..b39b20145 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -79,4 +79,9 @@

Order Your T-Shirt

-

\ No newline at end of file +

+ +

BY Grant Riches

+ + + \ No newline at end of file