Skip to content

Commit 7dfbf5b

Browse files
author
lintsang
committed
add questions, answer and images
1 parent 2af122a commit 7dfbf5b

2 files changed

Lines changed: 23 additions & 14 deletions

File tree

Wireframe/index.html

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,39 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>Web Development Foundation</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
There are some frequently asked questions for beginner developers.
1414
</p>
1515
</header>
1616
<main>
1717
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
18+
<div class="image-wrapper">
19+
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="" />
20+
</div>
21+
<h2>1. What is the purpose of a README file?</h2>
2022
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23+
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.
2324
</p>
2425
<a href="">Read more</a>
2526
</article>
2627
<article>
27-
<img src="placeholder.svg" alt="" />
28-
<h2>Title</h2>
28+
<div class="image-wrapper">
29+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="" />
30+
</div>
31+
<h2>2. What is the purpose of a wireframe?</h2>
2932
<p>
30-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
31-
voluptates. Quisquam, voluptates.
33+
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.
3234
</p>
3335
<a href="">Read more</a>
3436
</article>
3537
<article>
36-
<img src="placeholder.svg" alt="" />
37-
<h2>Title</h2>
38+
<div class="image-wrapper">
39+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="" />
40+
</div>
41+
<h2>3. What is a branch in Git?</h2>
3842
<p>
39-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
40-
voluptates. Quisquam, voluptates.
43+
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.
4144
</p>
4245
<a href="">Read more</a>
4346
</article>

Wireframe/style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ svg {
4949
p {
5050
padding: 0 0 30px 0;
5151
}
52+
.image-wrapper img {
53+
width: 100%;
54+
55+
/* 1:1 aspect ratio for square */
56+
aspect-ratio: 16 / 9;
57+
}
5258
/* ====== Site Layout ======
5359
Setting the overall rules for page regions
5460
https://www.w3.org/WAI/tutorials/page-structure/regions/

0 commit comments

Comments
 (0)