From 33e96655c009dc571471af36b0617e72449c997f Mon Sep 17 00:00:00 2001 From: Laura C Date: Fri, 16 Jan 2026 21:29:04 +0000 Subject: [PATCH 1/4] Complete wireframe webpage --- Wireframe/index.html | 58 +++++++++++++++++------ Wireframe/style.css | 109 ++++++++++++------------------------------- 2 files changed, 75 insertions(+), 92 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..689cbd801 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -6,28 +6,58 @@ Wireframe +
-

Wireframe

+

Wireframe Exercise

- This is the default, provided code and no changes have been made yet. + This page explains README files, wireframes, and Git branches.

+
-
- -

Title

-

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

- Read more -
+
+
+ +

What is a README file?

+

+ A README file explains what a project is, how it works, and how to use it. + It is usually the first thing CYF students read in a repository. +

+ Read more +
+ +
+ +

What is a wireframe?

+

+ A wireframe is a simple visual layout that shows the structure of a webpage + before any design or styling is added. +

+ Read more +
+ +
+ +

What is a Git branch?

+

+ A branch in Git is a separate version of a project where you can work on + changes without affecting the main code. +

+ + Read more + +
+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a81a86ea6 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,42 @@ -/* 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 */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} -/* ====== 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); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; +/* Careful with the footer */ +main { + padding-bottom: 60px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); + +header { + text-align: center; + padding: 20px; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +.articles { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + padding: 20px; } -img, -svg { - width: 100%; - object-fit: cover; + +article { + border: 1px solid #ccc; + padding: 15px; } -/* ====== 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; + +article img { + width: 100%; + height: auto; } + footer { position: fixed; bottom: 0; + width: 100%; 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. -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; - } + border-top: 1px solid #ccc; + background-color: #fff; + padding: 10px; } From b42debcbcc890da53d64e553bb32d60856f96214 Mon Sep 17 00:00:00 2001 From: Laura C Date: Sat, 24 Jan 2026 11:56:41 +0000 Subject: [PATCH 2/4] Improve Git branch definition --- Wireframe/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 689cbd801..49c741c01 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -46,11 +46,11 @@

What is a wireframe?

What is a Git branch?

- A branch in Git is a separate version of a project where you can work on - changes without affecting the main code. + A Git branch lets you work on new changes safely without changing the main + project. You can make updates, and only add them to the main code when they + are ready.

- - Read more + Read more From e11f7b60de3b304fb75c4b565b9287a8633d8a7c Mon Sep 17 00:00:00 2001 From: Laura C Date: Fri, 30 Jan 2026 16:49:00 +0000 Subject: [PATCH 3/4] Fix HTML validation and wireframe layout --- Wireframe/index.html | 108 +++++++++++++++++++++---------------------- Wireframe/style.css | 17 ++++++- 2 files changed, 67 insertions(+), 58 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 49c741c01..45ec2c349 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,63 +1,59 @@ - - - - Wireframe - - - -
-

Wireframe Exercise

-

- This page explains README files, wireframes, and Git branches. -

-
+ + + + Wireframe + + -
-
-
- -

What is a README file?

-

- A README file explains what a project is, how it works, and how to use it. - It is usually the first thing CYF students read in a repository. -

- Read more -
+ +
+

Wireframe Exercise

+

This page explains README files, wireframes, and Git branches.

+
-
- -

What is a wireframe?

-

- A wireframe is a simple visual layout that shows the structure of a webpage - before any design or styling is added. -

- Read more -
+
+
+
+ +

What is a README file?

+

+ A README file explains what a project is, how it works, and how to use it. + It is usually the first thing CYF students read in a repository. +

+ Read + more +
-
- -

What is a Git branch?

-

- A Git branch lets you work on new changes safely without changing the main - project. You can make updates, and only add them to the main code when they - are ready. -

- Read more - -
-
-
+
+ +

What is a wireframe?

+

+ A wireframe is a simple visual layout that shows the structure of a webpage + before any design or styling is added. +

+ Read more +
-
-

Footer

-
- - +
+ +

What is a Git branch?

+

+ A Git branch lets you work on new changes safely without changing the main + project. You can make updates, and only add them to the main code when they + are ready. +

+ Read more +
+
+
+ +
+

Footer

+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index a81a86ea6..9d285071e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,11 +16,16 @@ header { .articles { display: grid; - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; } +/* First article spans full width */ +.articles article:first-child { + grid-column: 1 / -1; +} + article { border: 1px solid #ccc; padding: 15px; @@ -31,6 +36,14 @@ article img { height: auto; } +/* Border around links */ +article a { + display: inline-block; + border: 1px solid #ccc; + padding: 6px 10px; + text-decoration: none; +} + footer { position: fixed; bottom: 0; @@ -39,4 +52,4 @@ footer { border-top: 1px solid #ccc; background-color: #fff; padding: 10px; -} +} \ No newline at end of file From e07f9ae49d75c97a76734250a60976eee25a8a24 Mon Sep 17 00:00:00 2001 From: Laura C Date: Fri, 30 Jan 2026 17:00:16 +0000 Subject: [PATCH 4/4] Fix validator warning by adding section heading --- Wireframe/index.html | 8 +++++--- Wireframe/style.css | 6 +++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 45ec2c349..83c08eac7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,9 +16,11 @@

Wireframe Exercise

+

Articles

+
-

What is a README file?

+

What is a README file?

A README file explains what a project is, how it works, and how to use it. It is usually the first thing CYF students read in a repository. @@ -30,7 +32,7 @@

What is a README file?

-

What is a wireframe?

+

What is a wireframe?

A wireframe is a simple visual layout that shows the structure of a webpage before any design or styling is added. @@ -40,7 +42,7 @@

What is a wireframe?

-

What is a Git branch?

+

What is a Git branch?

A Git branch lets you work on new changes safely without changing the main project. You can make updates, and only add them to the main code when they diff --git a/Wireframe/style.css b/Wireframe/style.css index 9d285071e..f1e10c581 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -22,7 +22,7 @@ header { } /* First article spans full width */ -.articles article:first-child { +.articles article:first-of-type { grid-column: 1 / -1; } @@ -36,7 +36,7 @@ article img { height: auto; } -/* Border around links */ +/* Border around Read more links */ article a { display: inline-block; border: 1px solid #ccc; @@ -52,4 +52,4 @@ footer { border-top: 1px solid #ccc; background-color: #fff; padding: 10px; -} \ No newline at end of file +}