From 831349e07a24197967ba4e3db5d05101c53ccbf3 Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Mon, 26 Jan 2026 11:52:41 +0000 Subject: [PATCH 1/4] Complete wireframe onbaording task --- Wireframe/index.html | 72 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..8bdee727e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,73 @@ - Wireframe + Wireframe Exercise + -
-

Wireframe

-

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

-
+ +
+

Web Development Basics

+

+ This page explains the purpose of a README file, a wireframe, and a Git + branch. +

+
+ +
+ Illustration representing a README file +

Purpose of a README file

+

+ A README file explains what a project is, how it works, and how to use + it. It helps other developers understand the project quickly. +

+ + Read more + +
+ +
+ Illustration showing a wireframe layout +

Purpose of a wireframe

+

+ A wireframe is a simple visual plan of a webpage. It shows the layout + and structure before colours, images, or styling are added. +

+ + Read more + +
+
- -

Title

+ Illustration representing a Git branch +

What is a Git branch?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A Git branch allows developers to work on changes safely without + affecting the main code until the work is ready.

- Read more + + Read more +
+ From ed402d82c199815fbb3b4d19daf7621ba07de994 Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Mon, 9 Feb 2026 10:27:46 +0000 Subject: [PATCH 2/4] Complete task requiremnts --- Wireframe/index.html | 128 ++++++++++++++++++++++++------------------- 1 file changed, 71 insertions(+), 57 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8bdee727e..637984268 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,73 +3,87 @@ - Wireframe Exercise + Wireframe Task + -
- -
-

Web Development Basics

-

- This page explains the purpose of a README file, a wireframe, and a Git - branch. -

-
+
+

Web Development Fundamentals

+

+ This page explains README files, wireframes, and Git branches using a + simple wireframe layout. +

+
-
- Illustration representing a README file -

Purpose of a README file

-

- A README file explains what a project is, how it works, and how to use - it. It helps other developers understand the project quickly. -

- - Read more - -
+
+
+ +
+ Illustration representing a README file +

What is a README file?

+

+ A README file explains what a project is about, how to use it, and + any important information someone needs before contributing to the + project. +

+ + Read more + +
-
- Illustration showing a wireframe layout -

Purpose of a wireframe

-

- A wireframe is a simple visual plan of a webpage. It shows the layout - and structure before colours, images, or styling are added. -

- - Read more - -
+ +
+ Example of a webpage wireframe layout +

What is a wireframe?

+

+ A wireframe is a simple visual guide that shows the structure and + layout of a webpage before design and development begins. +

+ + Read more + +
-
- Illustration representing a Git branch -

What is a Git branch?

-

- A Git branch allows developers to work on changes safely without - affecting the main code until the work is ready. -

- - Read more - -
+ +
+ Diagram representing Git branches +

What is a Git branch?

+

+ A Git branch allows developers to work on new features or fixes + without affecting the main version of a project. +

+ + Read more + +
+
-

© 2026 Web Basics

+

© 2026 CYF Wireframe Task

From 739b440a4304fcc53e8df9885c83bfe32ace89f5 Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Thu, 19 Feb 2026 14:31:38 +0000 Subject: [PATCH 3/4] Fix HTML validation warnings, remove unnecessary section wrapper, adjust layout to match wireframe, and prevent footer overlap --- Wireframe/index.html | 120 +++++++++++++++++++++---------------------- Wireframe/style.css | 93 +++++++++++++++------------------ 2 files changed, 100 insertions(+), 113 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 637984268..42b2c7b7b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,14 +1,14 @@ - - + + Wireframe Task - + > + @@ -21,65 +21,63 @@

Web Development Fundamentals

-
- -
- Illustration representing a README file -

What is a README file?

-

- A README file explains what a project is about, how to use it, and - any important information someone needs before contributing to the - project. -

- - Read more - -
+ +
+ Illustration representing a README file +

What is a README file?

+

+ A README file explains what a project is about, how to use it, and + any important information someone needs before contributing to the + project. +

+ + Read more + +
- -
- Example of a webpage wireframe layout -

What is a wireframe?

-

- A wireframe is a simple visual guide that shows the structure and - layout of a webpage before design and development begins. -

- - Read more - -
+ +
+ Example of a webpage wireframe layout +

What is a wireframe?

+

+ A wireframe is a simple visual guide that shows the structure and + layout of a webpage before design and development begins. +

+ + Read more + +
- -
- Diagram representing Git branches -

What is a Git branch?

-

- A Git branch allows developers to work on new features or fixes - without affecting the main version of a project. -

- - Read more - -
-
+ +
+ Diagram representing Git branches +

What is a Git branch?

+

+ A Git branch allows developers to work on new features or fixes + without affecting the main version of a project. +

+ + Read more + +