From 0960fef00f25e6723d42ff86c923509a3d580578 Mon Sep 17 00:00:00 2001 From: Lax Ra Date: Tue, 3 Jun 2025 13:43:04 +0100 Subject: [PATCH 1/9] Fix validator warnings and improve accessibility score to 100 --- Form-Controls/index.html | 130 +++++++++++++++++++++++++++++++-------- 1 file changed, 106 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..017e9886a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,109 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - + + + Product Pick Form Controls + + + + +
+

Product Pick

+
+ +
+
+

All fields are required. Please fill out your details and choose your t-shirt colour and size.

+ +
+ Confirm Your Details + +

+
+ +

+ +

+
+ +

+
+ +
+ Choose a colour: + +

+ +

+ +

+ +

+ +

+ +

+
+ +

+
+ +

+ +

+ +

+
+
+ + + From 66c39e73d4f04cb3c68fd22916404f185eacbd07 Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 22:27:36 +0100 Subject: [PATCH 2/9] test commit --- Wireframe/README.md | 1 + Wireframe/index.html | 70 ++++++++++------- Wireframe/style.css | 181 +++++++++++++++++++++++++------------------ 3 files changed, 147 insertions(+), 105 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..d691d5dcb 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -32,6 +32,7 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] The webpage is properly committed and pushed to a branch on GitHub. ## Resources +## Checking - [Wireframe](https://www.productplan.com/glossary/wireframe/) - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..056459140 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,45 @@ - - - - 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 Key Web Concepts + + + +
+

Understanding Key Web Concepts

+

A guide to README files, wireframes, and Git branches.

+
+ +
+
+
+ Illustration showing a README file on a computer screen +

What is the purpose of a README file?

+

The README file introduces and explains a project. It includes setup instructions, usage information, and other helpful context for contributors.

+ Learn More about README files
-
-
-

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

-
- + +
+ Wireframe sketch of a web page layout +

What is the purpose of a wireframe?

+

A wireframe is a visual guide for laying out a web page or app. It helps plan the structure and user interface before design and development begin.

+ Explore Wireframes for web design +
+ +
+ Diagram showing Git branches and merges +

What is a branch in Git?

+

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

+ Understand Git Branches with Atlassian guide +
+ +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..cd281212b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,118 @@ -/* 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 */ +/* Base Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Screen Reader Utility */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} -/* ====== 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; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ +/* Typography and Layout */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #f4f4f4; + color: #1a1a1a; + padding-bottom: 60px; +} + +header { + background: #004080; + color: #fff; + padding: 2rem; + text-align: center; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +header h1 { + font-size: 2rem; + margin-bottom: 0.5rem; } -img, -svg { - width: 100%; - object-fit: cover; + +header p { + font-size: 1rem; } -/* ====== 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; + padding: 2rem; +} + +.articles { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; } + +.card { + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + padding: 1rem; + max-width: 300px; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +.card img { + width: 100%; + max-width: 200px; + height: auto; + margin-bottom: 1rem; +} + +.card h2 { + font-size: 1.2rem; + margin: 1rem 0 0.5rem; + text-align: center; +} + +.card p { + font-size: 0.95rem; + margin-bottom: 1rem; + text-align: center; +} + +.card a { + text-decoration: none; + color: #fff; + background-color: #0073e6; + padding: 0.5rem 1rem; + border-radius: 4px; + transition: background 0.3s ease; +} + +.card a:hover, +.card a:focus { + background-color: #005bb5; + outline: 2px solid #000; + outline-offset: 2px; +} + +/* Footer */ footer { position: fixed; bottom: 0; + width: 100%; + background: #222; + color: white; text-align: center; + padding: 0.75rem; + font-size: 0.9rem; } -/* ====== 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; - } + +footer a { + color: #80d4ff; + text-decoration: underline; } From 6bcda68cf6aaa75a4178e924886978f6c641864b Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 22:36:02 +0100 Subject: [PATCH 3/9] test commit --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 056459140..0f0e04b21 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,7 +30,7 @@

What is the purpose of a wireframe?

- Diagram showing Git branches and merges + Diagram showing Git branches and merge

What is a branch in Git?

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

Understand Git Branches with Atlassian guide From 9800b8f39e8df83e2166b92229d3dadb07bbf185 Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 22:45:11 +0100 Subject: [PATCH 4/9] test commit --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0f0e04b21..056459140 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,7 +30,7 @@

What is the purpose of a wireframe?

- Diagram showing Git branches and merge + Diagram showing Git branches and merges

What is a branch in Git?

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

Understand Git Branches with Atlassian guide From 45cc646d13f6461e6e57139ab7d40d83224c225d Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 22:47:26 +0100 Subject: [PATCH 5/9] test commit --- Wireframe/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index cd281212b..4e467d528 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,7 +17,7 @@ border: 0; } -/* Typography and Layout */ +/* Typography & Layout */ body { font-family: Arial, sans-serif; line-height: 1.6; From 6e67dc8e562265a3ced71584f6fd959e6c58a8f6 Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 22:48:03 +0100 Subject: [PATCH 6/9] Test commit --- Wireframe/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 4e467d528..cd281212b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,7 +17,7 @@ border: 0; } -/* Typography & Layout */ +/* Typography and Layout */ body { font-family: Arial, sans-serif; line-height: 1.6; From b5193621e5911f6e73f10cdbb2122eb41947f0f6 Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 23:02:27 +0100 Subject: [PATCH 7/9] test commit --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 056459140..0f0e04b21 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,7 +30,7 @@

What is the purpose of a wireframe?

- Diagram showing Git branches and merges + Diagram showing Git branches and merge

What is a branch in Git?

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

Understand Git Branches with Atlassian guide From a696ec2371fea6359d81cd6619b08e0d4f631442 Mon Sep 17 00:00:00 2001 From: ind222 Date: Thu, 5 Jun 2025 23:03:38 +0100 Subject: [PATCH 8/9] test commit New Branch --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0f0e04b21..056459140 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,7 +30,7 @@

What is the purpose of a wireframe?

- Diagram showing Git branches and merge + Diagram showing Git branches and merges

What is a branch in Git?

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

Understand Git Branches with Atlassian guide From fce01104497f87d4d1a921fea57e278a22f77921 Mon Sep 17 00:00:00 2001 From: ind222 Date: Fri, 6 Jun 2025 09:02:23 +0100 Subject: [PATCH 9/9] test commit --- Wireframe/index.html | 80 +++++++++++++--------- Wireframe/style.css | 154 +++++++++++++++++++------------------------ 2 files changed, 115 insertions(+), 119 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 056459140..8738c03c8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,45 +1,63 @@ - - - - Understanding Key Web Concepts - + + + Wireframe + -
-

Understanding Key Web Concepts

-

A guide to README files, wireframes, and Git branches.

+
+

Learn about README files, wireframes, and Git branches

+

An introduction to important web development concepts

-
-
-
- Illustration showing a README file on a computer screen -

What is the purpose of a README file?

-

The README file introduces and explains a project. It includes setup instructions, usage information, and other helpful context for contributors.

- Learn More about README files -
+
+
+ +

What is the purpose of a README file?

+

A README file introduces and explains a project. It provides important details such as how to install, run, and contribute to the project. It helps other developers understand the project’s structure and purpose.

+ Read more +
-
- Wireframe sketch of a web page layout -

What is the purpose of a wireframe?

-

A wireframe is a visual guide for laying out a web page or app. It helps plan the structure and user interface before design and development begin.

- Explore Wireframes for web design -
+
+ +

What is the purpose of a wireframe?

+

A wireframe is a visual guide that represents the layout of a webpage. It helps developers and designers plan the structure and user experience before adding real content or styling.

+ Read more +
-
- Diagram showing Git branches and merges -

What is a branch in Git?

-

A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.

- Understand Git Branches with Atlassian guide -
-
+
+ +

What is a branch in Git?

+

A branch in Git is a separate line of development. It allows you to work on features without affecting the main project. Once your work is ready, you can merge the branch into the main codebase.

+ Read more +
-