From eb5bbab627a682c2818e5189f0317ef1f1d19234 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 16:14:54 +0100 Subject: [PATCH 1/8] 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 c2359ce43e3bf2d1f607e54745c2aa410a608c53 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Thu, 5 Jun 2025 22:15:46 +0100 Subject: [PATCH 2/8] 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 2f8af5755399ade6105538446afa76b2b7975941 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Sat, 16 May 2026 09:26:27 +0100 Subject: [PATCH 3/8] reopen PR From 6d2f5d887df8f5400f774923f57631b7dc1d6927 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 19 May 2026 15:15:12 +0100 Subject: [PATCH 4/8] add summary, link and image for README article --- Wireframe/index.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7e9f25fa0..7901b63af 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,13 +17,16 @@

Planning Your Codebase

Official Git logo
-

What is Git?

-

[summary goes here]

- Read more +

What is the purpose of a README file?

+

The purpose of a README file is to document a project on a repository, whether + it is a personal project or a collaborative effort. It can contain things like + what task was completed, why the project itself is useful, accessibility + information, how it was implemented, and how to run it.

+ Read more
From ba3724f89010fa9939e2aa2a721b8f53d31371d5 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 19 May 2026 15:19:20 +0100 Subject: [PATCH 5/8] add image, summary and link for wireframe. Change from why do developers need Git? --- Wireframe/index.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7901b63af..a86f80693 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -31,13 +31,15 @@

What is the purpose of a README file?

Developers collaborating with laptops
-

Why Do Developers Use Git?

-

[summary goes here]

- Read more +

What is the Purpose of a Wireframe?

+

It is like a blueprint. It outlines the structure and layout of a website or application before development begins. It lays out where things like buttons, text, and images will go. + You're mapping out the user experience and interface, which helps identify potential issues and make improvements early on. +

+ Read more
From a49bcdafb7e5cc69277448cc4ae5dda707ee1062 Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 19 May 2026 15:21:01 +0100 Subject: [PATCH 6/8] add summary and link for git branch article --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a86f80693..527e16c05 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -49,8 +49,8 @@

What is the Purpose of a Wireframe?

/>

What is a Branch in Git?

-

[summary goes here]

- Read more +

A branch in Git is a lightweight pointer to a commit. It allows developers to work on different versions of a project simultaneously without affecting the main codebase.

+ Read more
From 4ecfe29f428bfee374b3f6d3e9c64aaf60fc9c2f Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 19 May 2026 15:35:16 +0100 Subject: [PATCH 7/8] fix validation issues --- Wireframe/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 527e16c05..4dbd57946 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,10 +1,10 @@ - - + + Planning Your Codebase - + @@ -14,13 +14,13 @@

Planning Your Codebase

-
+
Example of ReadMe file on GitHub -
+ > +

What is the purpose of a README file?

The purpose of a README file is to document a project on a repository, whether it is a personal project or a collaborative effort. It can contain things like @@ -33,8 +33,8 @@

What is the purpose of a README file?

Example of a website wireframe diagram -
+ > +

What is the Purpose of a Wireframe?

It is like a blueprint. It outlines the structure and layout of a website or application before development begins. It lays out where things like buttons, text, and images will go. You're mapping out the user experience and interface, which helps identify potential issues and make improvements early on. @@ -46,8 +46,8 @@

What is the Purpose of a Wireframe?

Visual explanation of branching in Git -
+ > +

What is a Branch in Git?

A branch in Git is a lightweight pointer to a commit. It allows developers to work on different versions of a project simultaneously without affecting the main codebase.

Read more From eedc1e24b040d61fec7e5f85e2c4f753499a5cbd Mon Sep 17 00:00:00 2001 From: Remi Marcelle Date: Tue, 19 May 2026 15:49:22 +0100 Subject: [PATCH 8/8] fix accessibility issues --- Wireframe/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index d71f952ed..0e205422f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -21,7 +21,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, #333333) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -56,7 +56,7 @@ header h1 { } header p { font-size: 1.2rem; - color: gray; + color: #595959; } /* ====== Site Layout ======