From a15265113413aafbc6cca59f7d203c5ec0a20e1e Mon Sep 17 00:00:00 2001 From: cywong Date: Sat, 30 May 2026 16:26:46 +0100 Subject: [PATCH 1/8] initial draft --- Wireframe/index.html | 61 +++++++++++++++++++++++--------------------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..cf05b532a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,36 @@ - - - - Wireframe - - - -
-

Wireframe

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

Wireframe

+

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

+
+
+
+ +

Title

- This is the default, provided code and no changes have been made yet. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, + voluptates. Quisquam, voluptates.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + + + + + + \ No newline at end of file From 624b98822808db83de848fbb606da331051f6e7b Mon Sep 17 00:00:00 2001 From: cywong Date: Sat, 30 May 2026 16:44:46 +0100 Subject: [PATCH 2/8] Added the graphics files and revised the html file for it on 30 May 2026 --- Wireframe/branch.svg | 11 +++++++++ Wireframe/index.html | 54 +++++++++++++++++++++++++++++++++-------- Wireframe/readme.svg | 18 ++++++++++++++ Wireframe/style.css | 18 +++++++++++--- Wireframe/wireframe.svg | 18 ++++++++++++++ 5 files changed, 105 insertions(+), 14 deletions(-) create mode 100644 Wireframe/branch.svg create mode 100644 Wireframe/readme.svg create mode 100644 Wireframe/wireframe.svg diff --git a/Wireframe/branch.svg b/Wireframe/branch.svg new file mode 100644 index 000000000..2ccaf7d20 --- /dev/null +++ b/Wireframe/branch.svg @@ -0,0 +1,11 @@ + + + + Layer 1 + + + + + BRANCH? + + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index cf05b532a..3b370f1a2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,25 +10,59 @@
-

Wireframe

-

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

+

+
    +
  • + What is the purpose of a README file? +
    • +
  • + What is the purpose of a wireframe? +
    • +
  • + What is a branch in Git? +
    • +
+ This is the webpage to provide detail explanation for the above questions +

- -

Title

+ +

What is the purpose of a README file?

+

+ A README file is the foundational documentation for a software, dataset, or coding project. It serves as a + project's "front door," designed to help users quickly understand what the project does, how to install and use + it, and how to contribute +

+ Read + more +
+ +
+ +

What is the purpose of a wireframe?

+

+ Wireframes are the foundational blueprints of a website or app. Used early in the development process, they help + teams visualize structure, map user flows, and establish content hierarchy before committing to costly colors, + branding, or final UI design +

+ Read more +
+ +
+ +

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git + is master .

- Read more + Read more

- This is the default, provided code and no changes have been made yet. + By ChunyanWong HOMEWORK FOR WIREFRAME SOLUTION

diff --git a/Wireframe/readme.svg b/Wireframe/readme.svg new file mode 100644 index 000000000..868317bf7 --- /dev/null +++ b/Wireframe/readme.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + README? + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..16846431c 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,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { position: fixed; bottom: 0; text-align: center; } + /* ====== 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 +71,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 +88,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 diff --git a/Wireframe/wireframe.svg b/Wireframe/wireframe.svg new file mode 100644 index 000000000..abe5ed549 --- /dev/null +++ b/Wireframe/wireframe.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + WIREFRAME? + + \ No newline at end of file From 94bd6abc36173dfd87cee54c068cbbe11849d5f3 Mon Sep 17 00:00:00 2001 From: cywong Date: Thu, 4 Jun 2026 00:10:41 +0100 Subject: [PATCH 3/8] Changed the index.html file and style.css file for the comments Changed the html file with +
-
- +
+ Illustration of a README markdown document

What is the purpose of a README file?

A README file is the foundational documentation for a software, dataset, or coding project. It serves as a project's "front door," designed to help users quickly understand what the project does, how to install and use - it, and how to contribute + it, and how to contribute.

- Read - more + Read more
-
- +
+ Illustration of a website user interface wireframe

What is the purpose of a wireframe?

- Wireframes are the foundational blueprints of a website or app. Used early in the development process, they help - teams visualize structure, map user flows, and establish content hierarchy before committing to costly colors, - branding, or final UI design + Wireframes are the foundational blueprints of a website or app. Used early in the development process, + they help teams visualize structure, map user flows, and establish content hierarchy before committing to costly + colors, branding, or final UI design.

- Read more + Read more
-
- +
+ Diagram showing Git branches diverging from a main commit history

What is a branch in Git?

- A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git - is master . + A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name + in Git is typically master or main.


- Read more + Read more
+
-

- By ChunyanWong HOMEWORK FOR WIREFRAME SOLUTION -

+

By ChunyanWong | HOMEWORK FOR WIREFRAME SOLUTION

+ \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index 16846431c..54eecd441 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -33,7 +33,7 @@ body { font: var(--font); } -a { +.hyperlink { padding: var(--space); border: var(--line); max-width: fit-content; @@ -49,13 +49,8 @@ svg { 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; -} - footer { - position: fixed; + position: relative; bottom: 0; text-align: center; } @@ -68,6 +63,8 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); @@ -96,4 +93,17 @@ article { >img { grid-column: span 3; } + + + h2 { + text-align: left; + vertical-align: top; + } + + td { + padding: var(--space); + max-width: fit-content; + vertical-align: top; + } + } \ No newline at end of file From f8f7b1548c07095341a4dfb6500d8267c0bdf428 Mon Sep 17 00:00:00 2001 From: cywong Date: Thu, 4 Jun 2026 09:07:21 +0100 Subject: [PATCH 4/8] Fixed the issues by following the recommendation replace the
with css margin correct the space in the href fixed the footer so that it can be displayed at the bottom of the page --- Wireframe/index.html | 19 +++++++++---------- Wireframe/style.css | 23 ++++++++++++++++++++--- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d97800387..67e66659e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -11,10 +11,10 @@
-

Webpage Explanation for Key Concept Questions

+

Webpage Explanation for Key Concept Questions