From 0988642ded3d18fc033c310d1ab3f657b6645817 Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Wed, 20 May 2026 11:29:49 +0100 Subject: [PATCH 01/14] -Changed title "Wireframe" to "Wireframe To Web Code" -Changed header to "Wireframe To Web Code" -Changed description to: "Wireframes, README & Git branches, explained." --- Wireframe/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..a6e39784a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,20 +3,20 @@ - Wireframe + Wireframe To Web Code
-

Wireframe

+

Wireframe To Web Code

- This is the default, provided code and no changes have been made yet. + Wireframes, README & Git branches, explained.

-

Title

+

Wireframe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptates. Quisquam, voluptates. From 8ed1da443ebd1d95fc85a54973418440a1ffb4c9 Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Wed, 20 May 2026 12:01:58 +0100 Subject: [PATCH 02/14] -Duplicated

code snippet x2 to create basic structure; changed duplicate headings to "README" + "Git Branches," respectively. "Wireframe" article: - img: Replaced "placeholder.svg" with "wireframe.png," added alt description. -

: removed default text; added explanation of wireframes. -: added hyperlink to figma.com article on wireframes. --- Wireframe/index.html | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a6e39784a..63036b441 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,8 +15,34 @@

Wireframe To Web Code

+
+ +
+
+ +

README

+

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

+ Read more +
+
+ +
+
+ +

Git Branches

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptates. Quisquam, voluptates. From f3e355a77aec45bd1be4014d677a7d433db960aa Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Wed, 20 May 2026 12:26:55 +0100 Subject: [PATCH 03/14] -Added: "README-File-Example.jpg" "README" article: -Replaced "placeholder.svg" with "README-File-Example.jpg;" added alt. description. -

: Replaced default text with explanation of README files -Added

-
Picture of an example README file -

README

] +

README

The purpose of a README file is to provide important information for a project or piece of software. @@ -64,7 +63,6 @@

README

] Read more
-
Picture of CYF Example Git Branch Diagram @@ -99,8 +97,13 @@

Git Branches

Read more
+
+
+

+ Footers usually contain content links and information about the site overall +

diff --git a/Wireframe/style.css b/Wireframe/style.css index 292a50bb1..998180376 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,7 +31,8 @@ body { color: var(--ink); font: var(--font); } -a { +a {font-family: Arial; + font-weight: 600; padding: var(--space); border: var(--line); max-width: fit-content; @@ -40,7 +41,7 @@ img, svg { width: 100%; object-fit: cover; - margin: 10px; + } /* ====== Text Formatting ===== */ @@ -50,8 +51,6 @@ h1, h2 { } p, ul{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - width: clamp(45ch, 50%, 75ch); - } @@ -63,10 +62,19 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + +header { + display: flex; + justify-content:center; + align-items: center; +} + footer { - position: fixed; - bottom: 0; - text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; + border-top-style: solid; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -92,6 +100,7 @@ article { border: var(--line); padding-bottom: var(--space); text-align: justify; + align-items:center; display: grid; grid-template-columns: var(--space) 1fr var(--space); > * { @@ -99,5 +108,6 @@ article { } > img { grid-column: span 3; + } } From 68f3876148ed5cc86a11136aedf93776459d989c Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Sat, 23 May 2026 14:38:35 +0100 Subject: [PATCH 10/14] HTML: - Capitalised "READ MORE" - Cleaned up formatting of tags and text CSS: - :root : Updated --line to "2px solid" - header: removed all properties, added property: "text-align: center" - footer: removed: "display: flex," "align-items," "justify-content;" added: "text-align: center" - a: added: "text-decoration: none," "color: black" - article: removed: "align-items: center" --- Wireframe/index.html | 11 ++++++++--- Wireframe/style.css | 19 +++++++------------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 3908df616..3bc0dfb40 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -28,7 +28,9 @@

Wireframe

In essence, a wireframe is the architectural "blueprint" of a web document.

- Read more + + READ MORE +
@@ -60,7 +62,10 @@

README

README files are commonly written in Markdown (.md), plaintext format.

- Read more + + + READ MORE +
diff --git a/Wireframe/style.css b/Wireframe/style.css index 998180376..c02f5393c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -21,7 +21,7 @@ As well as useful links to learn more */ --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 2px solid; --container: 1280px; } /* ====== Base Elements ====== @@ -33,20 +33,21 @@ body { } a {font-family: Arial; font-weight: 600; + text-decoration: none; + color: black; padding: var(--space); border: var(--line); max-width: fit-content; } img, -svg { +svg { margin: auto; width: 100%; object-fit: cover; - } /* ====== Text Formatting ===== */ -h1, h2 { +h1, h2, a { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } p, ul{ @@ -63,16 +64,10 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } -header { - display: flex; - justify-content:center; - align-items: center; +header {text-align: center; } -footer { - display: flex; - justify-content: center; - align-items: center; +footer {text-align: center; font-weight: 700; border-top-style: solid; } From 8a35fc29aa528835697b9fa22215cd4222dcdcd7 Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Sat, 23 May 2026 15:15:37 +0100 Subject: [PATCH 11/14] HTML: - Updated Git Branches explanation. - Updated README explanation. --- Wireframe/index.html | 36 +++++++++++++++--------------------- Wireframe/style.css | 7 ++++--- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 3bc0dfb40..ab0c0ba4b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -40,11 +40,11 @@

README

The purpose of a README file is to provide important information for a project or piece of software. - This may include things such as: + It can include information such as:

From 9c53cfa17f30c26a7ae5b00acf75fc044a592e9e Mon Sep 17 00:00:00 2001 From: Craig Stodd Date: Sat, 23 May 2026 15:37:35 +0100 Subject: [PATCH 13/14] HTML: - Removed duplicate tage from line 100 causing stray