From 8363d03453154f400eae85d8e70b8bd36cd45a9a Mon Sep 17 00:00:00 2001 From: MehrozMunir Date: Mon, 19 Jan 2026 19:47:35 +0000 Subject: [PATCH 1/3] website designed and developed using wireframe --- Wireframe/index.html | 86 +++++++++++++++++++++++++++++++------- Wireframe/placeholder.svg | 6 --- Wireframe/placeholder1.svg | 19 +++++++++ Wireframe/placeholder2.svg | 15 +++++++ Wireframe/placeholder3.svg | 24 +++++++++++ Wireframe/style.css | 28 +++++++++---- 6 files changed, 151 insertions(+), 27 deletions(-) delete mode 100644 Wireframe/placeholder.svg create mode 100644 Wireframe/placeholder1.svg create mode 100644 Wireframe/placeholder2.svg create mode 100644 Wireframe/placeholder3.svg diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..3ce9f7029 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,89 @@ - Wireframe + Sprint1 - Exercise
-

Wireframe

+

Understanding Readme files, Wireframes and Git

- This is the default, provided code and no changes have been made yet. + A quick guide to README files, Wireframes and Git branches.

-
- -

Title

+
+ README illustration + +

What is the purpose of a README file?

+ +

+ A README gives an overview of a project and explains what it does. + It helps anyone using or contributing to the project understand the basics quickly. +

+ +
+ Read more

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README usually includes installation steps, usage instructions, + dependencies, examples, and contribution guidelines. It is the first place + someone looks when trying to understand a repository. A clear README saves + time for both the project owner and future developers.

- Read more -
-
- + + + + +
+ Git branching illustration + +

What is a branch in Git?

+ +

+ A branch in Git is a separate line of development where you can work on + changes without affecting the main codebase. +

+ +
+ Read more +

+ Developers use branches to build new features, fix bugs, or experiment + safely without breaking the main project. Each branch is a copy of the + project’s history, and you are free to make changes independently. Once + the work on the branch is complete and tested, it can be merged back into + the main branch. This workflow makes collaboration easier, keeps the main + code stable, and allows multiple people to work on different features at + the same time. +

+
+
+ + + + 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/placeholder1.svg b/Wireframe/placeholder1.svg new file mode 100644 index 000000000..cfaabaff2 --- /dev/null +++ b/Wireframe/placeholder1.svg @@ -0,0 +1,19 @@ + + + + + + + + README + + + + + + + + + + + diff --git a/Wireframe/placeholder2.svg b/Wireframe/placeholder2.svg new file mode 100644 index 000000000..a5721f738 --- /dev/null +++ b/Wireframe/placeholder2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/Wireframe/placeholder3.svg b/Wireframe/placeholder3.svg new file mode 100644 index 000000000..3cc275142 --- /dev/null +++ b/Wireframe/placeholder3.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..b3d56c62e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,11 +36,7 @@ a { border: var(--line); max-width: fit-content; } -img, -svg { - width: 100%; - object-fit: cover; -} + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,9 +46,8 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; text-align: center; + margin-top: 2rem; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -87,3 +82,22 @@ article { grid-column: span 3; } } + +details summary { + cursor: pointer; + padding: var(--space); + border: var(--line); + max-width: fit-content; + margin-top: var(--space); +} + +details[open] summary { + margin-bottom: var(--space); +} + +article img { + width: 150px; + height: auto; + margin: 0 auto var(--space) auto; + display: block; +} \ No newline at end of file From 24f6e5064539a084f1377093b1be4180f3cd454c Mon Sep 17 00:00:00 2001 From: MehrozMunir Date: Wed, 21 Jan 2026 17:11:32 +0000 Subject: [PATCH 2/3] Changes made after the feedback --- Wireframe/index.html | 128 +++++++++++++++++++------------------ Wireframe/placeholder.svg | 6 ++ Wireframe/placeholder1.svg | 19 ------ Wireframe/placeholder2.svg | 15 ----- Wireframe/placeholder3.svg | 24 ------- Wireframe/style.css | 16 ++--- 6 files changed, 79 insertions(+), 129 deletions(-) create mode 100644 Wireframe/placeholder.svg delete mode 100644 Wireframe/placeholder1.svg delete mode 100644 Wireframe/placeholder2.svg delete mode 100644 Wireframe/placeholder3.svg diff --git a/Wireframe/index.html b/Wireframe/index.html index 3ce9f7029..ddd6a7e0e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -9,83 +9,85 @@

Understanding Readme files, Wireframes and Git

-

- A quick guide to README files, Wireframes and Git branches. -

+

A quick guide to README files, Wireframes and Git branches.

-
- README illustration +
+ README illustration -

What is the purpose of a README file?

+

What is the purpose of a README file?

-

- A README gives an overview of a project and explains what it does. - It helps anyone using or contributing to the project understand the basics quickly. -

- -
- Read more

- A README usually includes installation steps, usage instructions, - dependencies, examples, and contribution guidelines. It is the first place - someone looks when trying to understand a repository. A clear README saves - time for both the project owner and future developers. + A README gives an overview of a project and explains what it does. It + helps anyone using or contributing to the project understand the + basics quickly.

-
-
- -
- Simple wireframe sketch illustration -

What is the purpose of a wireframe?

+
+ Read more +

+ A README usually includes installation steps, usage instructions, + dependencies, examples, and contribution guidelines. It is the first + place someone looks when trying to understand a repository. A clear + README saves time for both the project owner and future developers. +

+
+
-

- A wireframe is a basic visual outline of a webpage or app. It shows where - things will go on the screen without focusing on colours or final design. -

+
+ Simple wireframe sketch illustration -
- Read more -

- Wireframes help designers and developers plan the structure and layout of - a page before any real code or detailed design work begins. They make it - easier to decide on the placement of headings, images, buttons, and - content. Because wireframes are quick to create and easy to change, teams - can test ideas, discuss improvements, and fix layout problems early in the - project. This saves time and reduces mistakes later when the real coding - starts. -

-
-
+

What is the purpose of a wireframe?

- -
- Git branching illustration +

+ A wireframe is a basic visual outline of a webpage or app. It shows + where things will go on the screen without focusing on colours or + final design. +

-

What is a branch in Git?

+
+ Read more +

+ Wireframes help designers and developers plan the structure and + layout of a page before any real code or detailed design work + begins. They make it easier to decide on the placement of headings, + images, buttons, and content. Because wireframes are quick to create + and easy to change, teams can test ideas, discuss improvements, and + fix layout problems early in the project. This saves time and + reduces mistakes later when the real coding starts. +

+
+
-

- A branch in Git is a separate line of development where you can work on - changes without affecting the main codebase. -

+
+ Git branching illustration -
- Read more -

- Developers use branches to build new features, fix bugs, or experiment - safely without breaking the main project. Each branch is a copy of the - project’s history, and you are free to make changes independently. Once - the work on the branch is complete and tested, it can be merged back into - the main branch. This workflow makes collaboration easier, keeps the main - code stable, and allows multiple people to work on different features at - the same time. -

-
-
+

What is a branch in Git?

+

+ A branch in Git is a separate line of development where you can work + on changes without affecting the main codebase. +

+
+ Read more +

+ Developers use branches to build new features, fix bugs, or + experiment safely without breaking the main project. Each branch is + a copy of the project’s history, and you are free to make changes + independently. Once the work on the branch is complete and tested, + it can be merged back into the main branch. This workflow makes + collaboration easier, keeps the main code stable, and allows + multiple people to work on different features at the same time. +

+
+
- +
+

+ © Mehroz Munir — Manchester - ITP Jan 2026 - Sprint 1 - + Module-Onboarding Wireframe Exercise +

+
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 diff --git a/Wireframe/placeholder1.svg b/Wireframe/placeholder1.svg deleted file mode 100644 index cfaabaff2..000000000 --- a/Wireframe/placeholder1.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - README - - - - - - - - - - - diff --git a/Wireframe/placeholder2.svg b/Wireframe/placeholder2.svg deleted file mode 100644 index a5721f738..000000000 --- a/Wireframe/placeholder2.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/Wireframe/placeholder3.svg b/Wireframe/placeholder3.svg deleted file mode 100644 index 3cc275142..000000000 --- a/Wireframe/placeholder3.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Wireframe/style.css b/Wireframe/style.css index b3d56c62e..6601f7881 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,6 +31,14 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; +} +img { + width: 100%; + height: auto; + display: block; +} a { padding: var(--space); border: var(--line); @@ -82,7 +90,6 @@ article { grid-column: span 3; } } - details summary { cursor: pointer; padding: var(--space); @@ -93,11 +100,4 @@ details summary { details[open] summary { margin-bottom: var(--space); -} - -article img { - width: 150px; - height: auto; - margin: 0 auto var(--space) auto; - display: block; } \ No newline at end of file From 3315441b8fe06096f92cff02361d1e0531e931ae Mon Sep 17 00:00:00 2001 From: MehrozMunir Date: Wed, 21 Jan 2026 18:20:14 +0000 Subject: [PATCH 3/3] footer issue fixed and some minor changes --- Wireframe/index.html | 4 +-- Wireframe/style.css | 80 ++++++++++++++------------------------------ 2 files changed, 28 insertions(+), 56 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index ddd6a7e0e..46feae5fa 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,8 +8,8 @@
-

Understanding Readme files, Wireframes and Git

-

A quick guide to README files, Wireframes and Git branches.

+

Understanding README files, wireframes and Git

+

A quick guide to README files, wireframes and Git branches.

diff --git a/Wireframe/style.css b/Wireframe/style.css index 6601f7881..a2b29e3dc 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,31 +1,11 @@ -/* 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 ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: oklch(0% 0 0); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ body { background: var(--paper); color: var(--ink); @@ -34,6 +14,18 @@ body { header { text-align: center; } + +main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 6) auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + > *:first-child { + grid-column: span 2; + } +} + img { width: 100%; height: auto; @@ -45,38 +37,6 @@ a { max-width: fit-content; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - text-align: center; - margin-top: 2rem; -} -/* ====== 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; - } -} -/* ====== 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 { border: var(--line); padding-bottom: var(--space); @@ -100,4 +60,16 @@ details summary { details[open] summary { margin-bottom: var(--space); -} \ No newline at end of file +} + +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background: var(--paper); + padding: var(--space); + text-align: center; + border-top: var(--line); + z-index: 999; +}