From 39facbb5e45e08577f6397b4e65f972b580c5cf1 Mon Sep 17 00:00:00 2001 From: Taha-Elmahmoudi <> Date: Mon, 9 Feb 2026 20:21:56 +0000 Subject: [PATCH 01/11] Added README article with title, description, image, and link --- Wireframe/index.html | 33 ++++++++++++++++++++++++++++----- Wireframe/readme.png | Bin 0 -> 704297 bytes 2 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 Wireframe/readme.png diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..753a08c69 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,15 +14,38 @@

Wireframe

+
- -

Title

+ Illustration of a README.md file showing sections such as welcome, installation, and usage +

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, how to set it up, and how to use it, + so others can quickly understand and run the project +

+ Read more +
+ +
+ +

What is the purpose of a wireframe?

+

+ +

+ Read more +
+ +
+ +

What is a branch in Git?

+

+

Read more -
+ + + + +
From 140eb532531f4de77b447218e71e07816589027a Mon Sep 17 00:00:00 2001 From: Taha-Elmahmoudi <> Date: Mon, 9 Feb 2026 21:42:12 +0000 Subject: [PATCH 07/11] Made footer fixed at the bottom of the page with css --- Wireframe/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 18c8f5e10..5c9fab65b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -69,9 +69,16 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { + footer position: fixed; bottom: 0; + left: 0; + width: 100%; + padding: 1rem; text-align: center; + background: white; + border-top: 1px solid #ddd; + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From a6846fff8a7e5aa682ca98cab770707c32219319 Mon Sep 17 00:00:00 2001 From: Taha-Elmahmoudi <> Date: Tue, 10 Feb 2026 13:42:43 +0000 Subject: [PATCH 08/11] ticked off objectives and acceptance criteria on the readme.md page --- Wireframe/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index f7b59df8c..77f9f3399 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] 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 +- [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 ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including an image, title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including an image, title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. ## Resources From 1c773dcbd7bbde9ae4b3df507fa52ece86a90fa4 Mon Sep 17 00:00:00 2001 From: Taha-Elmahmoudi <> Date: Tue, 10 Feb 2026 13:59:05 +0000 Subject: [PATCH 09/11] Fix footer CSS issue --- Wireframe/style.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 5c9fab65b..b7d21d246 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -69,7 +69,6 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - footer position: fixed; bottom: 0; left: 0; @@ -78,7 +77,6 @@ footer { text-align: center; background: white; border-top: 1px solid #ddd; - } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 0d617dc497ae29026e2505d81f12c78ef985d705 Mon Sep 17 00:00:00 2001 From: Taha-Elmahmoudi <> Date: Tue, 10 Feb 2026 15:35:53 +0000 Subject: [PATCH 10/11] Align footer and header to center and reduce padding --- Wireframe/index.html | 4 +++- Wireframe/style.css | 9 +++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 3fd2af357..f9fd4aa5f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -47,7 +47,9 @@

What is a branch in Git?

- +
+

© 2026 My Website

+