From 9e2f9bd8e5d612382e1781f477cd5b43b94a290a Mon Sep 17 00:00:00 2001 From: marthak1 Date: Mon, 12 Jan 2026 20:43:23 +0000 Subject: [PATCH 01/13] feat: Innitial scaffolding of three article sections --- Wireframe/index.html | 45 ++++++++++++++++++++++++++++++++++++++++++-- Wireframe/style.css | 1 + 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..0d3ee3268 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,14 +16,31 @@

Wireframe

-

Title

+

What is the purpose of a README file?

+

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

+ Read more +
+
+ +

What is the purpose of a wireframe?

+

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

+ Read more +
+
+ +

What is a branch in Git?

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

Read more
-
+ + + + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..ad70b6f71 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,6 +30,7 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + } a { padding: var(--space); From 0ac1b1d5f92f24e6d01ceff3cf3c8959807f993b Mon Sep 17 00:00:00 2001 From: marthak1 Date: Mon, 12 Jan 2026 21:08:02 +0000 Subject: [PATCH 02/13] refactor: updated header and footer texts --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0d3ee3268..e76f30971 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,7 +10,7 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + The purpose of this project is to take a wireframe and express it in web code.

@@ -43,7 +43,7 @@

What is a branch in Git?

- This is the default, provided code and no changes have been made yet. + Website made by Martha 😁

From ebbd556aff9087baac07ad0a6f45fc766bbe8ef3 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Mon, 12 Jan 2026 21:44:27 +0000 Subject: [PATCH 03/13] feat: added actual text and link to first article --- Wireframe/index.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index e76f30971..0179267e6 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -18,10 +18,13 @@

Wireframe

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file gives readers a quick, clear understanding of a project. + It explains what the project does, why it exists, and how to use it. + In most cases, it includes setup steps, usage examples, and guidance for anyone who wants to contribute. + It’s essentially the project’s introduction and user manual in one place. +

- Read more + Read more
From ce73218d0bcc5506d4f81339d95d81a56a7deb53 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Mon, 12 Jan 2026 21:54:17 +0000 Subject: [PATCH 04/13] feat: added actual text and link to second article --- Wireframe/index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0179267e6..d33afe6ba 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,10 +30,12 @@

What is the purpose of a README file?

What is the purpose of a wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe shows the basic layout of a website or app before any design work begins. + Its purpose is to map out structure, content placement, and user flow so teams can agree + on functionality early, avoid costly changes later, and create a clear blueprint for the final design. +

- Read more + Read more
From 4af0e84eb26719e4538d98f0a287a22dcffd5ad6 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Mon, 12 Jan 2026 22:04:20 +0000 Subject: [PATCH 05/13] feat: added actual text and link to third article --- Wireframe/index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d33afe6ba..43f59fecc 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -41,10 +41,11 @@

What is the purpose of a wireframe?

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Git is a distributed version control system that tracks changes + in files and helps multiple people collaborate on the same project efficiently. + It lets developers save versions of their work, switch between them, and merge contributions without overwriting each other’s code.

- Read more + Read more
+
+

+ © 2026 Website made by Martha ❤️ +

+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index d3e08b4af..6028fccbe 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 { @@ -35,50 +36,53 @@ body { padding: var(--body-space); } -a{ ---text-color: white; + +a { + --text-color: white; } + a { color: var(--text-color); padding: var(--space); max-width: fit-content; text-decoration: none; border-radius: 10px; - background-color:#cf2e2e; - font-weight:bold; - - - + background-color: #cf2e2e; + font-weight: bold; } + 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/ */ -header{ +header { text-align: center; color: #cf2e2e; - + /* cadetblue */ } -h1{ - text-transform: uppercase; + +h1 { + text-transform: uppercase; } -p{ +p { --paragraph-font: 100%/2 Arial, Helvetica, sans-serif; color: #6c6c89; font: var(--paragraph-font); } + main { margin: 0 auto calc(var(--space) * 4) auto; - + } + footer { position: fixed; bottom: 0; @@ -86,15 +90,18 @@ footer { text-align: center; border-top: var(--line); width: 100%; - background:oklch(0.07 0 0); + background: oklch(0.07 0 0); padding: 1rem; - } -footer{ - - > *:first-child{color: azure; - font-weight: bold;} + +footer { + + >*:first-child { + color: azure; + font-weight: bold; + } } + /* ====== 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 @@ -106,10 +113,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. @@ -121,10 +130,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } -} +} \ No newline at end of file From 2e14c323a6e2d1cbec346b2624d5aedbfea14a94 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Sat, 17 Jan 2026 22:21:00 +0000 Subject: [PATCH 13/13] refactor: refactored for SEO --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index b207b4e9e..4c7a5c133 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,6 +4,7 @@ + Wireframe @@ -25,8 +26,7 @@

What is the purpose of a README file?

In most cases, it includes setup steps, usage examples, and guidance for anyone who wants to contribute. It’s essentially the project’s introduction and user manual in one place.

- Read more + Read more