Skip to content

Commit 624b988

Browse files
cywong-devcywong-dev
committed
Added the graphics files and revised the html file for it on 30 May 2026
1 parent a152651 commit 624b988

5 files changed

Lines changed: 105 additions & 14 deletions

File tree

‎Wireframe/branch.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎Wireframe/index.html‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,59 @@
1010

1111
<body>
1212
<header>
13-
<h1>Wireframe</h1>
14-
<p>
15-
This is the default, provided code and no changes have been made yet.
16-
</p>
13+
<h1>
14+
<ul>
15+
<li>
16+
What is the purpose of a README file?
17+
</li>
18+
<li>
19+
What is the purpose of a wireframe?
20+
</li>
21+
<li>
22+
What is a branch in Git?
23+
</li>
24+
</ul>
25+
This is the webpage to provide detail explanation for the above questions
26+
</h1>
1727
</header>
1828
<main>
1929
<article>
20-
<img src="placeholder.svg" alt="" />
21-
<h2>Title</h2>
30+
<img src="readme.svg" alt="" />
31+
<h2>What is the purpose of a README file?</h2>
32+
<p>
33+
A README file is the foundational documentation for a software, dataset, or coding project. It serves as a
34+
project's "front door," designed to help users quickly understand what the project does, how to install and use
35+
it, and how to contribute
36+
</p>
37+
<a
38+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
39+
more</a>
40+
</article>
41+
42+
<article>
43+
<img src="wireframe.svg" alt="" />
44+
<h2>What is the purpose of a wireframe?</h2>
45+
<p>
46+
Wireframes are the foundational blueprints of a website or app. Used early in the development process, they help
47+
teams visualize structure, map user flows, and establish content hierarchy before committing to costly colors,
48+
branding, or final UI design
49+
</p>
50+
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
51+
</article>
52+
53+
<article>
54+
<img src="branch.svg" alt="" />
55+
<h2>What is a branch in Git?</h2>
2256
<p>
23-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
24-
voluptates. Quisquam, voluptates.
57+
A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git
58+
is master .
2559
</p>
26-
<a href="">Read more</a>
60+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
2761
</article>
2862
</main>
2963
<footer>
3064
<p>
31-
This is the default, provided code and no changes have been made yet.
65+
By ChunyanWong HOMEWORK FOR WIREFRAME SOLUTION
3266
</p>
3367
</footer>
3468
</body>

‎Wireframe/readme.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎Wireframe/style.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ As well as useful links to learn more */
2424
--line: 1px solid;
2525
--container: 1280px;
2626
}
27+
2728
/* ====== Base Elements ======
2829
General rules for basic HTML elements in any context */
2930
body {
3031
background: var(--paper);
3132
color: var(--ink);
3233
font: var(--font);
3334
}
35+
3436
a {
3537
padding: var(--space);
3638
border: var(--line);
3739
max-width: fit-content;
3840
}
41+
3942
img,
4043
svg {
4144
width: 100%;
4245
object-fit: cover;
4346
}
47+
4448
/* ====== Site Layout ======
4549
Setting the overall rules for page regions
4650
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,11 +53,13 @@ main {
4953
max-width: var(--container);
5054
margin: 0 auto calc(var(--space) * 4) auto;
5155
}
56+
5257
footer {
5358
position: fixed;
5459
bottom: 0;
5560
text-align: center;
5661
}
62+
5763
/* ====== Articles Grid Layout ====
5864
Setting the rules for how articles are placed in the main element.
5965
Inspect this in Devtools and click the "grid" button in the Elements view
@@ -65,10 +71,12 @@ main {
6571
display: grid;
6672
grid-template-columns: 1fr 1fr;
6773
gap: var(--space);
68-
> *:first-child {
74+
75+
>*:first-child {
6976
grid-column: span 2;
7077
}
7178
}
79+
7280
/* ====== Article Layout ======
7381
Setting the rules for how elements are placed in the article.
7482
Now laying out just the INSIDE of the repeated card/article design.
@@ -80,10 +88,12 @@ article {
8088
text-align: left;
8189
display: grid;
8290
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
91+
92+
>* {
8493
grid-column: 2/3;
8594
}
86-
> img {
95+
96+
>img {
8797
grid-column: span 3;
8898
}
89-
}
99+
}

‎Wireframe/wireframe.svg‎

Lines changed: 18 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)