From 473bb07c780aee41aa0ca81b7722c537505cf6e5 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 21:42:54 +0000 Subject: [PATCH 1/8] Update header with title and description --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..e0a1b7362 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,9 +8,9 @@
-

Wireframe

+

Understanding Web Development Basics

- This is the default, provided code and no changes have been made yet. + A simple webpage built from a wireframe layout.

From a40f4f7ffb14ba059da419e5b95d9edd9a69b747 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:04:05 +0000 Subject: [PATCH 2/8] Added three article sections with titles, summaries, and links --- Wireframe/index.html | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index e0a1b7362..1038e8877 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,11 +15,28 @@

Understanding Web Development Basics

- -

Title

+ Illustration for README article +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README introduces a project, explains how to use it, and helps others understand the code. +

+ Read more +
+ +
+ Illustration for wireframe article +

What is the purpose of a wireframe?

+

+ A wireframe shows the layout and structure of a webpage before design and content are added. +

+ Read more +
+ +
+ Illustration for Git branch article +

What is a branch in Git?

+

+ A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously, without affecting the main codebase.

Read more
From a4f12bddd1a69da00218f89a7613c125adb7bd78 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:13:25 +0000 Subject: [PATCH 3/8] Updated footer text to match wireframe layout --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1038e8877..8bac0f2bf 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -43,7 +43,7 @@

What is a branch in Git?

- This is the default, provided code and no changes have been made yet. + Footers usually contain contact links and other information about the site overall.

From 27f04604955da13c4c496cd845b816cc77b8ba9d Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:46:32 +0000 Subject: [PATCH 4/8] Style footer with full width, padding, and dark background to match wireframe --- Wireframe/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..b1f55ab17 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -52,6 +52,11 @@ main { footer { position: fixed; bottom: 0; + left: 0; + width: 100%; + background: #222; + color: white; + padding: var(--space); text-align: center; } /* ====== Articles Grid Layout ==== From efce69410ede19371d9dc3c1b582179266078732 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:49:59 +0000 Subject: [PATCH 5/8] Added bottom padding to body to prevent content hiding behind fixed footer --- Wireframe/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index b1f55ab17..104599472 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,12 +30,15 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 80px; /* space for fixed footer */ } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + img, svg { width: 100%; From d63e9d90009a2b230bad37ddc868f125276265e0 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:52:32 +0000 Subject: [PATCH 6/8] Center header text and add padding and border to match wireframe layout --- Wireframe/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 104599472..2232d224b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -52,6 +52,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + +header { + text-align: center; + padding: calc(var(--space) *2); + border-bottom: var(--line); +} + footer { position: fixed; bottom: 0; From 60f44c525d0a9d0cf95fbad9388c87b097a6c951 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 6 Jan 2026 22:54:16 +0000 Subject: [PATCH 7/8] Add card-style background, border, and radius to article elements --- Wireframe/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 2232d224b..64f16ddc1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -90,7 +90,9 @@ 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 { + background: white; border: var(--line); + border-radius: 4px; padding-bottom: var(--space); text-align: left; display: grid; From b50fff3465c0f7f99d85e575df1d80736531cdcb Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Wed, 7 Jan 2026 00:10:44 +0000 Subject: [PATCH 8/8] Style article links as buttons with padding, border, and hover effect --- Wireframe/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 64f16ddc1..a3038e83b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,7 +36,14 @@ body { a { padding: var(--space); border: var(--line); - max-width: fit-content; + text-decoration: none; + font-weight: bold; + display: inline-block; + margin-top: var(--space); +} + +a:hover { + background: #eee; } img,