From 0a4362fda91e9acc10ef2ae5183f1fe9a2e27e68 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 04:21:11 -0400 Subject: [PATCH 01/11] add placeholder text to wireframe articles --- Wireframe/index.html | 75 ++++++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 27 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d52f26062 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,54 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

Developer essentials

+

+ A quick introduction to READMEs, wireframes, and Git branches. +

+
+
+
+ +

What is a README file?

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

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - - + Read more + + +
+ +

What is a branch in Git?

+

+ A branch in Git is ... +

+ Read more +
+ + + + + + \ No newline at end of file From ceb09d7976149cc0d831a684d5527cd447e07bae Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 17:14:36 -0400 Subject: [PATCH 02/11] update link styling, footer content and article links - remove footer positioning - update footer placeholder text - simplify footer link styling - add article links, and adjust their styling --- Wireframe/index.html | 8 ++++---- Wireframe/style.css | 14 ++++++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d52f26062..6d6b5104b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -22,7 +22,7 @@

What is a README file?

A README is ...

- Read more + Read more
@@ -31,7 +31,7 @@

What is the purpose of a wireframe?

A wireframe is ...

- Read more + Read more
@@ -40,13 +40,13 @@

What is a branch in Git?

A branch in Git is ...

- Read more + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bc1dda2a7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -19,7 +19,8 @@ As well as useful links to learn more */ :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; + /* increased font size, since it felt tiny */ + --font: 1.15rem/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; @@ -35,6 +36,8 @@ a { padding: var(--space); border: var(--line); max-width: fit-content; + padding: 4px 20px; + text-decoration: none; } img, svg { @@ -45,15 +48,22 @@ svg { Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + text-align: center; +} main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding: 0 8rem; } footer { - position: fixed; bottom: 0; text-align: center; } +footer a { + padding: 5px ; + border: none +} /* ====== 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 From 0515ff42a40c487cfa78ac3a3cf287e3529a6e98 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 17:17:36 -0400 Subject: [PATCH 03/11] add space before footer link adjust footer link padding --- Wireframe/index.html | 2 +- Wireframe/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 6d6b5104b..d4fb01240 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -46,7 +46,7 @@

What is a branch in Git?

- This page was built following a provided wireframe design:Wireframe + This page was built following a provided wireframe design: Wireframe

diff --git a/Wireframe/style.css b/Wireframe/style.css index bc1dda2a7..1cd9c8a3f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -61,7 +61,7 @@ footer { text-align: center; } footer a { - padding: 5px ; + padding: 2px ; border: none } /* ====== Articles Grid Layout ==== From aac134f355fe7035752730102000a906862aa860 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 17:20:46 -0400 Subject: [PATCH 04/11] remove dubplicate padding on a --- Wireframe/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 1cd9c8a3f..cdcad349b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -33,10 +33,9 @@ body { font: var(--font); } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; padding: 4px 20px; + border: var(--line); + max-width: fit-content; text-decoration: none; } img, From 6844c6cec595d8e70dbd407f7c6bc5dc111edb87 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 17:23:14 -0400 Subject: [PATCH 05/11] clean up footer CSS --- Wireframe/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index cdcad349b..d2c7a0f43 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -56,7 +56,6 @@ main { padding: 0 8rem; } footer { - bottom: 0; text-align: center; } footer a { From 8c86b9fe831e9ef8a478d0d94aa97ba8b7e8249e Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 17:29:20 -0400 Subject: [PATCH 06/11] add colour variable to CSS root --- Wireframe/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index d2c7a0f43..08cc2f1fb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,6 +18,7 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); + --color: white; --ink: color-mix(in oklab, var(--color) 5%, black); /* increased font size, since it felt tiny */ --font: 1.15rem/1.5 system-ui; From 33516eed4cc58f4202f194fd5f2de6fbdc97ed35 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 18:23:13 -0400 Subject: [PATCH 07/11] add and style article images --- Wireframe/index.html | 6 +++--- Wireframe/style.css | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d4fb01240..2bd1a4e06 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,7 +17,7 @@

Developer essentials

- + readme file

What is a README file?

A README is ... @@ -26,7 +26,7 @@

What is a README file?

- +

What is the purpose of a wireframe?

A wireframe is ... @@ -35,7 +35,7 @@

What is the purpose of a wireframe?

- + git branching diagram

What is a branch in Git?

A branch in Git is ... diff --git a/Wireframe/style.css b/Wireframe/style.css index 08cc2f1fb..99748a3b1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -38,11 +38,13 @@ a { border: var(--line); max-width: fit-content; text-decoration: none; + font-weight: bold; } -img, -svg { +img { width: 100%; object-fit: cover; + height: 350px; + filter: grayscale(70%) ; } /* ====== Site Layout ====== Setting the overall rules for page regions From c0c0492b9b43ca49a6947acf6dcf0911fa87ef4f Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 18:40:58 -0400 Subject: [PATCH 08/11] add short descriptions of the three concepts --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2bd1a4e06..ddbe0559d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,7 +20,7 @@

Developer essentials

readme file

What is a README file?

- A README is ... + A README is often what people look at in a project to understand what it is about. It should include a description of the project, instructions on how to use it, and any additional information that may be useful.

Read more
@@ -29,7 +29,7 @@

What is a README file?

What is the purpose of a wireframe?

- A wireframe is ... + A wireframe for a website is like a blueprint for a house. It is a visual representation of the layout of the website. It is useful for planning purposes and can save time before building, by helping us spot potential issues early.

Read more @@ -38,7 +38,7 @@

What is the purpose of a wireframe?

git branching diagram

What is a branch in Git?

- A branch in Git is ... + A branch in Git is like an alternative version of a project. When several developers work on the same project, separate branches help them avoid overriding each other's work. These branches then can be merged into the main branch through a pull request.

Read more From 7033ccf0a151ab631b1f3c8cce20bdba726fdaad Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 18:57:19 -0400 Subject: [PATCH 09/11] fix footer according to criteria - fixed position --- Wireframe/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 99748a3b1..55b9253d5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -59,10 +59,13 @@ main { padding: 0 8rem; } footer { + position: fixed; + bottom: 0; + width: 100%; text-align: center; } footer a { - padding: 2px ; + padding: 2px; border: none } /* ====== Articles Grid Layout ==== From d5fb5bf08269e1c412906a55f5b7649a54ec0144 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 19:03:39 -0400 Subject: [PATCH 10/11] readme checks each criteria --- Wireframe/README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..fbccb4936 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,12 +4,12 @@ -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including an image, title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The page layout closely match the wireframe. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. +- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The page layout closely match the wireframe. ### Developers must adhere to professional standards. @@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources From 570b39b27ac04144abd59aa9ebe4eef71141b5b5 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Tue, 26 May 2026 19:09:13 -0400 Subject: [PATCH 11/11] add wireframe alt text --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index ddbe0559d..e636a20bd 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -26,7 +26,7 @@

What is a README file?

- + wireframe sketch of website layout

What is the purpose of a wireframe?

A wireframe for a website is like a blueprint for a house. It is a visual representation of the layout of the website. It is useful for planning purposes and can save time before building, by helping us spot potential issues early.