From 989fa209c1de22b349076003aca8c4acdca20f41 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 16:14:54 +0100 Subject: [PATCH 1/9] HTML skeleton page code --- Wireframe/index.html | 45 ++++++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..2ee12608e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -2,32 +2,41 @@ - - Wireframe + + Planning Your Codebase +
-

Wireframe

-

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

+

Planning Your Codebase

+

A quick guide for beginners to structure, version, and prepare code.

+
-
- -

Title

-

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

- Read more -
+
+
+

What is Git?

+

[summary goes here]

+ Read more +
+ +
+

Why Do Developers Use Git?

+

[summary goes here]

+ Read more +
+ +
+

What is a Branch in Git?

+

[summary goes here]

+ Read more +
+
+ From 3bbd7ab0e472807e74958e2a0cb80447df7e22e3 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 22:15:46 +0100 Subject: [PATCH 2/9] added css for wireframe task --- Wireframe/index.html | 15 ++++++++ Wireframe/style.css | 92 +++++++++++++++++++++++++++++++++++--------- 2 files changed, 88 insertions(+), 19 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2ee12608e..7e9f25fa0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,18 +16,33 @@

Planning Your Codebase

+ Official Git logo +

What is Git?

[summary goes here]

Read more
+ Developers collaborating with laptops +

Why Do Developers Use Git?

[summary goes here]

Read more
+ Visual explanation of branching in Git +

What is a Branch in Git?

[summary goes here]

Read more diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d71f952ed 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -9,8 +9,11 @@ As well as useful links to learn more */ 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 @@ -41,34 +44,60 @@ svg { width: 100%; object-fit: cover; } + +/* ====== Header Layout ====== */ +header { + padding: var(--space); + text-align: center; +} +header h1 { + font-size: 2rem; + margin-bottom: var(--space); +} +header p { + font-size: 1.2rem; + color: gray; +} + /* ====== 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; + margin: 0 auto calc(var(--space) * 6) auto; + padding-bottom: calc(var(--space) * 4); } -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 { + + /* ====== 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/ + */ +section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { +} + +section > article:first-child { grid-column: span 2; } + + +/* added padding, width and border top to the footer*/ +footer { + position: fixed; + bottom: 0; + text-align: center; + width: 100%; + padding: var(--space); + border-top: var(--line); + background-color: var(--paper); } + /* ====== 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 +109,35 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + grid-template-rows: auto auto auto auto; + margin-bottom: calc(var(--space) * 2); + border-radius: 6px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); +} + +article > * { grid-column: 2/3; } - > img { - grid-column: span 3; - } + + /* Force consistent image height */ +article > img { + aspect-ratio: 2 / 1; + height: auto; + width: 100%; + object-fit: contain; + display: block; + background-color: white; + box-sizing: border-box; + margin-bottom: 0; /* no extra space */ + border-bottom: 1px solid var(--ink); /* 🪄 this is the key fix */ +} + +/* Make the
look like your wireframe divider */ +article hr { + grid-column: 2 / 3; + border: none; + height: 1px; + background-color: var(--ink); + opacity: 0.4; + margin: calc(var(--space) * 1.5) 0; } From 4323c76e07dafe35b5d6d7c77db09c85b2bbc559 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 22:23:30 +0100 Subject: [PATCH 3/9] What is git --- Wireframe/index.html | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7e9f25fa0..b77f17982 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -22,8 +22,8 @@

Planning Your Codebase

/>

What is Git?

-

[summary goes here]

- Read more +

If you've ever lost a file or overwritten something important, Git is like a digital time machine that helps you avoid that chaos. It keeps track of your files as they change, letting you jump back to previous versions and understand who changed what and when. Pretty much a must-have if you’re working on projects — solo or with a team.

+ Read more
@@ -33,8 +33,8 @@

What is Git?

/>

Why Do Developers Use Git?

-

[summary goes here]

- Read more +

Git makes working on code feel a lot less scary. You can experiment freely, knowing you can always roll back. But it’s not just about safety — it also makes collaboration smooth, since multiple people can work on the same project without constantly tripping over each other. No more saving files as 'final_FINAL_thisone_use.js'.

+ Read more
@@ -44,14 +44,18 @@

Why Do Developers Use Git?

/>

What is a Branch in Git?

-

[summary goes here]

- Read more +

Built with ❤️ by R.M.B

+

+ This site was created as part of the CodeYourFuture onboarding coursework. + You can view the related GitHub issue + here. +

From c53ebc3abd819d088615a61ba197670d8929ee7d Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 22:25:33 +0100 Subject: [PATCH 4/9] Do developers use git? --- Wireframe/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index b77f17982..b4f329ebb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -44,7 +44,6 @@

Why Do Developers Use Git?

/>

What is a Branch in Git?

- From d83465422665f41cf229c744ecd51790f8414eef Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 22:26:21 +0100 Subject: [PATCH 5/9] what is a branch in git? --- Wireframe/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index b4f329ebb..f1579acba 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -44,6 +44,8 @@

Why Do Developers Use Git?

/>

What is a Branch in Git?

+

Branches let you test out ideas or features in a safe space. You can mess around, experiment, or fix bugs without touching your main code. When it’s ready, you just merge it back in. If it’s not, toss it. It’s like having a sandbox for code — no pressure, no mess.

+ Read more From 7605c44ec7516b8482bcb00269cdbebc66a56235 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 12 May 2026 21:20:12 +0100 Subject: [PATCH 6/9] completed html form with name email, size and colour --- Form-Controls/index.html | 55 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..d7c5ca9cb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,15 +13,60 @@

Product Pick

- - + + + + + + + + + + + + + + +
+ Choose your t-shirt colour: +
+
+ +
+ + + + + + + +
-

By HOMEWORK SOLUTION

+

By R.M.B

From c05e4fff5dcb420f9298ba3d13e091c10766494e Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 12 May 2026 22:04:55 +0100 Subject: [PATCH 7/9] add p tags around radio buttom labels to meet 24px touch target spacing requirement for fingers, improves accessibility --- Form-Controls/index.html | 66 ++++++++++++++++++++++------------------ 1 file changed, 37 insertions(+), 29 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d7c5ca9cb..3be5b8b2c 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -17,26 +17,32 @@

Product Pick

- - +

+ + +

+ + - - +

+ + +

@@ -49,19 +55,21 @@

Product Pick

- - +

+ + - - + + +