diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png new file mode 100644 index 000000000..71b746b95 Binary files /dev/null and b/Wireframe/git-branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..6746206a3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,107 @@ - - - - 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 -
-
- - - + + + + 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. +

+
+ +
+
+ README file example + +

What is a README File?

+ +

+ 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. +

+ +

+ A well-written README makes it easier for developers and contributors + to understand and work with a project. +

+ + + Learn more about README files + +
+ +
+ Website wireframe example + +

What is a Wireframe?

+ +

+ 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 also use wireframes to plan where content, navigation + and key features will appear before development begins. +

+ + + Learn more about wireframes + +
+ +
+ Git branch diagram + +

What is a Git Branch?

+ +

+ 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/readme.png b/Wireframe/readme.png new file mode 100644 index 000000000..7511567e6 Binary files /dev/null and b/Wireframe/readme.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4ce4d229c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,42 +18,59 @@ 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; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ + body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 60px; } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + img, svg { width: 100%; object-fit: cover; } + /* ====== 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; } + +/* (kept but fixed indentation only) */ +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. Inspect this in Devtools and click the "grid" button in the Elements view @@ -61,29 +78,35 @@ 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; - } } + +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. */ + 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; - } } + +article > * { + grid-column: 2/3; +} + +article > img { + grid-column: span 3; +} \ No newline at end of file