From cb5971543b16203d85d7b9e64cdee2115d233354 Mon Sep 17 00:00:00 2001 From: medtechlogic Date: Sun, 7 Jun 2026 14:40:02 +0200 Subject: [PATCH 1/2] Add files via upload --- Wireframe/git-branch.png | Bin 0 -> 5217 bytes Wireframe/readme.png | Bin 0 -> 2894 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Wireframe/git-branch.png create mode 100644 Wireframe/readme.png diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png new file mode 100644 index 0000000000000000000000000000000000000000..71b746b95176bc44fbd2a80904397047c311cabf GIT binary patch literal 5217 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 Date: Sun, 7 Jun 2026 15:16:18 +0200 Subject: [PATCH 2/2] corrected-updated-wirefram-juanita --- Wireframe/index.html | 130 ++++++++++++++++++++++++++++++++++--------- Wireframe/style.css | 26 ++++++--- 2 files changed, 122 insertions(+), 34 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..77b56b293 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,109 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + Understanding README Files, Wireframes and Git Branches + + + + +
+

Understanding README Files, Wireframes and Git Branches

+ +

+ This article explores three important concepts used in software + development: README files, Wireframes and Git branches. +

+ +

+ Code adapted and changed by Juanita. +

+
+ +
+ +
+

What is a README File?

+ + README file example +

- This is the default, provided code and no changes have been made yet. + A README file is usually the first document people see when they visit a + project. It provides an overview of the project, explains its purpose, + gives installation instructions and helps users understand how to use + the software.

-
-
-
- -

Title

-

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

- Read more -
-
-
+

- This is the default, provided code and no changes have been made yet. + A well-written README makes it easier for developers and contributors + to understand and work with a project.

-
- - + + + Learn more about README files + + + +
+

What is a Wireframe?

+ + Website wireframe example + +

+ A wireframe is a simple visual representation of a webpage or + application. It focuses on structure and layout rather than colours, + images or final design elements. +

+ +

+ Fun fact: designers use wireframes to plan where content, navigation and key + features will appear before development begins. +

+ + + Learn more about wireframes + +
+ +
+

What is a Git Branch?

+ + Git branch diagram + +

+ A Git branch is an independent line of development within a Git + repository. It allows developers to work on new features, bug fixes or + experiments without affecting the main version of the project. +

+ +

+ Once the work is complete and tested, the branch can be merged back into + the main codebase. +

+ + + Learn more about Git branches + +
+ + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..c39e94174 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,7 +18,7 @@ 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: black; --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -30,6 +30,7 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 60px; } a { padding: var(--space); @@ -48,11 +49,18 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + + header { + text-align: center; } + footer { position: fixed; bottom: 0; + left: 0; + width: 100%; text-align: center; + background: var(--paper); } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -65,10 +73,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { +} + + 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. @@ -80,10 +90,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { +} + +article > * { grid-column: 2/3; } - > img { + +article > img { grid-column: span 3; - } -} + } \ No newline at end of file