From 9a07d5b74b94f99c3eb1fc944493e7304a081b5f Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Sat, 24 Jan 2026 12:47:54 +0000 Subject: [PATCH 1/3] 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/3] 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/3] 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
+ 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; + } +}