From 4206a321017b0b901b57b9757d61d610edf24cbd Mon Sep 17 00:00:00 2001 From: ChinweP Date: Wed, 3 Jun 2026 21:16:35 +0100 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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