From 85343a65b621b691c3714bf9f41b72ae1fc8115a Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 12 Feb 2026 15:43:24 +0000 Subject: [PATCH 1/6] add "an" to README file --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index e929bed32..e140b2aaf 100644 --- a/readme.md +++ b/readme.md @@ -24,7 +24,7 @@ graph LR ## 📅 Planning and managing your work -All the coursework is listed as issues on this repo. These issues are mirrored on your curriculum backlog page. +All the coursework is listed as an issues on this repo. These issues are mirrored on your curriculum backlog page. You will copy these issues to your Coursework Planner, which is one repo that will hold all your coursework and assignments for the entire course. From 55de4e4fe04641eb34ef19df2405d574119d2344 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 12 Feb 2026 17:48:15 +0000 Subject: [PATCH 2/6] add "first" in the README file --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index e140b2aaf..4cf4ddf19 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ ## 🔑 Do the prep -Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep. +Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep first. Your workflow should always be: @@ -24,7 +24,7 @@ graph LR ## 📅 Planning and managing your work -All the coursework is listed as an issues on this repo. These issues are mirrored on your curriculum backlog page. +All the coursework is listed as issues on this repo. These issues are mirrored on your curriculum backlog page. You will copy these issues to your Coursework Planner, which is one repo that will hold all your coursework and assignments for the entire course. From 3f7b510d38f58982bd5e1dc07a7350470fa5e3b8 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 12 Feb 2026 18:37:06 +0000 Subject: [PATCH 3/6] creating the page based on the wireframe --- Wireframe/index.html | 52 ++++++++++++++++++++++++++++++++++---------- Wireframe/style.css | 14 ++++++++++++ 2 files changed, 55 insertions(+), 11 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..5bd5c4a9c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,24 +10,54 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + Wireframe is low-fidelity, Visual Blueprint of a webpage or app interface.

+
+
- -

Title

-

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

- Read more + README image +

README file

+ +
The purpose of README file is to give information about the project and how to use it + +

A README file is the "front door" of your project. it is typically a text file (usuallyREADME.md using Markdown) located in the root directory of your code

+
+ Read more
+ + +
+ +

Purpose of Wireframe

+
+ + It establish the basic Structure of a page. + +

Wireframing is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.

+
+ Read more +
+ + +
+ +

Branch in Git

+
+ + In Git, branch a pointer to a snapshot of your changes. + + +

Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").

+
+ Read more +
+
+
-

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

+

Author: Dagim Daniel : dagimdan19@gmail.com

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..b8541b3bb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,6 +36,14 @@ a { border: var(--line); max-width: fit-content; } +footer a +{ + padding: var(--space); + border: none; + text-align: center; + max-width: fit-content; + +} img, svg { width: 100%; @@ -45,6 +53,10 @@ svg { Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + text-align: center; + padding: var(--space); +} main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; @@ -53,6 +65,8 @@ footer { position: fixed; bottom: 0; text-align: center; + background-color: blanchedalmond; + width:100%; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 1831ddc7591fcd7b4016fbb6974258d58da4a336 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 12 Feb 2026 23:13:04 +0000 Subject: [PATCH 4/6] Revert "add "an" to README file" This reverts commit 85343a65b621b691c3714bf9f41b72ae1fc8115a. From b1676508445de8ef927eff08105d3d2efa956e77 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Fri, 13 Feb 2026 15:56:43 +0000 Subject: [PATCH 5/6] restore to its previous one --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 4cf4ddf19..e929bed32 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ ## 🔑 Do the prep -Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep first. +Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep. Your workflow should always be: From 52df496f6fcaff776623df28049a2ddade2cc139 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Sun, 15 Feb 2026 18:37:27 +0000 Subject: [PATCH 6/6] fix some index, typo errors and delete blank spaces --- Wireframe/index.html | 21 ++++++++------------- Wireframe/style.css | 9 +++++---- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5bd5c4a9c..29348c518 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -13,20 +13,19 @@

Wireframe

Wireframe is low-fidelity, Visual Blueprint of a webpage or app interface.

- -
+
README image

README file

- -
The purpose of README file is to give information about the project and how to use it +
+ + The purpose of README file is to give information about the project and how to use it

A README file is the "front door" of your project. it is typically a text file (usuallyREADME.md using Markdown) located in the root directory of your code

Read more
-
@@ -34,12 +33,11 @@

Purpose of Wireframe

It establish the basic Structure of a page. - -

Wireframing is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.

+ +

wireframe is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.

Read more
-
@@ -47,15 +45,12 @@

Branch in Git

In Git, branch a pointer to a snapshot of your changes. - - -

Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").

+ +

Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").

Read more
-
- diff --git a/Wireframe/style.css b/Wireframe/style.css index b8541b3bb..d79405f31 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,16 +1,16 @@ /* Here are some starter styles You can edit these or replace them entirely -It's showing you a common way to organise CSS +It's showing you a common way to organize CSS And includes solutions to common problems As well as useful links to learn more */ /* ====== Design Palette ====== This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design + It sets out the colors, fonts, styles etc to be used in this design At work, a designer will give these to you based on the corporate brand, but while you are learning You can design it yourself if you like Inspect the starter design with Devtools - Click on the colour swatches to see what is happening + Click on the color swatches to see what is happening I've put some useful CSS you won't have learned yet For you to explore and play with if you are interested https://web.dev/articles/min-max-clamp @@ -47,7 +47,8 @@ footer a img, svg { width: 100%; - object-fit: cover; + aspect-ratio: 16/9; /* keeps the image from getting too tall or too wide */ + object-fit: fit; } /* ====== Site Layout ====== Setting the overall rules for page regions