Skip to content

Commit 435a587

Browse files
Jay00-ggJay00-gg
authored
corrected-updated-wireframe-assessment
1 parent 74b8117 commit 435a587

2 files changed

Lines changed: 92 additions & 83 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 75 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -22,84 +22,82 @@ <h1>Understanding README Files, Wireframes and Git Branches</h1>
2222
</header>
2323

2424
<main>
25+
<article>
26+
<img src="readme.png" alt="README file example">
2527

26-
<article>
27-
<h2>What is a README File?</h2>
28-
29-
<img src="readme.png" alt="README file example">
30-
31-
<p>
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.
36-
</p>
37-
38-
<p>
39-
A well-written README makes it easier for developers and contributors
40-
to understand and work with a project.
41-
</p>
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>
28+
<h2>What is a README File?</h2>
29+
30+
<p>
31+
A README file is usually the first document people see when they visit a
32+
project. It provides an overview of the project, explains its purpose,
33+
gives installation instructions and helps users understand how to use
34+
the software.
35+
</p>
36+
37+
<p>
38+
A well-written README makes it easier for developers and contributors
39+
to understand and work with a project.
40+
</p>
41+
42+
<a
43+
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
>
47+
Learn more about README files
48+
</a>
49+
</article>
50+
51+
<article>
52+
<img src="wireframe.png" alt="Website wireframe example">
53+
54+
<h2>What is a Wireframe?</h2>
55+
56+
<p>
57+
A wireframe is a simple visual representation of a webpage or
58+
application. It focuses on structure and layout rather than colours,
59+
images or final design elements.
60+
</p>
61+
62+
<p>
63+
Fun fact: designers also use wireframes to plan where content, navigation
64+
and key features will appear before development begins.
65+
</p>
66+
67+
<a
68+
href="https://balsamiq.com/blog/what-are-wireframes/"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
>
72+
Learn more about wireframes
73+
</a>
74+
</article>
75+
76+
<article>
77+
<img src="git-branch.png" alt="Git branch diagram">
78+
79+
<h2>What is a Git Branch?</h2>
80+
81+
<p>
82+
A Git branch is an independent line of development within a Git
83+
repository. It allows developers to work on new features, bug fixes
84+
or experiments without affecting the main version of the project.
85+
</p>
86+
87+
<p>
88+
Once the work is complete and tested, the branch can be merged back
89+
into the main codebase.
90+
</p>
91+
92+
<a
93+
href="https://www.atlassian.com/git/tutorials/using-branches"
94+
target="_blank"
95+
rel="noopener noreferrer"
96+
>
97+
Learn more about Git branches
98+
</a>
99+
</article>
100+
</main>
103101

104102
<footer>
105103
<p>Created for CYF Wireframe assessment by Juanita Nwachukwu.</p>

‎Wireframe/style.css‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,41 @@ 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 */
30+
2931
body {
3032
background: var(--paper);
3133
color: var(--ink);
3234
font: var(--font);
3335
padding-bottom: 60px;
3436
}
37+
3538
a {
3639
padding: var(--space);
3740
border: var(--line);
3841
max-width: fit-content;
3942
}
43+
4044
img,
4145
svg {
4246
width: 100%;
4347
object-fit: cover;
4448
}
49+
4550
/* ====== Site Layout ======
4651
Setting the overall rules for page regions
4752
https://www.w3.org/WAI/tutorials/page-structure/regions/
4853
*/
54+
4955
main {
5056
max-width: var(--container);
5157
margin: 0 auto calc(var(--space) * 4) auto;
58+
}
5259

53-
header {
60+
/* (kept but fixed indentation only) */
61+
header {
5462
text-align: center;
5563
}
5664

@@ -62,28 +70,31 @@ footer {
6270
text-align: center;
6371
background: var(--paper);
6472
}
73+
6574
/* ====== Articles Grid Layout ====
6675
Setting the rules for how articles are placed in the main element.
6776
Inspect this in Devtools and click the "grid" button in the Elements view
6877
Play with the options that come up.
6978
https://developer.chrome.com/docs/devtools/css/grid
7079
https://gridbyexample.com/learn/
7180
*/
81+
7282
main {
7383
display: grid;
7484
grid-template-columns: 1fr 1fr;
7585
gap: var(--space);
7686
}
7787

78-
main > *:first-child {
79-
grid-column: span 2;
88+
main > *:first-child {
89+
grid-column: span 2;
8090
}
8191

8292
/* ====== Article Layout ======
8393
Setting the rules for how elements are placed in the article.
8494
Now laying out just the INSIDE of the repeated card/article design.
8595
Keeping things orderly and separate is the key to good, simple CSS.
8696
*/
97+
8798
article {
8899
border: var(--line);
89100
padding-bottom: var(--space);
@@ -93,9 +104,9 @@ article {
93104
}
94105

95106
article > * {
96-
grid-column: 2/3;
97-
}
107+
grid-column: 2/3;
108+
}
98109

99110
article > img {
100111
grid-column: span 3;
101-
}
112+
}

0 commit comments

Comments
 (0)