Skip to content

Commit 94bd6ab

Browse files
cywong-devcywong-dev
committed
Changed the index.html file and style.css file for the comments
Changed the html file with <nav> for better display Changed the css file to the footer control with relative position instead of fixed position
1 parent 624b988 commit 94bd6ab

2 files changed

Lines changed: 49 additions & 41 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,65 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Wireframe</title>
7+
<title>Wireframe Solution</title>
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010

1111
<body>
12+
1213
<header>
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>
14+
<h1 style="text-align: center">Webpage Explanation for Key Concept Questions</h1>
15+
<nav>
16+
<ul style="justify-content: center; display: flex; gap: var(--space);">
17+
<li><a href=" #readme">What is the purpose of a README file?</a></li>
18+
<li><a href="#wireframe">What is the purpose of a wireframe?</a></li>
19+
<li><a href="#git-branch">What is a branch in Git?</a></li>
2420
</ul>
25-
This is the webpage to provide detail explanation for the above questions
26-
</h1>
21+
</nav>
2722
</header>
23+
2824
<main>
29-
<article>
30-
<img src="readme.svg" alt="" />
25+
<article id="readme">
26+
<img src="readme.svg" alt="Illustration of a README markdown document" />
3127
<h2>What is the purpose of a README file?</h2>
3228
<p>
3329
A README file is the foundational documentation for a software, dataset, or coding project. It serves as a
3430
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
31+
it, and how to contribute.
3632
</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>
33+
<a class="hyperlink"
34+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
35+
target="_blank" rel="noopener">Read more</a>
4036
</article>
4137

42-
<article>
43-
<img src="wireframe.svg" alt="" />
38+
<article id="wireframe">
39+
<img src="wireframe.svg" alt="Illustration of a website user interface wireframe" />
4440
<h2>What is the purpose of a wireframe?</h2>
4541
<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
42+
Wireframes are the foundational blueprints of a website or app. Used early in the development process,
43+
they help teams visualize structure, map user flows, and establish content hierarchy before committing to costly
44+
colors, branding, or final UI design.
4945
</p>
50-
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
46+
<a class="hyperlink" href="https://www.productplan.com/glossary/wireframeFilter/" target="_blank"
47+
rel="noopener">Read more</a>
5148
</article>
5249

53-
<article>
54-
<img src="branch.svg" alt="" />
50+
<article id="git-branch">
51+
<img src="branch.svg" alt="Diagram showing Git branches diverging from a main commit history" />
5552
<h2>What is a branch in Git?</h2>
5653
<p>
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 .
54+
A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name
55+
in Git is typically master or main.<br><br></br>
5956
</p>
60-
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
57+
<a class="hyperlink" href="https://www.w3schools.com/GIT/git_branch.asp?remote=github" target="_blank"
58+
rel="noopener">Read more</a>
6159
</article>
6260
</main>
61+
6362
<footer>
64-
<p>
65-
By ChunyanWong HOMEWORK FOR WIREFRAME SOLUTION
66-
</p>
63+
<p>By ChunyanWong | HOMEWORK FOR WIREFRAME SOLUTION</p>
6764
</footer>
65+
6866
</body>
6967

7068
</html>

‎Wireframe/style.css‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ body {
3333
font: var(--font);
3434
}
3535

36-
a {
36+
.hyperlink {
3737
padding: var(--space);
3838
border: var(--line);
3939
max-width: fit-content;
@@ -49,13 +49,8 @@ svg {
4949
Setting the overall rules for page regions
5050
https://www.w3.org/WAI/tutorials/page-structure/regions/
5151
*/
52-
main {
53-
max-width: var(--container);
54-
margin: 0 auto calc(var(--space) * 4) auto;
55-
}
56-
5752
footer {
58-
position: fixed;
53+
position: relative;
5954
bottom: 0;
6055
text-align: center;
6156
}
@@ -68,6 +63,8 @@ https://developer.chrome.com/docs/devtools/css/grid
6863
https://gridbyexample.com/learn/
6964
*/
7065
main {
66+
max-width: var(--container);
67+
margin: 0 auto calc(var(--space) * 4) auto;
7168
display: grid;
7269
grid-template-columns: 1fr 1fr;
7370
gap: var(--space);
@@ -96,4 +93,17 @@ article {
9693
>img {
9794
grid-column: span 3;
9895
}
96+
97+
98+
h2 {
99+
text-align: left;
100+
vertical-align: top;
101+
}
102+
103+
td {
104+
padding: var(--space);
105+
max-width: fit-content;
106+
vertical-align: top;
107+
}
108+
99109
}

0 commit comments

Comments
 (0)