From a5b42b56167ba17561df45954791ee2f310d46be Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Fri, 5 Sep 2025 23:33:22 +0100 Subject: [PATCH 01/25] Added first piece of HTML code --- test.file | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 test.file diff --git a/test.file b/test.file new file mode 100644 index 000000000..2dd7ab64f --- /dev/null +++ b/test.file @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 252223ece177cc1149b60f6c0c466d416065ba95 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Fri, 5 Sep 2025 23:34:13 +0100 Subject: [PATCH 02/25] added head code to the file --- test.file | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test.file b/test.file index 2dd7ab64f..69dfa2d1e 100644 --- a/test.file +++ b/test.file @@ -1,3 +1,4 @@ - + + \ No newline at end of file From 3802adbf48bb46c392483e54cf446532c378b32f Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Fri, 5 Sep 2025 23:35:05 +0100 Subject: [PATCH 03/25] title of the page added --- test.file | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test.file b/test.file index 69dfa2d1e..3b2284949 100644 --- a/test.file +++ b/test.file @@ -1,4 +1,7 @@ + + Welcome to the new file + \ No newline at end of file From 78836444c1b183c8eec419dc9a4376248bc93bcc Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Fri, 5 Sep 2025 23:35:55 +0100 Subject: [PATCH 04/25] title of the page added to the file --- test.file | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test.file b/test.file index 3b2284949..fef131496 100644 --- a/test.file +++ b/test.file @@ -3,5 +3,8 @@ Welcome to the new file +

+ This file is a test file +

\ No newline at end of file From 34d1d4ee065ea94c1ffe14a4dd10ad3ba5d37105 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Fri, 5 Sep 2025 23:41:49 +0100 Subject: [PATCH 05/25] Changes to meet style-guide --- test.file | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test.file b/test.file index fef131496..47a7f2b4b 100644 --- a/test.file +++ b/test.file @@ -4,7 +4,7 @@ Welcome to the new file

- This file is a test file + This file is a test file

\ No newline at end of file From 414032faa90688f0e072ebe997e8914796cc5884 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 00:16:08 +0100 Subject: [PATCH 06/25] Deleted test.file --- test.file | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 test.file diff --git a/test.file b/test.file deleted file mode 100644 index 47a7f2b4b..000000000 --- a/test.file +++ /dev/null @@ -1,10 +0,0 @@ - - - - Welcome to the new file - -

- This file is a test file -

- - \ No newline at end of file From 115080881e6ebd8369e5415607847e5605201450 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 00:28:28 +0100 Subject: [PATCH 07/25] checked the checklist in README.dm --- Wireframe/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..8243b7101 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 a 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 a 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 a 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 a 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 7a24099267ff29bb9e7bdf0d362c1bb68432e95b Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 00:52:06 +0100 Subject: [PATCH 08/25] changed index.html to meet requirements --- Wireframe/index.html | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..2d27b0e9d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,44 @@
-

Wireframe

+

Page title: some coding concepts

- This is the default, provided code and no changes have been made yet. + We will discuss some coding concepts

-
- -

Title

-

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

- Read more + +
+ +

What is the purpose of a README file?

+

+ A README file explains what a project is, how to use it, and any important details (like installation, usage, or contribution instructions). It helps others understand and work with the project quickly. +

+ Read more +
+ +
+ +

What is the purpose of a wireframe? +

+

+ A README file explains what a project is, how to use it, and any important details (like installation, usage, or contribution instructions). It helps others understand and work with the project quickly. +

+ Read more
+ +
+ +

What is the purpose of a wireframe?

+

+ A wireframe is a simple visual layout of a website or app that shows structure and content placement. Its purpose is to plan design and functionality before detailed design or coding starts. +

+ Read more +

- This is the default, provided code and no changes have been made yet. + This was a summary of some web coding concepts.

From 0a65cf31382512be199680103b09892cf1455069 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 00:54:08 +0100 Subject: [PATCH 09/25] changed the SVG photo name to be able to push it with the other page files --- Wireframe/placeholders.svg | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 Wireframe/placeholders.svg diff --git a/Wireframe/placeholders.svg b/Wireframe/placeholders.svg new file mode 100644 index 000000000..ac36a0abc --- /dev/null +++ b/Wireframe/placeholders.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From 5aa8ca176e81ed5e8d943ae317b74c4667e83c33 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 00:59:39 +0100 Subject: [PATCH 10/25] small edit inside style.css to enable it to be uploaded --- Wireframe/placeholder.svg | 6 ------ Wireframe/placeholders.svg | 6 ------ Wireframe/style.css | 2 +- 3 files changed, 1 insertion(+), 13 deletions(-) delete mode 100644 Wireframe/placeholder.svg delete mode 100644 Wireframe/placeholders.svg diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/placeholders.svg b/Wireframe/placeholders.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholders.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..dad7d4954 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,7 +16,7 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ -:root { +:root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; From 21372501b99ebc6837269faa86e618d01aaa9530 Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sat, 6 Sep 2025 01:12:59 +0100 Subject: [PATCH 11/25] the SVG photo added --- Wireframe/placeholder.svg | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 Wireframe/placeholder.svg diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg new file mode 100644 index 000000000..ac36a0abc --- /dev/null +++ b/Wireframe/placeholder.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From bb280d9fc497b6bc5ca0ba6f23ff8fb8264e60cc Mon Sep 17 00:00:00 2001 From: Mohammed Abdoon Date: Sun, 7 Sep 2025 15:24:04 +0100 Subject: [PATCH 12/25] writing the requirements as comments so I can easily remember what I should do --- Form-Controls/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..c1e01b760 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,10 +13,12 @@

Product Pick

- - +