Skip to content

Commit 74b8117

Browse files
Jay00-ggJay00-gg
authored
corrected-updated-wirefram-juanita
1 parent cb59715 commit 74b8117

2 files changed

Lines changed: 122 additions & 34 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 103 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,109 @@
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>Wireframe</h1>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Understanding README Files, Wireframes and Git Branches</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
<header>
12+
<h1>Understanding README Files, Wireframes and Git Branches</h1>
13+
14+
<p>
15+
This article explores three important concepts used in software
16+
development: README files, Wireframes and Git branches.
17+
</p>
18+
19+
<p>
20+
Code adapted and changed by Juanita.
21+
</p>
22+
</header>
23+
24+
<main>
25+
26+
<article>
27+
<h2>What is a README File?</h2>
28+
29+
<img src="readme.png" alt="README file example">
30+
1231
<p>
13-
This is the default, provided code and no changes have been made yet.
32+
A README file is usually the first document people see when they visit a
33+
project. It provides an overview of the project, explains its purpose,
34+
gives installation instructions and helps users understand how to use
35+
the software.
1436
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
26-
</main>
27-
<footer>
37+
2838
<p>
29-
This is the default, provided code and no changes have been made yet.
39+
A well-written README makes it easier for developers and contributors
40+
to understand and work with a project.
3041
</p>
31-
</footer>
32-
</body>
33-
</html>
42+
43+
<a
44+
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
Learn more about README files
49+
</a>
50+
</article>
51+
52+
<article>
53+
<h2>What is a Wireframe?</h2>
54+
55+
<img src="wireframe.png" alt="Website wireframe example">
56+
57+
<p>
58+
A wireframe is a simple visual representation of a webpage or
59+
application. It focuses on structure and layout rather than colours,
60+
images or final design elements.
61+
</p>
62+
63+
<p>
64+
Fun fact: designers use wireframes to plan where content, navigation and key
65+
features will appear before development begins.
66+
</p>
67+
68+
<a
69+
href="https://balsamiq.com/blog/what-are-wireframes/"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
73+
Learn more about wireframes
74+
</a>
75+
</article>
76+
77+
<article>
78+
<h2>What is a Git Branch?</h2>
79+
80+
<img src="git-branch.png" alt="Git branch diagram">
81+
82+
<p>
83+
A Git branch is an independent line of development within a Git
84+
repository. It allows developers to work on new features, bug fixes or
85+
experiments without affecting the main version of the project.
86+
</p>
87+
88+
<p>
89+
Once the work is complete and tested, the branch can be merged back into
90+
the main codebase.
91+
</p>
92+
93+
<a
94+
href="https://www.atlassian.com/git/tutorials/using-branches"
95+
target="_blank"
96+
rel="noopener noreferrer"
97+
>
98+
Learn more about Git branches
99+
</a>
100+
</article>
101+
102+
</main>
103+
104+
<footer>
105+
<p>Created for CYF Wireframe assessment by Juanita Nwachukwu.</p>
106+
</footer>
107+
108+
</body>
109+
</html>

‎Wireframe/style.css‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ As well as useful links to learn more */
1818
====== Design Palette ====== */
1919
:root {
2020
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
21+
--ink: black;
2222
--font: 100%/1.5 system-ui;
2323
--space: clamp(6px, 6px + 2vw, 15px);
2424
--line: 1px solid;
@@ -30,6 +30,7 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
padding-bottom: 60px;
3334
}
3435
a {
3536
padding: var(--space);
@@ -48,11 +49,18 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
4849
main {
4950
max-width: var(--container);
5051
margin: 0 auto calc(var(--space) * 4) auto;
52+
53+
header {
54+
text-align: center;
5155
}
56+
5257
footer {
5358
position: fixed;
5459
bottom: 0;
60+
left: 0;
61+
width: 100%;
5562
text-align: center;
63+
background: var(--paper);
5664
}
5765
/* ====== Articles Grid Layout ====
5866
Setting the rules for how articles are placed in the main element.
@@ -65,10 +73,12 @@ main {
6573
display: grid;
6674
grid-template-columns: 1fr 1fr;
6775
gap: var(--space);
68-
> *:first-child {
76+
}
77+
78+
main > *:first-child {
6979
grid-column: span 2;
70-
}
7180
}
81+
7282
/* ====== Article Layout ======
7383
Setting the rules for how elements are placed in the article.
7484
Now laying out just the INSIDE of the repeated card/article design.
@@ -80,10 +90,12 @@ article {
8090
text-align: left;
8191
display: grid;
8292
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
93+
}
94+
95+
article > * {
8496
grid-column: 2/3;
8597
}
86-
> img {
98+
99+
article > img {
87100
grid-column: span 3;
88-
}
89-
}
101+
}

0 commit comments

Comments
 (0)