Skip to content

Commit 9858ba9

Browse files
gideondefargideondefar
committed
Fixed heading structure, adjusted images with alt text, formated the code consistently
1 parent d797428 commit 9858ba9

2 files changed

Lines changed: 54 additions & 50 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,69 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>
8-
About Wireframes, READMEs and Git Branches
9-
</title>
10-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
119
</head>
1210

1311
<body>
1412
<header>
1513
<h1>
16-
About Wireframes, READMEs and Git Branches
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
1726
</h1>
18-
<p>
19-
This page explores wireframes in web design, the significance of README
20-
files in software projects and the role of branches in Git version
21-
control.
22-
</p>
2327
</header>
2428
<main>
2529
<article>
26-
<img src="placeholder.svg" alt="">
27-
<h2>Wireframe</h2>
30+
<img src="readme.svg" alt="" />
31+
<h2>What is the purpose of a README file?</h2>
2832
<p>
29-
Wireframe provides a foundational structural template for web pages.
30-
It serves as a communication tool for stakeholders, web designers and
31-
developers, providing a simple structural view of the rendered web
32-
page.
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
3336
</p>
3437
<a
35-
href="https://www.wix.com/blog/what-are-wireframes?experiment_id=%5E%5E40312ac7-ca22-4ba2-bd8e-0b726ed32275%5E">Read
38+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
3639
more</a>
3740
</article>
41+
3842
<article>
39-
<img src="placeholder.svg" alt="">
40-
<h2>README Files</h2>
43+
<img src="wireframe.svg" alt="" />
44+
<h2>What is the purpose of a wireframe?</h2>
4145
<p>
42-
README files offer essential explanatory information about a codebase
43-
within a repository, including usage instructions and details about
44-
its features.
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
4549
</p>
46-
<a href="https://www.makeareadme.com/">Read more</a>
50+
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
4751
</article>
52+
4853
<article>
49-
<img src="placeholder.svg" alt="">
50-
<h2>Git branches</h2>
54+
<img src="branch.svg" alt="" />
55+
<h2>What is a branch in Git?</h2>
5156
<p>
52-
Git branches are a fundamental feature that enables users to develop
53-
features and make commits independently of the main branch. This
54-
facilitates parallel development by multiple teams without causing
55-
conflicts directly.
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 .
5659
</p>
57-
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
60+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
5861
</article>
5962
</main>
6063
<footer>
61-
This all about wireframe. All Rights Reserved.
64+
<p>
65+
By Gideon Defar
66+
</p>
6267
</footer>
6368
</body>
69+
6470
</html>

‎Wireframe/style.css‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,48 +24,42 @@ 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);
33-
}
34-
35-
header {
36-
text-align: center;
3734
}
3835

3936
a {
4037
padding: var(--space);
4138
border: var(--line);
4239
max-width: fit-content;
4340
}
41+
4442
img,
4543
svg {
4644
width: 100%;
4745
object-fit: cover;
4846
}
47+
4948
/* ====== Site Layout ======
5049
Setting the overall rules for page regions
5150
https://www.w3.org/WAI/tutorials/page-structure/regions/
5251
*/
5352
main {
5453
max-width: var(--container);
5554
margin: 0 auto calc(var(--space) * 4) auto;
56-
height: 90%;
5755
}
56+
5857
footer {
58+
position: fixed;
59+
bottom: 0;
5960
text-align: center;
60-
padding: 15px 0;
61-
position: fixed;
62-
width: 100%;
63-
bottom: 0;
64-
left: 0;
65-
font-family: Arial, sans-serif;
66-
border: solid;
67-
background-color: #ccc;
6861
}
62+
6963
/* ====== Articles Grid Layout ====
7064
Setting the rules for how articles are placed in the main element.
7165
Inspect this in Devtools and click the "grid" button in the Elements view
@@ -77,10 +71,12 @@ main {
7771
display: grid;
7872
grid-template-columns: 1fr 1fr;
7973
gap: var(--space);
80-
> *:first-child {
74+
75+
>*:first-child {
8176
grid-column: span 2;
8277
}
8378
}
79+
8480
/* ====== Article Layout ======
8581
Setting the rules for how elements are placed in the article.
8682
Now laying out just the INSIDE of the repeated card/article design.
@@ -92,10 +88,12 @@ article {
9288
text-align: left;
9389
display: grid;
9490
grid-template-columns: var(--space) 1fr var(--space);
95-
> * {
91+
92+
>* {
9693
grid-column: 2/3;
9794
}
98-
> img {
95+
96+
>img {
9997
grid-column: span 3;
10098
}
101-
}
99+
}

0 commit comments

Comments
 (0)