From 9a07d5b74b94f99c3eb1fc944493e7304a081b5f Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 24 Jan 2026 12:47:54 +0000 Subject: [PATCH 1/5] Finalize HTML structure and link CSS for Wireframe task --- Wireframe/index.html | 31 +++++++------ Wireframe/style.css | 102 ++++++++++++++----------------------------- 2 files changed, 47 insertions(+), 86 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..c47a2518d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,32 @@ - + - Wireframe + Wireframe Project - Mahmoud Shaabo
-

Wireframe

-

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

+

My Website Logo

+
+
- -

Title

-

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

- Read more +

Main Content Area

+

This is where the main information goes.

+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bfd83b4e8 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,51 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise 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 - 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 - 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 - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ +/* ====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --paper: #ffffff; /* خلفية بيضاء */ + --ink: #000000; /* نص أسود */ --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 1px solid #000000; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +/* ====== Base Elements ====== */ body { background: var(--paper); color: var(--ink); font: var(--font); + margin: 0; + padding: 20px; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +header { + border-bottom: var(--line); + padding-bottom: 20px; + margin-bottom: 20px; } -img, -svg { - width: 100%; - object-fit: cover; + +ul { + display: flex; + list-style: none; + gap: 20px; + padding: 0; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ + +/* ====== Site Layout ====== */ main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; - text-align: center; -} -/* ====== 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 -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + margin: 0 auto; } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -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 Layout ====== */ article { border: var(--line); - padding-bottom: var(--space); + padding: var(--space); text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } +} + +footer { + margin-top: 40px; + border-top: var(--line); + padding-top: 10px; + text-align: center; } From b03d5d3696bf1fe0f1882243561d2d8d69645d25 Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 24 Jan 2026 14:53:21 +0000 Subject: [PATCH 2/5] Update: Added 3 articles as per wireframe requirements --- Wireframe/index.html | 29 ++++++++++++++++++++++++-- Wireframe/style.css | 48 +++++++++++++++++++++++++++----------------- 2 files changed, 57 insertions(+), 20 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c47a2518d..1a4291dec 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,8 +20,33 @@

My Website Logo

-

Main Content Area

-

This is where the main information goes.

+ Article 1 image +

First Article Title

+

+ This is the first component of our grid. It represents a repeating + piece of the UI. +

+ Read more +
+ +
+ Article 2 image +

Second Article Title

+

+ As requested by the mentor, we have three frames here to match the + wireframe layout. +

+ Read more +
+ +
+ Article 3 image +

Third Article Title

+

+ Websites are made of repeating pieces like these articles. This is our + skeleton. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index bfd83b4e8..f534e39f5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,51 +1,63 @@ -/* ====== Design Palette ====== */ :root { - --paper: #ffffff; /* خلفية بيضاء */ - --ink: #000000; /* نص أسود */ - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid #000000; - --container: 1280px; + --paper: #ffffff; + --ink: #333333; + --font: 100%/1.5 system-ui, sans-serif; + --space: 20px; + --line: 1px solid #dddddd; + --container: 1100px; } -/* ====== Base Elements ====== */ body { - background: var(--paper); + background-color: var(--paper); color: var(--ink); font: var(--font); margin: 0; - padding: 20px; + padding: var(--space); } header { border-bottom: var(--line); - padding-bottom: 20px; - margin-bottom: 20px; + padding-bottom: var(--space); + margin-bottom: 40px; + text-align: center; } ul { display: flex; + justify-content: center; list-style: none; - gap: 20px; + gap: 30px; padding: 0; } -/* ====== Site Layout ====== */ +/* تنسيق الشبكة للمقالات الثلاث */ main { max-width: var(--container); margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); /* هنا ننشئ 3 أعمدة متساوية */ + gap: var(--space); } -/* ====== Article Layout ====== */ article { border: var(--line); padding: var(--space); - text-align: left; + border-radius: 8px; + display: flex; + flex-direction: column; +} + +article img { + width: 100%; + height: 150px; + background-color: #eee; + margin-bottom: 15px; } footer { - margin-top: 40px; + margin-top: 50px; border-top: var(--line); - padding-top: 10px; + padding-top: 20px; text-align: center; + font-size: 0.9rem; } From 1154e971ee0bbaf7d8729c8ba501bc9114cd003c Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 24 Jan 2026 15:29:40 +0000 Subject: [PATCH 3/5] Refactor: Improve wireframe skeleton and CSS variables - Enhanced CSS Variables with more semantic naming and additional color/spacing options - Added responsive design with media queries for mobile devices - Improved accessibility with ARIA labels and proper navigation links - Added hover effects for better user interaction - Improved semantic HTML structure with descriptive comments - Standardized spacing and layout using CSS Variables consistently --- Wireframe/index.html | 29 ++++++++------- Wireframe/style.css | 86 +++++++++++++++++++++++++++++++++++++++----- 2 files changed, 94 insertions(+), 21 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1a4291dec..85a9a8040 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -7,49 +7,52 @@ +

My Website Logo

-
+
- Article 1 image + Placeholder image for first article

First Article Title

This is the first component of our grid. It represents a repeating - piece of the UI. + piece of the UI that follows semantic HTML structure.

- Read more + Read more
- Article 2 image + Placeholder image for second article

Second Article Title

As requested by the mentor, we have three frames here to match the - wireframe layout. + wireframe layout using CSS Grid for responsive design.

- Read more + Read more
- Article 3 image + Placeholder image for third article

Third Article Title

Websites are made of repeating pieces like these articles. This is our - skeleton. + skeleton built with CSS Variables and semantic HTML5 tags.

- Read more + Read more
+

Created by Mahmoud Shaabo - CYF Sprint 1

diff --git a/Wireframe/style.css b/Wireframe/style.css index f534e39f5..3c0573818 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,10 +1,20 @@ +/* CSS Variables for consistent styling */ :root { --paper: #ffffff; --ink: #333333; + --link-color: #0066cc; + --border-color: #dddddd; + --bg-light: #f5f5f5; --font: 100%/1.5 system-ui, sans-serif; --space: 20px; - --line: 1px solid #dddddd; + --space-large: 40px; + --line: 1px solid var(--border-color); --container: 1100px; + --radius: 8px; +} + +* { + box-sizing: border-box; } body { @@ -15,49 +25,109 @@ body { padding: var(--space); } +/* Header and Navigation */ header { border-bottom: var(--line); padding-bottom: var(--space); - margin-bottom: 40px; + margin-bottom: var(--space-large); text-align: center; } -ul { +header h1 { + margin: 0 0 var(--space) 0; +} + +nav ul { display: flex; justify-content: center; list-style: none; gap: 30px; padding: 0; + margin: 0; } -/* تنسيق الشبكة للمقالات الثلاث */ +nav li { + cursor: pointer; + transition: color 0.3s ease; +} + +nav li:hover { + color: var(--link-color); +} + +/* Main grid layout with 3 repeating components */ main { max-width: var(--container); margin: 0 auto; display: grid; - grid-template-columns: repeat(3, 1fr); /* هنا ننشئ 3 أعمدة متساوية */ + grid-template-columns: repeat(3, 1fr); gap: var(--space); } +/* Article components */ article { border: var(--line); padding: var(--space); - border-radius: 8px; + border-radius: var(--radius); display: flex; flex-direction: column; + transition: box-shadow 0.3s ease; +} + +article:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } article img { width: 100%; height: 150px; - background-color: #eee; + background-color: var(--bg-light); margin-bottom: 15px; + border-radius: var(--radius); + object-fit: cover; } +article h2 { + margin: 0 0 10px 0; + font-size: 1.25rem; +} + +article p { + margin: 0 0 15px 0; + flex-grow: 1; +} + +article a { + color: var(--link-color); + text-decoration: none; + font-weight: 500; + align-self: flex-start; +} + +article a:hover { + text-decoration: underline; +} + +/* Footer */ footer { margin-top: 50px; border-top: var(--line); - padding-top: 20px; + padding-top: var(--space); text-align: center; font-size: 0.9rem; } + +/* Responsive design for smaller screens */ +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + } + + body { + padding: 15px; + } + + nav ul { + gap: 15px; + } +} From 3e74d45ac9aea8b22141c89887833dc2f6be1c3c Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 24 Jan 2026 16:15:12 +0000 Subject: [PATCH 4/5] Finalize CSS styles for wireframe --- Wireframe/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 3c0573818..e17fceb0f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -83,6 +83,7 @@ article img { height: 150px; background-color: var(--bg-light); margin-bottom: 15px; + border-radius: var(--radius); object-fit: cover; } @@ -122,11 +123,11 @@ footer { main { grid-template-columns: 1fr; } - + body { padding: 15px; } - + nav ul { gap: 15px; } From 2319955f2cc60a783fe8dce45aa2aadac64d3041 Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 31 Jan 2026 11:25:19 +0000 Subject: [PATCH 5/5] Fix: match wireframe layout, update content, and fix footer --- Wireframe/index.html | 56 +++++++++++++++++--------- Wireframe/style.css | 96 ++++++++++++++++++++++++++++++++++---------- 2 files changed, 110 insertions(+), 42 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 85a9a8040..d3154b3ee 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -6,10 +6,13 @@ Wireframe Project - Mahmoud Shaabo +

My Website Logo

+ +
- +
-
- Placeholder image for first article -

First Article Title

+ +
+ Placeholder image for README article +

What is the purpose of a README file?

- This is the first component of our grid. It represents a repeating - piece of the UI that follows semantic HTML structure. + A README file explains what a project is, how to install it, how to + run it, and how to use it. It often includes setup steps, commands, + and helpful links so other people (and future you) can understand the + project quickly.

- Read more + Read more
-
- Placeholder image for second article -

Second Article Title

+ +
+ Placeholder image for wireframe article +

What is the purpose of a wireframe?

- As requested by the mentor, we have three frames here to match the - wireframe layout using CSS Grid for responsive design. + A wireframe is a simple layout plan for a webpage. It shows where + content goes (header, sections, cards, buttons) before writing the + final HTML and CSS. It helps you focus on structure, spacing, and + hierarchy early.

- Read more + Read more
-
- Placeholder image for third article -

Third Article Title

+
+ Placeholder image for Git branch article +

What is a branch in Git?

- Websites are made of repeating pieces like these articles. This is our - skeleton built with CSS Variables and semantic HTML5 tags. + A Git branch is a separate line of development. You create a branch to + work on a feature or fix without changing the main branch. When your + work is ready, you can merge your branch back into main.

- Read more + Read more
- + diff --git a/Wireframe/style.css b/Wireframe/style.css index e17fceb0f..0459925eb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,4 +1,6 @@ -/* CSS Variables for consistent styling */ +/* ========================= + CSS Variables (Design Tokens) + ========================= */ :root { --paper: #ffffff; --ink: #333333; @@ -6,11 +8,15 @@ --border-color: #dddddd; --bg-light: #f5f5f5; --font: 100%/1.5 system-ui, sans-serif; + --space: 20px; --space-large: 40px; --line: 1px solid var(--border-color); --container: 1100px; --radius: 8px; + + /* Footer height used to avoid content being hidden behind fixed footer */ + --footer-height: 64px; } * { @@ -22,10 +28,17 @@ body { color: var(--ink); font: var(--font); margin: 0; + + /* Normal page padding */ padding: var(--space); + + /* Important: add extra space so the fixed footer does not cover content */ + padding-bottom: calc(var(--space) + var(--footer-height)); } -/* Header and Navigation */ +/* ========================= + Header and Navigation + ========================= */ header { border-bottom: var(--line); padding-bottom: var(--space); @@ -37,6 +50,7 @@ header h1 { margin: 0 0 var(--space) 0; } +/* Navigation list is horizontal */ nav ul { display: flex; justify-content: center; @@ -46,36 +60,51 @@ nav ul { margin: 0; } -nav li { - cursor: pointer; - transition: color 0.3s ease; +/* Better to style the link itself (a), not the li */ +nav a { + color: var(--ink); + text-decoration: none; } -nav li:hover { +nav a:hover, +nav a:focus { color: var(--link-color); + text-decoration: underline; } -/* Main grid layout with 3 repeating components */ +/* ========================= + Main Layout (Wireframe) + Requirement: + - One big box on top (full width) + - Two smaller boxes below side by side + ========================= */ main { max-width: var(--container); margin: 0 auto; + display: grid; - grid-template-columns: repeat(3, 1fr); + + /* Two columns so we can have 1 big row + 2 cards below */ + grid-template-columns: 1fr 1fr; + gap: var(--space); } -/* Article components */ +/* The featured card spans across both columns (full width) */ +.card--featured { + grid-column: 1 / -1; /* from first column to last column */ +} + +/* ========================= + Card / Article Components + ========================= */ article { border: var(--line); padding: var(--space); border-radius: var(--radius); + display: flex; flex-direction: column; - transition: box-shadow 0.3s ease; -} - -article:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } article img { @@ -83,7 +112,6 @@ article img { height: 150px; background-color: var(--bg-light); margin-bottom: 15px; - border-radius: var(--radius); object-fit: cover; } @@ -95,37 +123,61 @@ article h2 { article p { margin: 0 0 15px 0; - flex-grow: 1; + flex-grow: 1; /* pushes the link down */ } article a { color: var(--link-color); text-decoration: none; - font-weight: 500; + font-weight: 600; align-self: flex-start; } -article a:hover { +article a:hover, +article a:focus { text-decoration: underline; } -/* Footer */ +/* ========================= + Footer (Fixed to bottom of viewport) + ========================= */ footer { - margin-top: 50px; + position: fixed; + left: 0; + right: 0; + bottom: 0; + + height: var(--footer-height); + display: flex; + align-items: center; + justify-content: center; + + background: var(--paper); border-top: var(--line); - padding-top: var(--space); text-align: center; font-size: 0.9rem; + + /* Ensure it appears above content */ + z-index: 10; } -/* Responsive design for smaller screens */ +/* ========================= + Responsive: stack cards on small screens + ========================= */ @media (max-width: 768px) { main { + /* On mobile: one column */ grid-template-columns: 1fr; } + /* Featured card naturally becomes full width in one column */ + .card--featured { + grid-column: auto; + } + body { padding: 15px; + padding-bottom: calc(15px + var(--footer-height)); } nav ul {