From 4206a321017b0b901b57b9757d61d610edf24cbd Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 3 Jun 2026 21:16:35 +0100 Subject: [PATCH 01/11] Added wireframe title --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..590ae9aba 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,7 +3,7 @@ - Wireframe + Understanding README, Wireframe and Git Branche From f2277c0b1057f311f203dfa7666eca1f18d183fd Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 3 Jun 2026 21:39:09 +0100 Subject: [PATCH 02/11] Added page title and description --- Wireframe/index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 590ae9aba..aa581368f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,15 +3,14 @@ - Understanding README, Wireframe and Git Branche + Understanding README, Wireframe and Git Branch
-

Wireframe

+

Understanding README Files, Wireframes and Git Branches

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

+ A simple guide explaining three important web development concepts.

From 02587f9876bcec39440893ce4f9b617dd2a8feff Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 3 Jun 2026 22:33:15 +0100 Subject: [PATCH 03/11] Added full-width README article with image, title, summary and link --- Wireframe/index.html | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index aa581368f..d71abd321 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -13,15 +13,19 @@

Understanding README Files, Wireframes and Git Branches

A simple guide explaining three important web development concepts.

-
- -

Title

+ +
+ Illustration of a README file +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code.

- Read more + Read more
+ + + +

From b7aec1c28d664a089d5da5164334eaa77d4c6094 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 3 Jun 2026 23:19:03 +0100 Subject: [PATCH 04/11] Added two bottom articles with images and summaries --- Wireframe/index.html | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d71abd321..1fddfb1f7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -23,14 +23,37 @@

What is the purpose of a README file?

Read more
- + +
+ + + Example of a webpage wireframe +

What is the purpose of a wireframe?

+

+ A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding. +

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

What is a branch in Git?

+

+ A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in. +

+ Read more +
+ +

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

+
From f7c71a9497a374d5bbe0104d2659378f1dc85a26 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Thu, 4 Jun 2026 00:26:55 +0100 Subject: [PATCH 05/11] Added css to place bottom articles side by side --- Wireframe/index.html | 4 ++-- Wireframe/style.css | 9 +++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1fddfb1f7..8b6a7995d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -27,7 +27,7 @@

What is the purpose of a README file?

- +
Example of a webpage wireframe

What is the purpose of a wireframe?

@@ -51,7 +51,7 @@

What is a branch in Git?

- + Footers usually contain contact links and other information about the site overall

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bd6fa5304 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,3 +87,12 @@ article { grid-column: span 3; } } + +.bottom-articles { + grid-column: span 2; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); +} + + From faf93fe9163ccce821f44de72ab3fbe41d1f36b2 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Thu, 4 Jun 2026 01:06:37 +0100 Subject: [PATCH 06/11] Added images from the placeholder.svg folder --- Wireframe/index.html | 6 +++--- Wireframe/style.css | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8b6a7995d..aabc4f6ac 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,7 +15,7 @@

Understanding README Files, Wireframes and Git Branches

- Illustration of a README file + Illustration of a README file

What is the purpose of a README file?

A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code. @@ -28,7 +28,7 @@

What is the purpose of a README file?

- Example of a webpage wireframe + Example of a webpage wireframe

What is the purpose of a wireframe?

A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding. @@ -38,7 +38,7 @@

What is the purpose of a wireframe?

- Diagram showing Git branches + Diagram showing Git branches

What is a branch in Git?

A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in. diff --git a/Wireframe/style.css b/Wireframe/style.css index bd6fa5304..79a484ce7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -95,4 +95,18 @@ article { gap: var(--space); } +header{ + text-align: center; +} + +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + text-align: center; +} + + + From 731dc7489e183c3926047a228eb1175999db0be2 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Fri, 5 Jun 2026 22:15:54 +0100 Subject: [PATCH 07/11] URL Not Found (404) error fixed --- Wireframe/index.html | 62 +++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 27 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index aabc4f6ac..458e2284e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -9,8 +9,7 @@

Understanding README Files, Wireframes and Git Branches

-

- A simple guide explaining three important web development concepts.

+

A simple guide explaining three important web development concepts.

@@ -18,42 +17,51 @@

Understanding README Files, Wireframes and Git Branches

Illustration of a README file

What is the purpose of a README file?

- A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code. + A README file explains what a project is about, how to use it, and any + important information someone needs before working with the project + code.

Read more
-
- -
- Example of a webpage wireframe -

What is the purpose of a wireframe?

-

- A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding. -

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

What is a branch in Git?

-

- A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in. -

- Read more -
+
+
+ Example of a webpage wireframe +

What is the purpose of a wireframe?

+

+ A wireframe is a simple layout plan that shows where content will go + on a webpage before you start designing or coding. +

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

What is a branch in Git?

+

+ A Git baranch lets developers work on new features without affecting + the main project. When finished, the branch can be merged back in. +

+ Read more +
+

- Footers usually contain contact links and other information about the site overall + Footers usually contain contact links and other information about the + site overall

-
From 51cfd0101f540da45a0756798cd4902892bdd6d8 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Fri, 5 Jun 2026 22:19:24 +0100 Subject: [PATCH 08/11] Empty lines in css deleted --- Wireframe/style.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 79a484ce7..150607d46 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -105,8 +105,4 @@ footer { left: 0; width: 100%; text-align: center; -} - - - - +} \ No newline at end of file From 30e35da16aa3f2d36d875a747063f7e0eec9bbac Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 10 Jun 2026 00:40:44 +0100 Subject: [PATCH 09/11] Add flexbox layout to body to fix footer overlap issue --- Wireframe/style.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 150607d46..0d5bdefdd 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,6 +30,10 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + + min-height: 100vh; + display: flex; + flex-direction: column; } a { padding: var(--space); @@ -95,7 +99,7 @@ article { gap: var(--space); } -header{ +header { text-align: center; } @@ -105,4 +109,4 @@ footer { left: 0; width: 100%; text-align: center; -} \ No newline at end of file +} From 8016fcab781030c397871b3c5006b8e98e4babf3 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 10 Jun 2026 00:46:55 +0100 Subject: [PATCH 10/11] Replace fixed footer with flexbox sticky footer (margin-top: auto) --- Wireframe/style.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 0d5bdefdd..1ca0c443d 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -53,11 +53,7 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } -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 @@ -104,9 +100,7 @@ header { } footer { - position: fixed; - bottom: 0; - left: 0; - width: 100%; + margin-top: auto; text-align: center; + padding: var(--space); } From d6246a32c9c28c298ba75800f44a898d434a08a7 Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 10 Jun 2026 17:41:09 +0100 Subject: [PATCH 11/11] Add image for README, wireframe, and git branch --- Wireframe/index.html | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 458e2284e..54a8cf9c7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,10 @@

Understanding README Files, Wireframes and Git Branches

- Illustration of a README file + Illustration of a README file

What is the purpose of a README file?

A README file explains what a project is about, how to use it, and any @@ -28,7 +31,10 @@

What is the purpose of a README file?

- Example of a webpage wireframe + Example of a webpage wireframe

What is the purpose of a wireframe?

A wireframe is a simple layout plan that shows where content will go @@ -43,7 +49,10 @@

What is the purpose of a wireframe?

- Diagram showing Git branches + Diagram showing Git branches

What is a branch in Git?

A Git baranch lets developers work on new features without affecting