From 4c070982ce9aba9d769982021c26df37923d462b Mon Sep 17 00:00:00 2001 From: Richard Date: Wed, 21 Jan 2026 03:59:36 +0000 Subject: [PATCH 1/5] Update wireframe page title and header description --- Wireframe/index.html | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..db3f6c786 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,40 @@ - Wireframe + Wireframe to Web Code +
-

Wireframe

+

Wireframe to Web Code

- This is the default, provided code and no changes have been made yet. + A simple webpage built from a wireframe using semantic HTML and CSS.

+
- -

Title

+ Decorative placeholder image representing page layout +

Article Title

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + This section represents a reusable article component. Each article + includes a title, a short summary, and a link to further information.

- Read more + + Read more +
+ - + \ No newline at end of file From ccdbc43f4b77d5739e2891429a2b96b8173a2cae Mon Sep 17 00:00:00 2001 From: Richard Date: Wed, 21 Jan 2026 04:20:10 +0000 Subject: [PATCH 2/5] Add three articles section content --- Wireframe/index.html | 71 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 56 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index db3f6c786..28138207d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,20 +16,61 @@

Wireframe to Web Code

-
- Decorative placeholder image representing page layout -

Article Title

-

- This section represents a reusable article component. Each article - includes a title, a short summary, and a link to further information. -

- - Read more - -
+
+
+ +

What is the purpose of a README file?

+

+ A README is the first place someone looks when they open a project. + It explains what the project does, how to run it, and how to + contribute. A clear README reduces confusion and makes collaboration + easier. +

+ + Read more about README files + +
+ +
+ +

What is the purpose of a wireframe?

+

+ A wireframe is a simple layout sketch that shows where key parts of + a page will go before design details are added. It helps you plan + structure, spacing, and components so you can build the layout + correctly first. +

+ + Read more about wireframes + +
+ +
+ +

What is a branch in Git?

+

+ A branch is an independent line of work in a Git repository. It lets + you make changes safely without affecting the main version. When + your work is ready, it can be reviewed and merged back through a + pull request. +

+ + Read more about Git branches + +
+
@@ -39,4 +80,4 @@

Article Title

- \ No newline at end of file + From fc938fc1cf1d2f4987813de626122a2474e2a60f Mon Sep 17 00:00:00 2001 From: Richard Date: Wed, 21 Jan 2026 04:30:45 +0000 Subject: [PATCH 3/5] Fix footer layout and improve link focus visibility --- Wireframe/style.css | 58 ++++++++++++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..3017d4d49 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,12 +1,12 @@ /* 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 +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 + 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 @@ -24,36 +24,57 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { + margin: 0; background: var(--paper); color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); max-width: fit-content; + color: inherit; } + +/* Clear focus style for keyboard accessibility */ +a:focus-visible { + outline: 3px solid currentColor; + outline-offset: 3px; +} + img, svg { width: 100%; object-fit: cover; } -/* ====== Site Layout ====== + +/* ====== 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; + padding-bottom: calc(var(--space) * 6); /* prevent overlap with fixed footer */ } + +/* Footer fixed to bottom of viewport (full width) */ footer { position: fixed; bottom: 0; + left: 0; + right: 0; + border-top: var(--line); + background: var(--paper); + padding: var(--space); 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 @@ -65,12 +86,15 @@ 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. + +/* Make the first article span both columns (wireframe layout) */ +main > *: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. */ @@ -80,10 +104,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } +} + +article > * { + grid-column: 2/3; +} + +article > img { + grid-column: span 3; } From ea9304a9e78509711c6ab85429bd83a9b0b9323d Mon Sep 17 00:00:00 2001 From: Richard Date: Wed, 21 Jan 2026 05:08:15 +0000 Subject: [PATCH 4/5] Fix footer layout and improve link focus visibility --- Wireframe/style.css | 55 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 6 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 3017d4d49..a3ccc4720 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,15 +18,24 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, var(--paper) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; + + /* Used to keep content visible above the fixed footer */ + --footer-height: calc(var(--space) * 4); } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +*, +*::before, +*::after { + box-sizing: border-box; +} + body { margin: 0; background: var(--paper); @@ -35,6 +44,7 @@ body { } a { + display: inline-block; padding: var(--space); border: var(--line); max-width: fit-content; @@ -50,6 +60,8 @@ a:focus-visible { img, svg { width: 100%; + height: auto; + display: block; object-fit: cover; } @@ -57,10 +69,16 @@ svg { Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header, main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; - padding-bottom: calc(var(--space) * 6); /* prevent overlap with fixed footer */ + margin: 0 auto; + padding: calc(var(--space) * 2); +} + +main { + /* Prevent overlap with fixed footer and give the layout breathing room */ + padding-bottom: calc(var(--footer-height) + (var(--space) * 2)); } /* Footer fixed to bottom of viewport (full width) */ @@ -69,10 +87,16 @@ footer { bottom: 0; left: 0; right: 0; + border-top: var(--line); background: var(--paper); padding: var(--space); text-align: center; + min-height: var(--footer-height); +} + +footer p { + margin: 0; } /* ====== Articles Grid Layout ==== @@ -85,12 +109,12 @@ https://gridbyexample.com/learn/ main { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); + gap: calc(var(--space) * 2); } /* Make the first article span both columns (wireframe layout) */ main > *:first-child { - grid-column: span 2; + grid-column: 1 / -1; } /* ====== Article Layout ====== @@ -111,5 +135,24 @@ article > * { } article > img { - grid-column: span 3; + grid-column: 1 / -1; +} + +/* Optional: improve spacing/readability while keeping the wireframe feel */ +article h2 { + margin: calc(var(--space) * 1.5) 0 var(--space); +} + +article p { + margin: 0 0 calc(var(--space) * 1.5); +} + +@media (max-width: 700px) { + main { + grid-template-columns: 1fr; + } + + main > *:first-child { + grid-column: auto; + } } From 78d4559364090661169aedaab0a615ce4b7ed0da Mon Sep 17 00:00:00 2001 From: Richard Date: Fri, 23 Jan 2026 00:38:36 +0000 Subject: [PATCH 5/5] Align layout with wireframe: centered header and 2-column articles --- Wireframe/index.html | 16 ++++++++-------- Wireframe/style.css | 19 +++++++++++++++---- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 28138207d..64c482a88 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,7 +8,7 @@ -
+

Wireframe to Web Code

A simple webpage built from a wireframe using semantic HTML and CSS. @@ -16,9 +16,9 @@

Wireframe to Web Code

-
-
- +
+
+

What is the purpose of a README file?

A README is the first place someone looks when they open a project. @@ -35,8 +35,8 @@

What is the purpose of a README file?

-
- +
+

What is the purpose of a wireframe?

A wireframe is a simple layout sketch that shows where key parts of @@ -53,8 +53,8 @@

What is the purpose of a wireframe?

-
- +
+

What is a branch in Git?

A branch is an independent line of work in a Git repository. It lets diff --git a/Wireframe/style.css b/Wireframe/style.css index a3ccc4720..35fd61da1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -76,6 +76,11 @@ main { padding: calc(var(--space) * 2); } +/* Center the PAGE TITLE and the SUBTITLE (matches wireframe + reviewer feedback) */ +.page-header { + text-align: center; +} + main { /* Prevent overlap with fixed footer and give the layout breathing room */ padding-bottom: calc(var(--footer-height) + (var(--space) * 2)); @@ -106,14 +111,14 @@ Play with the options that come up. https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ -main { +.articles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 2); } /* Make the first article span both columns (wireframe layout) */ -main > *:first-child { +.articles > *:first-child { grid-column: 1 / -1; } @@ -122,6 +127,7 @@ 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, article { border: var(--line); padding-bottom: var(--space); @@ -130,29 +136,34 @@ article { grid-template-columns: var(--space) 1fr var(--space); } +.article > *, article > * { grid-column: 2/3; } +.article > img, article > img { grid-column: 1 / -1; } /* Optional: improve spacing/readability while keeping the wireframe feel */ +.article h2, article h2 { margin: calc(var(--space) * 1.5) 0 var(--space); } +.article p, article p { margin: 0 0 calc(var(--space) * 1.5); } +/* Keep layout readable on small screens */ @media (max-width: 700px) { - main { + .articles { grid-template-columns: 1fr; } - main > *:first-child { + .articles > *:first-child { grid-column: auto; } }