From a15265113413aafbc6cca59f7d203c5ec0a20e1e Mon Sep 17 00:00:00 2001 From: cywong Date: Sat, 30 May 2026 16:26:46 +0100 Subject: [PATCH 1/2] 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/2] 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