From 3bf12fd4324181cb221bbe5ea426e1f6bc739655 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 19 Sep 2025 18:50:01 +0000 Subject: [PATCH 01/10] Dani_test_pr --- Wireframe/style.css | 162 +++++++++++++++++++++++--------------------- index.html | 88 ++++++++++++------------ 2 files changed, 128 insertions(+), 122 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bf4cbc740 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,95 @@ -/* 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 { + margin: 0; + font-family: Arial, sans-serif; + line-height: 1.6; +} -/* ====== 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; +header { + text-align: center; + padding: 2rem; + background-color: #f4f4f4; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); + +header h1 { + margin: 0; + font-size: 2rem; +} + +header p { + font-size: 1rem; + color: #555; +} + +.articles { + max-width: 1000px; + margin: 0 auto; + padding: 1rem; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +.feature { + margin-bottom: 2rem; } -img, -svg { + +.feature img { width: 100%; - object-fit: cover; + height: auto; + border-radius: 8px; +} + +.feature h2 { + margin-top: 0.5rem; +} + +.feature a { + display: inline-block; + margin-top: 0.5rem; + padding: 0.5rem 1rem; + background: #333; + color: white; + text-decoration: none; + border-radius: 4px; } -/* ====== 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; + +.row { + display: flex; + gap: 1rem; } + +.row article { + flex: 1; + background: #fafafa; + padding: 1rem; + border: 1px solid #ddd; + border-radius: 8px; +} + +.row img { + width: 100%; + height: auto; + border-radius: 8px; +} + +.row h2 { + margin-top: 0.5rem; +} + +.row a { + display: inline-block; + margin-top: 0.5rem; + padding: 0.5rem 1rem; + background: #333; + color: white; + text-decoration: none; + border-radius: 4px; +} + footer { + background: #222; + color: white; + text-align: center; + padding: 1rem; 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. -*/ -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; - } + left: 0; + width: 100%; } diff --git a/index.html b/index.html index 80aa49666..69c2dee8d 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,46 @@ - - - - Coursework - - - -

🧐 CYF Coursework Disposable Branch Previews

-
-
    -
  1. -

    Project 1: Wireframe

    -

    - Mentors: - open the assignment in a tab -

    -
    2. -
  2. -

    Project 2: Form Controls

    -

    - Mentors: - open the assignment in a tab -

    -
    3. -
-
- - - + + + + Learning Git and Development Tools + + + +
+

Learning Git and Development Tools

+

Understanding README files, wireframes, and Git branches

+
+ +
+
+
+ README file example +

What is the purpose of a README file?

+

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

+ Read More +
+ +
+
+ Wireframe sketch +

What is the purpose of a wireframe?

+

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

+ Read More +
+ +
+ Git branching diagram +

What is a branch in Git?

+

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

+ Read More +
+
+
+
+ + + + \ No newline at end of file From 77f3d3dcde4ff405dc454af2b60ac1c54e4fdc9f Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 16:36:10 +0100 Subject: [PATCH 02/10] Update index.html in wireframe folder --- Wireframe/index.html | 71 ++++++++++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 29 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..ff0bb0445 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,46 @@ - - - - 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 + + + + Learning Git and Development Tools + + + +
+

Learning Git and Development Tools

+

Understanding README files, wireframes, and Git branches

+
+ +
+
+
+ README file example +

What is the purpose of a README file?

+

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

+ Read More
-
-
-

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

-
- + +
+
+ Wireframe sketch +

What is the purpose of a wireframe?

+

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

+ Read More +
+ +
+ Git branching diagram +

What is a branch in Git?

+

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

+ Read More +
+
+ +
+ +
+

© 2025 Learning Git and Development Tools | Contact: info@example.com

+
+ From cc044e513974e281b76fb4c7d4acb07de3e92426 Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 16:39:47 +0100 Subject: [PATCH 03/10] restored index.html in module folder --- index.html | 88 +++++++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 69c2dee8d..80aa49666 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,46 @@ - - - - Learning Git and Development Tools - - - -
-

Learning Git and Development Tools

-

Understanding README files, wireframes, and Git branches

-
- -
-
-
- README file example -

What is the purpose of a README file?

-

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

- Read More -
- -
-
- Wireframe sketch -

What is the purpose of a wireframe?

-

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

- Read More -
- -
- Git branching diagram -

What is a branch in Git?

-

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

- Read More -
-
-
-
- -
-

© 2025 Learning Git and Development Tools | Contact: info@example.com

-
- - \ No newline at end of file + + + + Coursework + + + +

🧐 CYF Coursework Disposable Branch Previews

+
+
    +
  1. +

    Project 1: Wireframe

    +

    + Mentors: + open the assignment in a tab +

    +
    2. +
  2. +

    Project 2: Form Controls

    +

    + Mentors: + open the assignment in a tab +

    +
    3. +
+
+ + + From d0fdbc31134e885c8cac1bd8128afe3f98512acf Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 17:01:58 +0100 Subject: [PATCH 04/10] replaced placeholder with placeholder svg in image tag --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index ff0bb0445..180532806 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,7 +15,7 @@

Learning Git and Development Tools

- README file example + README file example

What is the purpose of a README file?

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

Read More @@ -23,14 +23,14 @@

What is the purpose of a README file?

- Wireframe sketch + Wireframe sketch

What is the purpose of a wireframe?

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

Read More
- Git branching diagram + Git branching diagram

What is a branch in Git?

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

Read More From 6d305554ce1bc0be9e2578a1ab446656e5cedfb7 Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 17:16:02 +0100 Subject: [PATCH 05/10] updated images and added alt attributes --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 180532806..c28eac6fb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,7 +15,7 @@

Learning Git and Development Tools

- README file example + scattered papers with documents spelled out in scrabble tiles

What is the purpose of a README file?

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

Read More @@ -23,14 +23,14 @@

What is the purpose of a README file?

- Wireframe sketch + Wireframe sketch

What is the purpose of a wireframe?

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

Read More
- Git branching diagram + Git branching diagram

What is a branch in Git?

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

Read More From d4f2065b031b6a40f8d73f72d8c9b0534077413d Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 17:19:14 +0100 Subject: [PATCH 06/10] changed readme img --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c28eac6fb..7ab62cd4a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,7 +15,7 @@

Learning Git and Development Tools

- scattered papers with documents spelled out in scrabble tiles + scattered papers with documents spelled out in scrabble tiles

What is the purpose of a README file?

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

Read More From b1ab30488e42447218bb03ccd4b4679846c2bc05 Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sat, 27 Sep 2025 17:22:30 +0100 Subject: [PATCH 07/10] Updated image source --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7ab62cd4a..95db09fa1 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -23,7 +23,7 @@

What is the purpose of a README file?

- Wireframe sketch + Wireframe sketch

What is the purpose of a wireframe?

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

Read More From d1f7518bc573610f3468313ffea00677516aa3b7 Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sun, 28 Sep 2025 14:29:36 +0000 Subject: [PATCH 08/10] enforced a stricter validation --- Wireframe/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/Wireframe/index.html b/Wireframe/index.html index 95db09fa1..eea1841c3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -37,6 +37,24 @@

What is a branch in Git?

+ + +
+

Order a T-shirt

+
+ + + +
+
From 9e6fbc7d514f90e983952551fc1b6c92a8be30ed Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sun, 28 Sep 2025 14:34:15 +0000 Subject: [PATCH 09/10] Updated line 35 --- Wireframe/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index eea1841c3..c4a59e736 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -32,7 +32,10 @@

What is the purpose of a wireframe?

Git branching diagram

What is a branch in Git?

-

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

+

A branch in Git is a separate line of development that allows you + to work on new features or bug fixes without affecting the main + codebase. Once changes are ready, branches can be merged back into + the main branch.

Read More
From 5335c5e5edf4737c52e2d08d400a113dd53e6cc2 Mon Sep 17 00:00:00 2001 From: danisoloo Date: Sun, 28 Sep 2025 14:42:46 +0000 Subject: [PATCH 10/10] Improved lighthouse to 100 --- Wireframe/index.html | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c4a59e736..1914167db 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,6 +4,7 @@ Learning Git and Development Tools + @@ -15,28 +16,31 @@

Learning Git and Development Tools

- scattered papers with documents spelled out in scrabble tiles + Scrabble tiles spelling out README on top of papers

What is the purpose of a README file?

A README file introduces and explains a project. It usually contains instructions on how to install, use, and contribute to the project. It helps others quickly understand the purpose and usage of your code.

- Read More + Read More
- Wireframe sketch + Notebook sketch showing a website wireframe layout

What is the purpose of a wireframe?

A wireframe is a visual guide that represents the skeletal framework of a webpage. It helps designers and developers plan the structure and layout before adding colors, images, and content.

- Read More + Read More
- Git branching diagram + 3D abstract image representing Git branching

What is a branch in Git?

A branch in Git is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. Once changes are ready, branches can be merged back into the main branch.

- Read More + Read More
@@ -52,10 +56,11 @@

Order a T-shirt

name="name" minlength="2" pattern="^(?!\s*$).+" + autocomplete="name" required title="Name must be at least 2 characters and not just spaces." /> - +