From 5844ba1d4f1879045c0b96296758c82566da172a Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Mon, 1 Jun 2026 11:08:06 +0100 Subject: [PATCH 1/6] Add page heading and introduction --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..fbfe8237a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,9 +8,9 @@
-

Wireframe

+

Essential Developer Concepts

- This is the default, provided code and no changes have been made yet. + Learn about README files, wireframes, and Git branches — three important concepts used in web development.

From 21dd6af601d09cabfa9dc7aa88cadcb30573b591 Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Mon, 1 Jun 2026 11:33:41 +0100 Subject: [PATCH 2/6] Add Readme article content --- Wireframe/index.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index fbfe8237a..0b27e5ef4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -15,13 +15,14 @@

Essential Developer Concepts

- -

Title

+

What is a README File?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is usually the first document developers read when visiting a project. It explains what the project does, + how to install it, and how to use it effectively.

- Read more + Example of a README File + Read more
From 4037f2b5c220cbb802b80c1f2acc609b0d9097ac Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Mon, 1 Jun 2026 12:02:52 +0100 Subject: [PATCH 3/6] Add wireframe article --- Wireframe/index.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0b27e5ef4..2fd4da19e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -24,10 +24,21 @@

What is a README File?

alt="Example of a README File" /> Read more + +
+

What is a Wireframe?

+

+ A wireframe is a simple visual blueprint used to plan the layout and structure of a webpage before any code is written. + It helps designers and developers organize content and user experience. +

+ Wireframe_image + Read more +
+
From fb0524000877c7e25dddbd440df68cd3fe57f383 Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Mon, 1 Jun 2026 21:21:48 +0100 Subject: [PATCH 4/6] Add Git Branch article --- Wireframe/index.html | 100 +++++++++++++++++++++++++++++-------------- 1 file changed, 67 insertions(+), 33 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2fd4da19e..07bd6e315 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,45 +1,79 @@ - - - - Wireframe - - - -
-

Essential Developer Concepts

+ + + + + Wireframe + + + + +
+

Essential Developer Concepts

+

+ Learn about README files, wireframes, and Git branches — three important concepts used in web development. +

+
+
+
+ + README_file Image + +

What is a README File?

- Learn about README files, wireframes, and Git branches — three important concepts used in web development. + A README file is usually the first document developers read when visiting a project. It explains what the + project does, + how to install it, and how to use it effectively.

-
-
-
-

What is a README File?

-

- A README file is usually the first document developers read when visiting a project. It explains what the project does, - how to install it, and how to use it effectively. -

- Example of a README File - Read more -
+ + Read + more + + + +
+ + Wireframe_image +

What is a Wireframe?

- A wireframe is a simple visual blueprint used to plan the layout and structure of a webpage before any code is written. + A wireframe is a simple visual blueprint used to plan the layout and structure of a webpage before any code is + written. It helps designers and developers organize content and user experience.

- Wireframe_image - Read more + + Read more +
-
-
-

- Made by Abid Akhtar as a requirement for Intro to Programing Course May_2026. -

-
- - +
+ Git_Branch Image + +

What is a Git Branch?

+ +

A Git branch allows developers to work on new features and fixes without affecting the main version of a + project. It + helps teams collaborate safely and manage changes more effectively.

+ + Read more + +
+ + + +
+

+ Made by Abid Akhtar as a requirement for Intro to Programing Course May_2026. +

+
+ + + \ No newline at end of file From d91b2abd156ef36aba87d1b95b48f483dbd689a4 Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Mon, 1 Jun 2026 22:29:24 +0100 Subject: [PATCH 5/6] Add Css layout --- Wireframe/index.html | 12 ++++++------ Wireframe/style.css | 31 ++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 07bd6e315..b7fe26072 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -19,7 +19,7 @@

Essential Developer Concepts

@@ -40,7 +40,7 @@

What is a README File?

Wireframe_image + alt="Wireframe layout example">

What is a Wireframe?

@@ -49,13 +49,13 @@

What is a Wireframe?

It helps designers and developers organize content and user experience.

- Read more + Read more
Git_Branch Image + alt="Image showing Git branches">

What is a Git Branch?

@@ -63,7 +63,7 @@

What is a Git Branch?

project. It helps teams collaborate safely and manage changes more effectively.

- Read more + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..7aa2a3b97 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ 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 { @@ -31,16 +32,19 @@ body { color: var(--ink); font: var(--font); } + 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/ @@ -49,11 +53,14 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { position: fixed; bottom: 0; text-align: center; + width: 100%; } + /* ====== 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 @@ -65,10 +72,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*: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. @@ -80,10 +89,26 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; + width: 100%; + height: 250px; + object-fit: cover; } } + +section { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +header { + text-align: center; + padding: 20px; +} \ No newline at end of file From bfbe904dfbcea08499e4c047a99cb251a9e53b49 Mon Sep 17 00:00:00 2001 From: Abid Akhtar Date: Tue, 2 Jun 2026 11:16:02 +0100 Subject: [PATCH 6/6] Center article section in grid layout --- Wireframe/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 7aa2a3b97..b9dbe2194 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -97,12 +97,13 @@ article { >img { grid-column: span 3; width: 100%; - height: 250px; object-fit: cover; } } section { + + grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;