From 81eb43b2f4b46a444e219f2bef8d4c3ed89553f0 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:26:21 +0000 Subject: [PATCH 1/9] body layout use flexbox to set body layout and vertically center all direct children --- Wireframe/index.html | 82 +++++++++++++++++++++++++++----------------- Wireframe/style.css | 76 +++++++++++++++++++++------------------- 2 files changed, 91 insertions(+), 67 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..cd0fcbb08 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,53 @@ - + - - - - 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 -
-
- - + + + + 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 +
+
+ +

Title

+

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

+ Read more +
+
+ +

Title

+

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

+ Read more +
+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..1a8011f83 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,42 +17,46 @@ As well as useful links to learn more */ 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; + --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 */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: var(--paper); + color: var(--ink); + font: var(--font); + display: flex; + flex-direction: column; + align-items: center; } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } img, svg { - width: 100%; - object-fit: cover; + 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; + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + min-height: 0; } footer { - position: fixed; - bottom: 0; - text-align: center; + position: fixed; + bottom: 0; + text-align: center; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,12 +66,12 @@ 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; - } + 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. @@ -75,15 +79,15 @@ 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; - } + 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; + } } From 43681dfdf8c0461aa2c2ca965457ec50d539e848 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:28:16 +0000 Subject: [PATCH 2/9] center header text --- Wireframe/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 1a8011f83..23697a342 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -53,6 +53,10 @@ main { margin: 0 auto calc(var(--space) * 4) auto; min-height: 0; } + +header { + text-align: center; +} footer { position: fixed; bottom: 0; From 053af352095a6663c387f715608ae38114d08b4c Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:30:52 +0000 Subject: [PATCH 3/9] use reset to cancel out styles by user agent stylesheets --- Wireframe/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index 23697a342..7e60b02f5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,6 +16,13 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +/* a basic reset to user agent stylesheets */ +* { + margin: 0; + box-sizing: border-box; +} + :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); @@ -61,6 +68,8 @@ footer { position: fixed; bottom: 0; text-align: center; + border: 2px solid black; + min-width: 100%; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 17782a21abab3b143154f073c1dcaaf844f50ed8 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:36:06 +0000 Subject: [PATCH 4/9] Gap between body elements, and footer styling --- Wireframe/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 7e60b02f5..f3c015c66 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -40,6 +40,7 @@ body { display: flex; flex-direction: column; align-items: center; + gap: 2rem; } a { padding: var(--space); @@ -68,8 +69,11 @@ footer { position: fixed; bottom: 0; text-align: center; - border: 2px solid black; + border-top: 2px solid rgb(158, 158, 158); + padding: 1rem; min-width: 100%; + background-color: rgb(54, 53, 53); + color: white; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From d552db2179b0258ede3efed35fd406b5827fa26b Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:43:45 +0000 Subject: [PATCH 5/9] topic information --- Wireframe/index.html | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index cd0fcbb08..253f74dd0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -9,36 +9,39 @@

Wireframe

-

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

+

The essential tool to creating perfect web designs.

-

Title

+

The purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Quisquam, voluptates. Quisquam, voluptates. + A README file is the first source of information to guide + anyone who visits your repository. What the code does, how + to contribute, or how to install and use it.

Read more
-

Title

+

The purpose of a wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Quisquam, voluptates. Quisquam, voluptates. + A wireframe is used to express the layout of a visual medium + such as a newspaper, or web page. It helps designers and + programmers to get a simple overview of a design.

Read more
-

Title

+

What is a git branch

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Quisquam, voluptates. Quisquam, voluptates. + A git branch is a copy of the code in a git repository. + Branches are created so that developers can work seperately + on specific features. Once a feature is completed it is + merged into main. If the creation of a feature is not + sucessful, for example there are too many bugs, the branch + can be delete without affecting the main branch.

Read more
From 491c2e9cffdc0959fcdaf775ac0c8d3121affab5 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 21 Feb 2026 21:47:40 +0000 Subject: [PATCH 6/9] add margin to some p, h1, h2, as they were removed by CSS RESET --- Wireframe/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index f3c015c66..0aac7b044 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -52,6 +52,15 @@ svg { width: 100%; object-fit: cover; } +p { + margin-bottom: 0.5rem; +} +h1 { + margin-bottom: 1rem; +} +h2 { + margin-bottom: 0.8rem; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ From 932922e5e1cd6e8ce7debea1d3fb924c8e5b15c9 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 7 Mar 2026 00:20:09 +0000 Subject: [PATCH 7/9] alt text --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 253f74dd0..f0fc88735 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -13,7 +13,7 @@

Wireframe

- + placeholder

The purpose of a README file

A README file is the first source of information to guide From f4f2b2625e89cbc2e33710c49ba15416916ccfbf Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 7 Mar 2026 00:20:43 +0000 Subject: [PATCH 8/9] non-empty href, more descriptive text --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index f0fc88735..197a2f898 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,7 +20,7 @@

The purpose of a README file

anyone who visits your repository. What the code does, how to contribute, or how to install and use it.

- Read more + Read more about wireframes
From 2360e3b15dbf3617b3568d1b0ecbdc28ca463eaf Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Sat, 7 Mar 2026 18:54:13 +0000 Subject: [PATCH 9/9] Fix content grammar and typos --- Wireframe/index.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 197a2f898..9e4980b0e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,7 +20,7 @@

The purpose of a README file

anyone who visits your repository. What the code does, how to contribute, or how to install and use it.

- Read more about wireframes + Read more about README
@@ -30,27 +30,24 @@

The purpose of a wireframe

such as a newspaper, or web page. It helps designers and programmers to get a simple overview of a design.

- Read more + Read more about wireframing
-

What is a git branch

+

What is a Git branch

A git branch is a copy of the code in a git repository. - Branches are created so that developers can work seperately + Branches are created so that developers can work separately on specific features. Once a feature is completed it is merged into main. If the creation of a feature is not - sucessful, for example there are too many bugs, the branch - can be delete without affecting the main branch. + successful, for example there are too many bugs, the branch + can be deleted without affecting the main branch.

- Read more + Read more about Git