Skip to content

Commit 36aec2e

Browse files
risikatpopoolarisikatpopoola
committed
review suggestions resolved
1 parent c4ea6d1 commit 36aec2e

2 files changed

Lines changed: 110 additions & 82 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 81 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>SOFTWARE DEVELOPMENT LIFECYCLE TOOLS(SDLC)</h1>
12-
<p id="basic">
13-
SDLC tools are software applications that help development teams plan, design, build, test, and deploy software systematically. SDLC tools are software applications that help development teams plan, design, build, test, and deploy software systematically.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<div>
3+
4+
<head>
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" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>SOFTWARE DEVELOPMENT LIFECYCLE TOOLS(SDLC)</h1>
14+
<p id="basic">
15+
SDLC tools are software applications that help development teams plan, design, build, test, and deploy software
16+
systematically. SDLC tools are software applications that help development teams plan, design, build, test, and
17+
deploy software systematically.
18+
</p>
19+
</header>
20+
<main>
21+
<article>
22+
<div>
1923
<img src="image1.png" alt="an image of a readme.md" />
20-
</div>
21-
<h2>README FILE</h2>
22-
<p>
23-
Just like the name implies, you should read a README file as it is the foundational documentation for a software, dataset, or coding project. It serves as a project's "front door," designed to help users quickly understand what the project does, how to install and use it, and how to contribute. It also contains
24-
clear examples or tutorials demonstrating the project's features in action.
25-
</p>
26-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
27-
</article>
28-
<article>
29-
<div>
24+
</div>
25+
<h2>README FILE</h2>
26+
<p>
27+
Just like the name implies, you should read a README file as it is the foundational documentation for a
28+
software, dataset, or coding project. It serves as a project's "front door," designed to help users quickly
29+
understand what the project does, how to install and use it, and how to contribute. It also contains
30+
clear examples or tutorials demonstrating the project's features in action.
31+
</p>
32+
<a
33+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
34+
more</a>
35+
</article>
36+
<article>
37+
<div>
3038
<img src="image3.png" alt="an image of a wireframe template" />
31-
</div>
32-
<h2>WIREFRAMES</h2>
33-
<p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused and constructive.
34-
Think of your wireframe as the skeleton of your app, website, or other final product. Starting with a clean, spare wireframe design also gives UI/UX designers room to iterate. They can collect early feedback from user testing on core UX/UI elements, without distracting users with visual design details.
35-
Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components, and features, including:
36-
</p>
37-
<ul>
38-
<li>Screen layouts</li>
39-
<li>Navigation bars</li>
40-
<li>Components of UX and UI design</li>
41-
<li>Interactive elements</li>
42-
</ul>
43-
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
44-
</article>
45-
<article>
46-
<div>
39+
</div>
40+
<h2>WIREFRAMES</h2>
41+
<p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused
42+
and constructive.
43+
Think of your wireframe as the skeleton of your app, website, or other final product. Starting with a clean,
44+
spare wireframe design also gives UI/UX designers room to iterate. They can collect early feedback from user
45+
testing on core UX/UI elements, without distracting users with visual design details.
46+
Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components,
47+
and features, including:
48+
</p>
49+
<ul>
50+
<li>Screen layouts</li>
51+
<li>Navigation bars</li>
52+
<li>Components of UX and UI design</li>
53+
<li>Interactive elements</li>
54+
</ul>
55+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
56+
</article>
57+
<article>
58+
<div>
4759
<img src="image2.png" alt="an image of a git branch and its operations" />
48-
</div>
49-
<h2>GIT BRANCH</h2>
50-
<p>
51-
In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
52-
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. Branches allow you to work on different parts of a project without impacting the main branch.
53-
When the work is complete, a branch can be merged with the main project. You can even switch between branches and work on different projects without them interfering with each other. Branching in Git is very lightweight and fast! Common reasons to create a branch includes:
54-
</p>
55-
<ul>
56-
<li>Developing a new feature</li>
57-
<li>Fixing a bug</li>
58-
<li>Experimenting with ideas</li>
59-
</ul>
60-
<a href="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png?fit=1921%2C1057&ssl=1">Read more</a>
61-
</article>
62-
</main>
63-
<footer>
60+
</div>
61+
<h2>GIT BRANCH</h2>
6462
<p>
65-
ALL RIGHTS RESERVED. RIZQAH POPOOLA 2026
63+
In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the
64+
main project. Think of it as a "parallel universe" for your code.
65+
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with
66+
the main branch. Branches allow you to work on different parts of a project without impacting the main branch.
67+
When the work is complete, a branch can be merged with the main project. You can even switch between branches
68+
and work on different projects without them interfering with each other. Branching in Git is very lightweight
69+
and fast! Common reasons to create a branch includes:
6670
</p>
67-
</footer>
68-
</body>
69-
</html>
71+
<ul>
72+
<li>Developing a new feature</li>
73+
<li>Fixing a bug</li>
74+
<li>Experimenting with ideas</li>
75+
</ul>
76+
<a
77+
href="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png?fit=1921%2C1057&ssl=1">Read
78+
more</a>
79+
</article>
80+
</main>
81+
<footer>
82+
<p>
83+
ALL RIGHTS RESERVED. RIZQAH POPOOLA 2026
84+
</p>
85+
</footer>
86+
</body>
87+
88+
</html>

‎Wireframe/style.css‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,15 @@ 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 */
29-
h1{
30+
h1 {
3031
text-align: center;
3132
color: palevioletred;
3233
}
33-
h2{
34+
35+
h2 {
3436
color: palevioletred;
3537
}
3638

@@ -39,51 +41,56 @@ body {
3941
color: var(--ink);
4042
font: var(--font);
4143
}
44+
4245
a {
4346
padding: var(--space);
4447
border: var(--line);
4548
max-width: fit-content;
4649
}
50+
4751
img,
4852
svg {
4953
width: 100%;
5054
object-fit: cover;
5155
}
52-
#basic{
56+
57+
#basic {
5358
text-align: center;
5459
}
60+
5561
/* ====== Site Layout ======
5662
Setting the overall rules for page regions
5763
https://www.w3.org/WAI/tutorials/page-structure/regions/
5864
*/
5965
main {
6066
max-width: var(--container);
6167
margin: 0 auto calc(var(--space) * 4) auto;
68+
display: grid;
69+
grid-template-columns: 1fr 1fr;
70+
gap: var(--space);
71+
72+
>*:first-child {
73+
grid-column: span 2;
74+
}
6275
}
76+
6377
footer {
6478
position: fixed;
65-
left: 0;
66-
bottom: 0;
67-
width: 100%;
68-
background-color: rgb(231, 163, 200);
69-
color: black;
70-
text-align: center;
79+
left: 0;
80+
bottom: 0;
81+
width: 100%;
82+
background-color: rgb(231, 163, 200);
83+
color: black;
84+
text-align: center;
7185
}
86+
7287
/* ====== Articles Grid Layout ====
7388
Setting the rules for how articles are placed in the main element.
7489
Inspect this in Devtools and click the "grid" button in the Elements view
7590
Play with the options that come up.
7691
https://developer.chrome.com/docs/devtools/css/grid
7792
https://gridbyexample.com/learn/
7893
*/
79-
main {
80-
display: grid;
81-
grid-template-columns: 1fr 1fr;
82-
gap: var(--space);
83-
> *:first-child {
84-
grid-column: span 2;
85-
}
86-
}
8794
/* ====== Article Layout ======
8895
Setting the rules for how elements are placed in the article.
8996
Now laying out just the INSIDE of the repeated card/article design.
@@ -95,10 +102,12 @@ article {
95102
text-align: left;
96103
display: grid;
97104
grid-template-columns: var(--space) 1fr var(--space);
98-
> * {
105+
106+
>* {
99107
grid-column: 2/3;
100108
}
101-
> img {
109+
110+
>img {
102111
grid-column: span 3;
103112
}
104-
}
113+
}

0 commit comments

Comments
 (0)