From 78ce0e9348f376b592f12ce711fa72fcb450b38a Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Sun, 11 May 2025 08:54:19 +0100 Subject: [PATCH 1/7] Added 3 articles about README, wireframe, and Git branch --- Wireframe/index.html | 53 ++++++++++++++++++++++++++++++-------------- 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f9004a8b4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,45 @@
-

Wireframe

+

Understanding README, Wireframes, and Git Branches

+

+ Learn about the essential tools used by developers to plan, document, and collaborate in web projects. +

+
+ +
+
+ README illustration +

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + A README file explains what your project is, how to install and use it, and any other important info.

- -
-
- -

Title

-

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

- Read more -
-
-
+ +
+ Wireframe illustration +

What is the purpose of a wireframe?

- This is the default, provided code and no changes have been made yet. + A wireframe is a simple sketch of your website layout, used to plan structure before building it.

- + Learn more +
+ +
+ Git branch illustration +

What is a branch in Git?

+

+ A branch in Git lets you make changes to your code without changing the main project. It's great for testing features. +

+ Learn more +
+
+ + From 43f3ec7e26811e8c2b72ffe9073f85ba5266c7e0 Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Tue, 20 May 2025 12:56:45 +0100 Subject: [PATCH 2/7] Understanding README, Wireframes, and Git Branches --- Wireframe/index.html | 56 ++++++++++++++++++++++++++++++-------------- 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..4c6533036 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -7,27 +7,47 @@ -
-

Wireframe

+
+

Understanding README, Wireframes, and Git Branches

+

+ Learn about the essential tools used by developers to plan, document, and collaborate in web projects. +

+
+ +
+
+ README illustration +

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + A README file explains what your project is, how to install and use it, and any other important info.

-
-
-
- -

Title

-

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

- Read more -
-
-
+ Learn more + + +
+ Wireframe illustration +

What is the purpose of a wireframe?

- This is the default, provided code and no changes have been made yet. + A wireframe is a simple sketch of your website layout, used to plan structure before building it.

-
+ Learn more + + +
+ Git branch illustration +

What is a branch in Git?

+

+ A branch in Git lets you make changes to your code without changing the main project. It's great for testing features. +

+ Learn more +
+ + +
+

+ Built as part of a wireframe and Git learning project. +

+
+ From 806c062a97cd901bdcda7343d7dffe2988d1c858 Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Sun, 1 Jun 2025 12:51:33 +0100 Subject: [PATCH 3/7] center header elements --- Wireframe/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index f9004a8b4..5acf929fa 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,10 +8,12 @@
+

Understanding README, Wireframes, and Git Branches

Learn about the essential tools used by developers to plan, document, and collaborate in web projects.

+
From 2e271201810fa8710fd0f4723756068e1eaa28af Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Sun, 1 Jun 2025 19:59:14 +0100 Subject: [PATCH 4/7] Refactored header to use CSS for centering; removed obsolete
tags. --- Wireframe/index.html | 72 +++++++++++++++++++++----------------------- 1 file changed, 35 insertions(+), 37 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5acf929fa..acaca09ee 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -7,48 +7,46 @@ -
-
-

Understanding README, Wireframes, and Git Branches

-

- Learn about the essential tools used by developers to plan, document, and collaborate in web projects. -

-
-
- -
-
- README illustration -

What is the purpose of a README file?

+
+

Understanding README, Wireframes, and Git Branches

- A README file explains what your project is, how to install and use it, and any other important info. + Learn about the essential tools used by developers to plan, document, and collaborate in web projects.

- Learn more -
+ -
- Wireframe illustration -

What is the purpose of a wireframe?

-

- A wireframe is a simple sketch of your website layout, used to plan structure before building it. -

- Learn more -
+
+
+ README illustration +

What is the purpose of a README file?

+

+ A README file explains what your project is, how to install and use it, and any other important info. +

+ Learn more +
-
- Git branch illustration -

What is a branch in Git?

+
+ Wireframe illustration +

What is the purpose of a wireframe?

+

+ A wireframe is a simple sketch of your website layout, used to plan structure before building it. +

+ Learn more +
+ +
+ Git branch illustration +

What is a branch in Git?

+

+ A branch in Git lets you make changes to your code without changing the main project. It's great for testing features. +

+ Learn more +
+
+ +

- A branch in Git lets you make changes to your code without changing the main project. It's great for testing features. + Built as part of a wireframe and Git learning project.

- Learn more - -
- -
-

- Built as part of a wireframe and Git learning project. -

-
+ From 9d136c6ec783b45f2187f20405cff573381d4a7b Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Sun, 1 Jun 2025 20:00:05 +0100 Subject: [PATCH 5/7] Refactored header to use CSS for centering; removed obsolete
tags. --- Wireframe/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..8d466ea72 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,3 +87,6 @@ article { grid-column: span 3; } } +.centered-header { + text-align: center; +} From 205bae134ed27ac2c2baa22a49c35172eff71035 Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Fri, 3 Oct 2025 14:06:58 +0100 Subject: [PATCH 6/7] Manchester | ITP-Sep-2025 | Sofayas Solomon | Sprint 1 | Wireframe --- Wireframe/index.html | 41 +++++++++++++++++------ Wireframe/style.css | 80 ++++++++++++++++---------------------------- 2 files changed, 58 insertions(+), 63 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..c1a17a51c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -7,27 +7,46 @@ -
-

Wireframe

+
+

Understanding README, Wireframes, and Git Branches

- This is the default, provided code and no changes have been made yet. + Learn about the essential tools used by developers to plan, document, and collaborate in web projects.

+
- -

Title

+ README illustration +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what your project is, how to install and use it, and any other important info.

- Read more + Learn more +
+ +
+ Wireframe illustration +

What is the purpose of a wireframe?

+

+ A wireframe is a simple sketch of your website layout, used to plan structure before building it. +

+ Learn more +
+ +
+ Git branch illustration +

What is a branch in Git?

+

+ A branch in Git lets you make changes to your code without changing the main project. It's great for testing features. +

+ Learn more
+
-

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

+

Built as part of a wireframe and Git learning project.

+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d3f52756c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,21 +1,3 @@ -/* 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 */ - -/* ====== 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); @@ -24,66 +6,60 @@ 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 { background: var(--paper); color: var(--ink); font: var(--font); + margin: 0; } + 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; -} -footer { - position: fixed; - bottom: 0; - 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. -*/ + +main > *:first-child { + grid-column: span 2; +} + 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; +} + +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + background: #eee; + padding: var(--space); } From c774ecf52d7f62f058f01a18587e5144189a09f0 Mon Sep 17 00:00:00 2001 From: Sofayas Solomon Date: Fri, 3 Oct 2025 19:09:07 +0100 Subject: [PATCH 7/7] fixd footer error --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 06b2ad560..21c91aaf7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -43,9 +43,9 @@

What is a branch in Git?

-