From 999366c43b8f1e3f4831976f63ff61666465fe9c Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 20:48:34 +0100 Subject: [PATCH 01/21] add immage and tittle of the first article --- Wireframe/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..12280f12b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,17 +8,17 @@
-

Wireframe

+

Planning, Versioning and Documenting

- This is the default, provided code and no changes have been made yet. + Building high quality web applications requires more than nust writing code. This guide explores three foundational pillar of proffesional software development: mapping user experiences with wirwframes, managing code safely using Git branches, and creating clear project documentation with README files.

- -

Title

+ a digital file icon in purple colour +

The purpose of a README file

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

Read more From 82a064850428a67d61de273a3eb278485cc6fd1c Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:03:07 +0100 Subject: [PATCH 02/21] Add first paragraph draft --- Wireframe/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 12280f12b..e1aff86bd 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -18,8 +18,7 @@

Planning, Versioning and Documenting

a digital file icon in purple colour

The purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam - voluptates. Quisquam, voluptates. + README files are the first thing developers, like us, sees when visiting a repository on GitHub.

Read more
From 43651282c0ab3fc0fb87c7f5a69276edde38e277 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:07:44 +0100 Subject: [PATCH 03/21] add image for second article --- Wireframe/index.html | 64 +++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index e1aff86bd..0a828a5e4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,32 +1,46 @@ - - - - Wireframe - - - -
-

Planning, Versioning and Documenting

+ + + + + Wireframe + + + + +
+

Planning, Versioning and Documenting

+

+ Building high quality web applications requires more than nust writing code. This guide explores three + foundational pillar of proffesional software development: mapping user experiences with wirwframes, managing code + safely using Git branches, and creating clear project documentation with README files. +

+
+
+
+ a digital file icon in purple colour +

The purpose of a README file

- Building high quality web applications requires more than nust writing code. This guide explores three foundational pillar of proffesional software development: mapping user experiences with wirwframes, managing code safely using Git branches, and creating clear project documentation with README files. + README files are the first thing developers, like us, sees when visiting a repository on GitHub.

-
-
-
- a digital file icon in purple colour -

The purpose of a README file

-

- README files are the first thing developers, like us, sees when visiting a repository on GitHub. -

- Read more -
-
-
+ Read more + +
+ wireframe elements +

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

-
- + Read more + +
+ + + From 24d1ed97fa63e8703062dd2571f635902433729b Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:08:43 +0100 Subject: [PATCH 04/21] add header 2 for second article --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0a828a5e4..3e94fa0bb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,7 +30,7 @@

The purpose of a README file

wireframe elements -

+

The Purpose of Wireframes

Read more From a86f4cba7e8a901641cbb638d58dbd2084939b54 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:10:48 +0100 Subject: [PATCH 05/21] Add third article, immage and h2 --- Wireframe/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index 3e94fa0bb..658b88316 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -35,6 +35,12 @@

The Purpose of Wireframes

Read more
+
+ a diagram showing git branches +

What is a Branch in Git?

+ +

From d4df58d66bdc849b5d1b118ce6fd8fc3fb78f88d Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:12:09 +0100 Subject: [PATCH 06/21] Add paragraph for thirs article --- Wireframe/index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 658b88316..8d2153827 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -39,8 +39,13 @@

The Purpose of Wireframes

a diagram showing git branches

What is a Branch in Git?

- - +

+ Git branches are a powerful feature that allows developers to work on different versions of a project + simultaneously + without affecting the main codebase. +

+ Read more +

From 01878938c009b84a32ec2ec7301c56dde60f7973 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Sun, 24 May 2026 22:13:05 +0100 Subject: [PATCH 07/21] Add paragraph for second article --- Wireframe/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8d2153827..97ac5ad7a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -32,6 +32,9 @@

The purpose of a README file

alt="wireframe elements" width="700" />

The Purpose of Wireframes

+ A wireframe is a low-fidelity visual guide that outlines a webpage's structural framework, focusing on content + layout + and user interface functionality before design begins.

Read more @@ -54,4 +57,4 @@

What is a Branch in Git?

- + \ No newline at end of file From 92354fcca3ef9bfd7c0a3d94632c490f4e4419eb Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 14:06:20 +0100 Subject: [PATCH 08/21] fix: remove height and width attributes from html to handle in style.css file --- Wireframe/index.html | 115 +++++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 54 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 97ac5ad7a..cd636f104 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,60 +1,67 @@ - + + + + + Wireframe + + - - - - Wireframe - - - - -
-

Planning, Versioning and Documenting

-

- Building high quality web applications requires more than nust writing code. This guide explores three - foundational pillar of proffesional software development: mapping user experiences with wirwframes, managing code - safely using Git branches, and creating clear project documentation with README files. -

-
-
-
- a digital file icon in purple colour -

The purpose of a README file

-

- README files are the first thing developers, like us, sees when visiting a repository on GitHub. -

- Read more -
-
- wireframe elements -

The Purpose of Wireframes

+ +
+

Planning, Versioning and Documenting

- A wireframe is a low-fidelity visual guide that outlines a webpage's structural framework, focusing on content - layout - and user interface functionality before design begins. + Building high quality web applications requires more than just writing + code. This guide explores three foundational pillars of professional + software development: mapping user experiences with wireframes, managing + code safely using Git branches, and creating clear project documentation + with README files.

- Read more -
-
- a diagram showing git branches -

What is a Branch in Git?

+ +
+
+ a digital file icon in purple colour +

The purpose of a README file

+

+ README files are the first thing developers, like us, see when + visiting a repository on GitHub. +

+ Read more +
+
+ wireframe elements +

The Purpose of Wireframes

+

+ A wireframe is a low-fidelity visual guide that outlines a webpage's + structural framework, focusing on content layout and user interface + functionality before design begins. +

+ Read more +
+
+ a diagram showing git branches +

What is a Branch in Git?

+

+ Git branches are a powerful feature that allows developers to work on + different versions of a project simultaneously without affecting the + main codebase. +

+ Read more +
+
+

- Git branches are a powerful feature that allows developers to work on different versions of a project - simultaneously - without affecting the main codebase. + This is the default, provided code and no changes have been made yet.

- Read more -
-
-
-

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

-
- - - \ No newline at end of file + + + From dcfcb658674d8f7053e944e459a1267e18e1c1d9 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 14:13:19 +0100 Subject: [PATCH 09/21] add a copyright notice to make it look professional and realistic --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index cd636f104..1e7b79965 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -59,8 +59,8 @@

What is a Branch in Git?

-

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

© 2026 Wireframe Web Development Coursework. All rights reserved.

+

From 9236cefa3135a7876e03b684c37e6c430b8c32f1 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 14:24:11 +0100 Subject: [PATCH 10/21] includes a semantic
tag for contact details --- Wireframe/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1e7b79965..5c4f20f49 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -60,8 +60,10 @@

What is a Branch in Git?

From 112a1bb8ab172658bc12b816e389f3d658721354 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:02:56 +0100 Subject: [PATCH 11/21] style: add bottom border to images --- Wireframe/style.css | 61 ++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a6b1a9321 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,50 +1,49 @@ -/* 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); + --paper: #ffffff; + --ink: #111111; --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; + --space: clamp(10px, 6px + 2vw, 20px); + --line: 2px solid #111111; + --container: 1200px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + body { background: var(--paper); color: var(--ink); font: var(--font); + margin: 0; + padding: 0; + + padding-bottom: 120px; } + a { - padding: var(--space); + display: inline-block; + color: var(--ink); + text-decoration: none; + padding: 8px 16px; border: var(--line); max-width: fit-content; + font-weight: bold; + text-transform: uppercase; + font-size: 0.9rem; + margin-top: auto; + max-width: fit-content; } -img, -svg { + +a:hover { + background: var(--ink); + color: var(--paper); +} + +img { width: 100%; + height: 250px; object-fit: cover; + border-bottom: var(--line); } -/* ====== 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; From b56612ca6c669680a78a11e38d48ef9cca5cba1d Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:07:19 +0100 Subject: [PATCH 12/21] style: center header content --- Wireframe/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index a6b1a9321..09ec370a4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -44,6 +44,13 @@ img { border-bottom: var(--line); } +header { + text-align: center; + max-width: 800px; + margin: 40px auto; + padding: 0 var(--space); +} + main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; From ca819ec21d7f9cc5f27f0ee42972eb1e085d4564 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:09:33 +0100 Subject: [PATCH 13/21] style: make header tittle uppercase --- Wireframe/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 09ec370a4..f0fef3268 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,6 +51,11 @@ header { padding: 0 var(--space); } +header h1 { + text-transform: uppercase; + margin-bottom: 10px; +} + main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; From c94f236ce3fa489b9a48cb4879473b829b43f04d Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:13:41 +0100 Subject: [PATCH 14/21] style: add grid layout to main --- Wireframe/style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index f0fef3268..ddf93d892 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -57,9 +57,14 @@ header h1 { } main { + display: grid; + grid-template-columns: 1fr 1fr; + gap: calc(var(--space) * 2); max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto; + padding: 0 var(--space); } + footer { position: fixed; bottom: 0; From cdd3d6dbedf44d651533d721c7bdcccb9146233e Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:33:59 +0100 Subject: [PATCH 15/21] style: make main grid single column on mobile --- Wireframe/style.css | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index ddf93d892..ac0e8f0ff 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -65,26 +65,25 @@ main { padding: 0 var(--space); } +main > article:first-child { + grid-column: span 2; +} + +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + } + main > article:first-child { + grid-column: span 1; + } +} + 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; - } -} + /* ====== 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. From 45f27bd1af46495adc8b3efc0916cc3cab2d33ce Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 15:38:29 +0100 Subject: [PATCH 16/21] style: improve article layout and spacing --- Wireframe/style.css | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index ac0e8f0ff..881611c34 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -84,21 +84,14 @@ footer { text-align: center; } -/* ====== 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); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + padding: var(--space); + display: flex; + flex-direction: column; + gap: 15px; +} + +article h2 { + margin: 0; } From 9c166f9d1f31bf067701b3fbdd05f70337f04d59 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 16:02:48 +0100 Subject: [PATCH 17/21] Style: make footer information look horizontal insted of vertical --- Wireframe/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 881611c34..4a9b20b26 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -81,7 +81,22 @@ main > article:first-child { footer { position: fixed; bottom: 0; + left: 0; + width: 100%; text-align: center; + background-color: var(--paper); + border-top: var(--line); + padding: 15px 0; + z-index: 1000; + display: flex; + justify-content: center; + gap: var(--space); + align-items: center; +} + +footer p, footer address { + margin: 5px 0; + font-size: 0.9rem; } article { From f9e8a1e39180f1c7730673b1bc7a344d5ceab33b Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 16:11:08 +0100 Subject: [PATCH 18/21] fix: improved README files article --- Wireframe/index.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5c4f20f49..4d6989cff 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -26,8 +26,10 @@

Planning, Versioning and Documenting

/>

The purpose of a README file

- README files are the first thing developers, like us, see when - visiting a repository on GitHub. + README files are the first thing developers see when introduced to a + project. They are placed in the main directory of a project and helps + understand what the project does, how to install it, and how others + can use or contribute to it.

Read more @@ -59,11 +61,17 @@

What is a Branch in Git?

From e09a2275a077d886bb354bf87d63b4241e42f7a7 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 16:27:10 +0100 Subject: [PATCH 19/21] Style: change size of main image --- Wireframe/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 4a9b20b26..ef89304d7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -69,6 +69,10 @@ main > article:first-child { grid-column: span 2; } +main > article:first-child img { + height: 400px; +} + @media (max-width: 768px) { main { grid-template-columns: 1fr; From e81cc54536650cea96c8ee67994f612d3f48a615 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 16:38:05 +0100 Subject: [PATCH 20/21] style: fix image spacing to make them touch the card borders --- Wireframe/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index ef89304d7..eb2dc3b25 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -38,10 +38,12 @@ a:hover { } img { - width: 100%; - height: 250px; + height: 300px; object-fit: cover; border-bottom: var(--line); + margin-top: calc(var(--space) * -1); + margin-left: calc(var(--space) * -1); + width: calc(100% + var(--space) * 2); } header { From c45cc6c76cec49817aaa7da79d9ce95b92e99d30 Mon Sep 17 00:00:00 2001 From: Carolina Villa Date: Thu, 11 Jun 2026 19:44:40 +0100 Subject: [PATCH 21/21] fix: assign different URLs to"Read more" links --- Wireframe/index.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 4d6989cff..4151dc580 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -31,7 +31,10 @@

The purpose of a README file

understand what the project does, how to install it, and how others can use or contribute to it.

- Read more + Read more
The Purpose of Wireframes structural framework, focusing on content layout and user interface functionality before design begins.

- Read more + Read more
What is a Branch in Git? different versions of a project simultaneously without affecting the main codebase.

- Read more + Read more