From 014d2908d1a8a870628263353ca13e433ecd14c7 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Thu, 22 May 2025 14:37:21 +0100
Subject: [PATCH 01/24] Add page title and description to header
---
Wireframe/index.html | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..4c5fa00f6 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,11 +8,10 @@
- Wireframe
-
- This is the default, provided code and no changes have been made yet.
-
+ Project Essentials Explained
+ Discover the roles of README files, wireframes, and Git branches in software development.
+
From 8f34547a39162ad0025851533ec798a5d8584e26 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Thu, 22 May 2025 16:32:08 +0100
Subject: [PATCH 02/24] Add README article with image, title, summary, and link
---
Wireframe/index.html | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 4c5fa00f6..6ef3b5d0d 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -11,16 +11,15 @@
Project Essentials Explained
Discover the roles of README files, wireframes, and Git branches in software development.
-
+
-
- Title
+
+ What is a README file?
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+ A README file is an essential componet of many software projects, especially those hosted on platforms like GitHub.
- Read more
+ Read more
From e064199d550146e1cbcb8328ffc06c9b819e2841 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Thu, 22 May 2025 17:11:54 +0100
Subject: [PATCH 03/24] Add wireframe article with image, title, summary, and
link
---
Wireframe/index.html | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 6ef3b5d0d..078348e02 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -21,6 +21,19 @@ What is a README file?
From df7d18d39d53458b8419fde2ad7d023a05aba1f7 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Thu, 22 May 2025 18:31:41 +0100
Subject: [PATCH 04/24] Add article on Git branches with image, summary, and
link
---
Wireframe/index.html | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 078348e02..e0f9e628c 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -32,7 +32,12 @@ What is a Wireframe?
-
+
+ What is a Branch in Git?
+
+ In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase. This collaboration and parallel development, enabling multiple contributors to work simultaneously without conflicts.
+
+ Explore more
From 4178b1fc3c716cf98e87e0dd923b229f9c41be03 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Thu, 22 May 2025 19:03:13 +0100
Subject: [PATCH 05/24] Add footer section to the webpage
---
Wireframe/index.html | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index e0f9e628c..205e42cc9 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -40,9 +40,11 @@ What is a Branch in Git?
Explore more
+
+
From d67d1901eef71c255ea1d9d93fb44d743ab62332 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 00:09:22 +0100
Subject: [PATCH 06/24] style: Add body margin and padding for clean layout
---
Wireframe/index.html | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 205e42cc9..85ca56edf 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,16 +14,16 @@ Project Essentials Explained
-
+
What is a README file?
- A README file is an essential componet of many software projects, especially those hosted on platforms like GitHub.
+ A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
Read more
-
+
What is a Wireframe?
A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements like colors or images. It helps teams plan the user interface and user experience effectively before development begins.
@@ -32,7 +32,8 @@
What is a Wireframe?
-
+
What is a Branch in Git?
In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase. This collaboration and parallel development, enabling multiple contributors to work simultaneously without conflicts.
From 1746f17610fcd7b05d0eb90804e75a76eaea35e2 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 14:41:51 +0100
Subject: [PATCH 07/24] style: Tweak article image styles for better layout and
responsiveness
---
Wireframe/style.css | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..0d9ff9cc8 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
+
}
a {
padding: var(--space);
@@ -85,5 +86,11 @@ article {
}
> img {
grid-column: span 3;
+ max-height: 250px;
+ object-fit: contain;
+ border-bottom: var(--line);
+ padding-bottom: var(--space);
+ background-color: transparent;
+ display: block;
}
}
From 4415e8b1604270a36134ae531171d3de685c1fed Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 17:35:37 +0100
Subject: [PATCH 08/24] style: Add layout and border styling to header
---
Wireframe/style.css | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 0d9ff9cc8..51a3cdc92 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -32,6 +32,13 @@ body {
font: var(--font);
}
+header {
+ max-width: var(--container);
+ margin: var(--space)auto;
+ padding: var(--space);
+ text-align: centre;
+ border-bottom: var(--line);
+}
a {
padding: var(--space);
border: var(--line);
@@ -84,6 +91,7 @@ article {
> * {
grid-column: 2/3;
}
+
> img {
grid-column: span 3;
max-height: 250px;
From 801b70381264aad2f0ad72097a9c3a1d8fe613d5 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 18:16:03 +0100
Subject: [PATCH 09/24] style: Refine header typography for title and subtitle
---
Wireframe/style.css | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 51a3cdc92..95f87e095 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -39,6 +39,18 @@ header {
text-align: centre;
border-bottom: var(--line);
}
+
+header h1 {
+ margin: 0;
+ font-size: 2rem;
+ text-align: center;
+}
+
+header p {
+ font-size: 1.1rem;
+ opacity: 0.8;
+ text-align: center;
+}
a {
padding: var(--space);
border: var(--line);
From cafa8939eb8c39cb1989905b38d708c0245e8f6d Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 20:47:29 +0100
Subject: [PATCH 10/24] Add universal box-sizing rule to CSS
---
Wireframe/style.css | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 95f87e095..368045ef9 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -32,6 +32,10 @@ body {
font: var(--font);
}
+
+* {
+ box-sizing: border-box;
+}
header {
max-width: var(--container);
margin: var(--space)auto;
@@ -51,6 +55,7 @@ header p {
opacity: 0.8;
text-align: center;
}
+
a {
padding: var(--space);
border: var(--line);
From 57c098495bd9d7c87502eb1fffd00067e1c3addf Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 21:10:45 +0100
Subject: [PATCH 11/24] Style links: remove underline, inherit color, add
smooth transition
---
Wireframe/style.css | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 368045ef9..361315b0a 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -36,6 +36,7 @@ body {
* {
box-sizing: border-box;
}
+
header {
max-width: var(--container);
margin: var(--space)auto;
@@ -60,7 +61,11 @@ a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
+ text-decoration: none;
+ color: inherit;
+ transition: all 0.3s ease;
}
+
img,
svg {
width: 100%;
From 481dd13f08c9d19cd42f51a44634042c0e08a444 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 21:50:55 +0100
Subject: [PATCH 12/24] Add two-column grid layout with spacing
---
Wireframe/style.css | 14 +++++++++++---
1 file changed, 11 insertions(+), 3 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 361315b0a..777afd1dd 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -26,6 +26,11 @@ As well as useful links to learn more */
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
+
+* {
+ box-sizing: border-box;
+}
+
body {
background: var(--paper);
color: var(--ink);
@@ -33,9 +38,7 @@ body {
}
-* {
- box-sizing: border-box;
-}
+
header {
max-width: var(--container);
@@ -66,6 +69,11 @@ a {
transition: all 0.3s ease;
}
+a:hover {
+ background-color: color-mix(in oklab, var(--paper)90%, white);
+ transform: scale(1.02);
+}
+
img,
svg {
width: 100%;
From ced0c2f78b8ce374ff203b4d96c63b46227242b6 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sat, 24 May 2025 22:24:26 +0100
Subject: [PATCH 13/24] Add customer class to README image for layout fix
---
Wireframe/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 85ca56edf..c2f8b1953 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,7 +14,7 @@ Project Essentials Explained
-
+
What is a README file?
A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
From fe0b86d50512ebbf4d830dba5ebdae79b7599ea5 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 13:27:16 +0100
Subject: [PATCH 14/24] Update styles after reverting to placeholder image
---
Wireframe/style.css | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 777afd1dd..26fde9652 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -86,11 +86,15 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--space);
}
footer {
position: fixed;
bottom: 0;
text-align: center;
+ width: 100%;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
@@ -131,4 +135,11 @@ article {
background-color: transparent;
display: block;
}
+
+ .readme-img {
+ width: 100%;
+ height: 200px;
+ object-fit: contain;
+ padding: var(--space);
+ }
}
From 67d72c93450bcadba521e6b8dd8e24b0c9312fd1 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 13:37:24 +0100
Subject: [PATCH 15/24] Remove README image
---
Wireframe/index.html | 7 +++----
Wireframe/style.css | 7 -------
2 files changed, 3 insertions(+), 11 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index c2f8b1953..4ee9e0ef5 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,7 +14,7 @@ Project Essentials Explained
-
+
What is a README file?
A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
@@ -23,7 +23,7 @@
What is a README file?
-
+
What is a Wireframe?
A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements like colors or images. It helps teams plan the user interface and user experience effectively before development begins.
@@ -32,8 +32,7 @@
What is a Wireframe?
-
+
What is a Branch in Git?
In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase. This collaboration and parallel development, enabling multiple contributors to work simultaneously without conflicts.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 26fde9652..9fc97c039 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -135,11 +135,4 @@ article {
background-color: transparent;
display: block;
}
-
- .readme-img {
- width: 100%;
- height: 200px;
- object-fit: contain;
- padding: var(--space);
- }
}
From 8746c7d65b224a9243446b7c40f7f2dcbcb20368 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 15:38:58 +0100
Subject: [PATCH 16/24] Revert article image styling to original
---
Wireframe/style.css | 2 ++
1 file changed, 2 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 9fc97c039..5bac412af 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -135,4 +135,6 @@ article {
background-color: transparent;
display: block;
}
+
+
}
From 3b239c7bde01dd12fd9e1099468ab01a0824a163 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 18:00:54 +0100
Subject: [PATCH 17/24] Add top border to footer
---
Wireframe/style.css | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 5bac412af..6d7e4ca4e 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -94,6 +94,7 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
+ border-top: 1px soild black;
width: 100%;
}
/* ====== Articles Grid Layout ====
@@ -128,12 +129,7 @@ article {
> img {
grid-column: span 3;
- max-height: 250px;
- object-fit: contain;
- border-bottom: var(--line);
- padding-bottom: var(--space);
- background-color: transparent;
- display: block;
+
}
From a58ebc42e0587b6fbc7a2b81d1bb2aca425ca5d1 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 18:13:40 +0100
Subject: [PATCH 18/24] Remove global box-sizing rule
---
Wireframe/style.css | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 6d7e4ca4e..3584a0c98 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -27,9 +27,7 @@ As well as useful links to learn more */
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
-* {
- box-sizing: border-box;
-}
+
body {
background: var(--paper);
From d418f7f5d86f403fdcf1063e7ff6f26dba0da016 Mon Sep 17 00:00:00 2001
From: zadri abdule
Date: Sun, 25 May 2025 19:05:48 +0100
Subject: [PATCH 19/24] Update footer text to 'Project Essentials. All rights
reserved'
---
Wireframe/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 4ee9e0ef5..bdf1d8436 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -44,7 +44,7 @@ What is a Branch in Git?