From 376bd6b7c670909b1764e87133e016e7a84f6bbd Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 14:01:29 +0100
Subject: [PATCH 01/11] Create three articles, each including an image, title,
summary, and a link
---
Wireframe/index.html | 65 +++++++++++++++++++++++++++++++++++++-------
1 file changed, 55 insertions(+), 10 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..c05a1ded5 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,4 +1,4 @@
-
+
@@ -8,20 +8,65 @@
- Wireframe
-
- This is the default, provided code and no changes have been made yet.
-
+ Understanding Project Structure
+ A simple guide to README files, wireframes, and Git branches.
+
-
- Title
+
+ What is the purpose of a README file?
+
+ A README file is the foundational documentation for a software,
+ dataset, or coding project. It serves as a project's "front door,"
+ designed to help users quickly understand what the project does, how
+ to install and use it, and how to contribute.
+
+ Read more
+
+
+
+
+
+ What is the purpose of a wireframe?
+
+ The purpose of a wireframe is to act as a blueprint for a website or
+ app. It provides a basic, stripped-down visual guide that outlines
+ layout, structure, and functionality before any colors, images, or
+ code are applied, ensuring everyone aligns on the project's
+ foundation.
+
+ Read more
+
+
+
+
+
+ What is a branch in Git?
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+ A branch in Git is simply a lightweight movable pointer to one of
+ these commits. The default branch name in Git is master . As you start
+ making commits, you're given a master branch that points to the last
+ commit you made. Every time you commit, the master branch pointer
+ moves forward automatically. Note.
- Read more
+ Read more
From a97cfca669302e4c186dfa0f9f6e4c268e4ab494 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 14:12:23 +0100
Subject: [PATCH 02/11] rewrite a footer
---
Wireframe/index.html | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index c05a1ded5..37186295a 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -70,9 +70,7 @@ What is a branch in Git?
-
- This is the default, provided code and no changes have been made yet.
-
+ Created by Niangh Ciang, 2026.
From 8352130f80eee0ea2081c4beeceb554d70b14c42 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 14:36:43 +0100
Subject: [PATCH 03/11] Edit text
---
Wireframe/index.html | 2 +-
Wireframe/style.css | 31 +++++++++++++------------------
2 files changed, 14 insertions(+), 19 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 37186295a..e80f503a9 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -62,7 +62,7 @@ What is a branch in Git?
these commits. The default branch name in Git is master . As you start
making commits, you're given a master branch that points to the last
commit you made. Every time you commit, the master branch pointer
- moves forward automatically. Note.
+ moves forward automatically.
Read more
Date: Sat, 23 May 2026 14:39:52 +0100
Subject: [PATCH 04/11] Change the hover color
---
Wireframe/style.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index b4dfece9c..7c212e0da 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -20,7 +20,7 @@ a {
}
a:hover {
border-color: var(--ink);
- background: blue;
+ background: rgb(155, 155, 238);
color: whitesmoke;
}
From 0669f8ba6c830d0621f0f07581bf0b49ed104b18 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 14:57:50 +0100
Subject: [PATCH 05/11] clear the unnecessary text in style.css
---
Wireframe/style.css | 22 ++++------------------
1 file changed, 4 insertions(+), 18 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 7c212e0da..5b50ef423 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -6,8 +6,7 @@
--line: 1px solid;
--container: 1280px;
}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+
body {
background: var(--paper);
color: var(--ink);
@@ -29,10 +28,7 @@ svg {
width: 100%;
object-fit: cover;
}
-/* ====== 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;
@@ -44,13 +40,7 @@ footer {
width: 100%;
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/
-*/
+
header {
text-align: center;
margin-bottom: var(--space);
@@ -64,11 +54,7 @@ main {
grid-column: span 2;
}
}
-/* ====== 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.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
+
article {
border: var(--line);
padding-bottom: var(--space);
From da5752f4801ee023d6c5b3fca172f05194c399f4 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 15:08:12 +0100
Subject: [PATCH 06/11] Add border-radius for button
---
Wireframe/style.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 5b50ef423..74517171f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -16,6 +16,7 @@ a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
+ border-radius: 10px;
}
a:hover {
border-color: var(--ink);
From b73b227e24ba90891268bd31578e1ecf33a68e13 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 15:14:21 +0100
Subject: [PATCH 07/11] Add underline styling to article titles
---
Wireframe/index.html | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index e80f503a9..de4be26d7 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -18,7 +18,9 @@ Understanding Project Structure
src="https://docs.github.com/assets/cb-55933/images/help/repository/readme-links.png"
alt="readme file example"
/>
- What is the purpose of a README file?
+
+ What is the purpose of a README file ?
+
A README file is the foundational documentation for a software,
dataset, or coding project. It serves as a project's "front door,"
@@ -37,7 +39,9 @@
What is the purpose of a README file?
src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png"
alt="Wireframe sketch"
/>
- What is the purpose of a wireframe?
+
+ What is the purpose of a wireframe ?
+
The purpose of a wireframe is to act as a blueprint for a website or
app. It provides a basic, stripped-down visual guide that outlines
@@ -56,7 +60,7 @@
What is the purpose of a wireframe?
src="https://miro.medium.com/1*K9scAx1Ezd-KJFabaYseCw.jpeg"
alt="Branch diagram"
/>
- What is a branch in Git?
+ What is a branch in Git?
A branch in Git is simply a lightweight movable pointer to one of
these commits. The default branch name in Git is master . As you start
From f5550f28781b7c1154eb97d08499f65041e218a4 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Sat, 23 May 2026 15:15:55 +0100
Subject: [PATCH 08/11] Add CSS underline class for article headings
---
Wireframe/style.css | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 74517171f..fbadec3db 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -69,3 +69,7 @@ article {
grid-column: span 3;
}
}
+
+.underline {
+ text-decoration: underline;
+}
From db560dd996cfe82dc0c1151edfa2ec9db5e46348 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Fri, 29 May 2026 15:48:14 +0100
Subject: [PATCH 09/11] Fix footer overlapping
---
Wireframe/style.css | 3 +++
1 file changed, 3 insertions(+)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index fbadec3db..ce7556bc4 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -40,6 +40,9 @@ footer {
bottom: 0;
width: 100%;
text-align: center;
+ background: white;
+ border-top: var(--line);
+ padding: var(--space);
}
header {
From 31b13b99f91639e9da91b205eaa2526b13287f88 Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Fri, 29 May 2026 16:34:09 +0100
Subject: [PATCH 10/11] Fix image alignment to match wireframe layout
---
Wireframe/style.css | 17 +++++++++--------
1 file changed, 9 insertions(+), 8 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index ce7556bc4..21d7757db 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,13 @@ svg {
object-fit: cover;
}
+article img {
+ height: 220px;
+ object-fit: contain;
+ background: white;
+ display: block;
+ margin: 0 auto;
+}
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
@@ -61,16 +68,10 @@ main {
article {
border: var(--line);
- padding-bottom: var(--space);
+ padding: var(--space);
text-align: left;
display: grid;
- grid-template-columns: var(--space) 1fr var(--space);
- > * {
- grid-column: 2/3;
- }
- > img {
- grid-column: span 3;
- }
+ grid-template-columns: 1fr;
}
.underline {
From abd5300d3b9266a77a4ccd9225fbfef76c8a1aca Mon Sep 17 00:00:00 2001
From: Niangh Ciang
Date: Fri, 29 May 2026 16:38:42 +0100
Subject: [PATCH 11/11] Added more bottom padding
---
Wireframe/style.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 21d7757db..f1e42656d 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -40,7 +40,7 @@ article img {
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
- padding-bottom: 80px;
+ padding-bottom: 140px;
}
footer {
position: fixed;