From a5070b155d8cf31155f1b233dd961218e9a0edb0 Mon Sep 17 00:00:00 2001 From: djmears-dev Date: Wed, 10 Jun 2026 02:41:07 +0100 Subject: [PATCH 1/5] article 1 --- Wireframe/index.html | 59 ++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7163cae5e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,28 @@ - + - - - - Wireframe - - - -
-

Wireframe

-

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

-
-
-
- -

Title

-

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

- Read more -
-
- - - + + + + README, Wireframes and Git Branches + + + +
+

README, Wireframes and Git Branches

+

A simple guide to three important web development concepts.

+
+
+
+ README file illustration +

What is the purpose of a README file?

+

+ A README file explains what a project is, how it works, and how + someone can use it. It often includes setup instructions, features, + and important notes for developers. +

+ Read more Date: Wed, 10 Jun 2026 02:42:34 +0100 Subject: [PATCH 2/5] Article 2 --- Wireframe/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7163cae5e..0c566d32d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -25,4 +25,22 @@

What is the purpose of a README file?

Read more +
+ + +
+ Wireframe file illustration +

What is the purpose of a wireframe?

+

+ A wireframe is a simple plan for a webpage or app. It shows where + content, images, buttons, and sections will go before the final design + is created. +

+ Read more \ No newline at end of file From 1ccaf1364e689ca2d992ea256be6acffda262975 Mon Sep 17 00:00:00 2001 From: djmears-dev Date: Wed, 10 Jun 2026 02:45:52 +0100 Subject: [PATCH 3/5] Article 3 --- Wireframe/index.html | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0c566d32d..75a6fb565 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -42,5 +42,29 @@

What is the purpose of a wireframe?

Read more +
+ + +
+ Git branch file illustration +

What is a branch in Git?

+

+ A branch in Git is a separate version of a project. It lets developers + work on new features or fixes without changing the main version of the + code. +

+ Read more \ No newline at end of file + > +
+
+ + + From a7a294da75c6dab767de04d82d5c3a46f13ec4d8 Mon Sep 17 00:00:00 2001 From: djmears-dev Date: Wed, 10 Jun 2026 02:47:26 +0100 Subject: [PATCH 4/5] Added CSS --- Wireframe/style.css | 130 ++++++++++++++++++++++++++------------------ 1 file changed, 77 insertions(+), 53 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..686be84eb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,58 +1,69 @@ /* 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 - 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 +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; + --paper: oklch(7 0 0); + --ink: blue; + --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 */ +General rules for basic HTML elements in any context */ +header { + text-align: center; +} +/* Futuristic font */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: var(--paper); + color: var(--ink); + font: var(--font); + font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif; } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } img, svg { - width: 100%; - object-fit: cover; + width: 100%; + height: 250px; + object-fit: cover; + border: 3px solid blue; + border-radius: 20px; } -/* ====== 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; + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; - text-align: center; + text-align: center; + font-size: 0.8rem; + color: var(--ink); + margin-top: 40px; + padding: 20px; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,28 +73,41 @@ 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; - } + 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. +/* ====== 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: var(--line); + border-radius: 20px; + box-shadow: 0 0 15px blue; + padding-bottom: var(--space); + text-align: left; + display: grid; + grid-template-columns: var(--space) 1fr var(--space); +} +article > * { + grid-column: 2 / 3; +} +article > img { + grid-column: 2 / 3; + margin-top: var(--space); +} +> img { + grid-column: 2 / 3; + margin-top: var(--space); +} +h1, +h2, +a { + text-transform: uppercase; + letter-spacing: 1px; } From da7569744b67e1f5ae4edaaf8bc9d5b5064de78b Mon Sep 17 00:00:00 2001 From: djmears-dev Date: Wed, 10 Jun 2026 22:17:35 +0100 Subject: [PATCH 5/5] Updated footer so it is fixed at the bottom of the page --- Wireframe/style.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 686be84eb..d7e2ac0db 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -55,15 +55,19 @@ 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; + max-width: var(--container); + margin: 0 auto 80px auto; } footer { - text-align: center; - font-size: 0.8rem; - color: var(--ink); - margin-top: 40px; - padding: 20px; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + font-size: 0.8rem; + padding: 10px; + background: var(--paper); + z-index: 10; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.