From 2af122abb684d14d545a32cda3ebc17df5ff372d Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 08:00:01 +0100 Subject: [PATCH 1/4] change the html and css to look same to wireframe --- Wireframe/index.html | 20 +++++++++++++++++++- Wireframe/style.css | 14 +++++++++++--- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..a67482584 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -23,10 +23,28 @@

Title

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..9c2a61f14 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,10 +26,15 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ -body { + + body { background: var(--paper); color: var(--ink); font: var(--font); + justify-items: center; + text-align: center; + display: grid; + } a { padding: var(--space); @@ -41,6 +46,9 @@ svg { width: 100%; object-fit: cover; } +p { + padding: 0 0 30px 0; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,9 +58,9 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; + width: 100%; text-align: center; + background-color: #ccc; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. From 7dfbf5ba595393f4caaf3063a30a7ceacc881d14 Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 09:25:22 +0100 Subject: [PATCH 2/4] add questions, answer and images --- Wireframe/index.html | 31 +++++++++++++++++-------------- Wireframe/style.css | 6 ++++++ 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a67482584..113d7476b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,36 +8,39 @@
-

Wireframe

+

Web Development Foundation

- This is the default, provided code and no changes have been made yet. + There are some frequently asked questions for beginner developers.

- -

Title

+
+ +
+

1. What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.

Read more
- -

Title

+
+ +
+

2. What is the purpose of a wireframe?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.

Read more
- -

Title

+
+ +
+

3. What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.

Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index 9c2a61f14..ea5c2cc55 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -49,6 +49,12 @@ svg { p { padding: 0 0 30px 0; } +.image-wrapper img { + width: 100%; + + /* 1:1 aspect ratio for square */ + aspect-ratio: 16 / 9; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ From 446677041223401f913d59f3a063cb77c485b682 Mon Sep 17 00:00:00 2001 From: lintsang Date: Sun, 24 May 2026 09:28:22 +0100 Subject: [PATCH 3/4] add links to each article --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 113d7476b..22246af3e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -22,7 +22,7 @@

1. What is the purpose of a README file?

README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.

- Read more + Read more
@@ -32,7 +32,7 @@

2. What is the purpose of a wireframe?

Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.

- Read more + Read more
@@ -42,7 +42,7 @@

3. What is a branch in Git?

A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.

- Read more + Read more