Skip to content

Commit 03a7645

Browse files
gideondefargideondefar
committed
Add header with page title, discr, three articles with images, titles, summaries, links and fix layout to match wireframe
1 parent 9858ba9 commit 03a7645

2 files changed

Lines changed: 138 additions & 113 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 73 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,75 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
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>
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
26-
</h1>
27-
</header>
28-
<main>
29-
<article>
30-
<img src="readme.svg" alt="" />
31-
<h2>What is the purpose of a README file?</h2>
32-
<p>
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
36-
</p>
37-
<a
38-
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
39-
more</a>
40-
</article>
41-
42-
<article>
43-
<img src="wireframe.svg" alt="" />
44-
<h2>What is the purpose of a wireframe?</h2>
45-
<p>
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
49-
</p>
50-
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
51-
</article>
52-
53-
<article>
54-
<img src="branch.svg" alt="" />
55-
<h2>What is a branch in Git?</h2>
56-
<p>
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 .
59-
</p>
60-
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
61-
</article>
62-
</main>
63-
<footer>
64-
<p>
65-
By Gideon Defar
66-
</p>
67-
</footer>
68-
</body>
69-
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>Welcome to Intro to Programming</h1>
12+
<p>
13+
Here we will learn about some introductory web development
14+
concepts.
15+
</p>
16+
</header>
17+
<main>
18+
<article>
19+
<img
20+
src="https://cdn.bulldogjob.com/system/photos/files/000/003/440/original/readme.webp"
21+
alt="example readme file" />
22+
<h2>The purpose of a README file</h2>
23+
<p>
24+
A README file is a text file often included with a software
25+
program or code package which provides the reader with
26+
information they may need to use the software, such as
27+
installation instructions.
28+
</p>
29+
<a
30+
href="https://bulldogjob.com/readme/how-to-write-a-good-readme-for-your-github-project"
31+
>Write your own README file</a
32+
>
33+
</article>
34+
<article>
35+
<img
36+
src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/01-youtube-wireframe-example.png"
37+
alt="example of a wireframe" />
38+
<h2>The purpose of a wireframe</h2>
39+
<p>
40+
A wireframe is used to express the layout of a visual medium
41+
such as a newspaper, or web page. It helps designers and
42+
programmers to get a simple overview of a design.
43+
</p>
44+
<a
45+
href="https://www.figma.com/resource-library/what-is-wireframing/"
46+
>Read more about wireframing</a
47+
>
48+
</article>
49+
<article>
50+
<img
51+
src="https://miro.medium.com/v2/resize:fit:1200/format:webp/1*e6EkEBIDZcOmlwPqCnsJKg.jpeg"
52+
alt="diagram of git branching" />
53+
<h2>What is a Git branch</h2>
54+
<p>
55+
A git branch is a copy of the code in a git repository.
56+
Branches are created so that developers can work separately
57+
on specific features. Once a feature is completed it is
58+
merged into main. If the creation of a feature is not
59+
successful, for example there are too many bugs, the branch
60+
can be deleted without affecting the main branch.
61+
</p>
62+
<a
63+
href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541"
64+
>Read more about Git</a
65+
>
66+
</article>
67+
</main>
68+
<footer>
69+
<p>
70+
Completed by Gideon Defar for ITP at Code Your
71+
Future.
72+
</p>
73+
</footer>
74+
</body>
7075
</html>

‎Wireframe/style.css‎

Lines changed: 65 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,50 +16,74 @@ As well as useful links to learn more */
1616
https://web.dev/articles/min-max-clamp
1717
https://scrimba.com/learn-css-variables-c026
1818
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
19+
20+
/* a basic reset to user agent stylesheets */
21+
* {
22+
margin: 0;
23+
box-sizing: border-box;
2624
}
2725

26+
:root {
27+
--paper: oklch(7 0 0);
28+
--ink: color-mix(in oklab, var(--color) 5%, black);
29+
--font: 100%/1.5 system-ui;
30+
--space: clamp(6px, 6px + 2vw, 15px);
31+
--line: 1px solid;
32+
--container: 1280px;
33+
}
2834
/* ====== Base Elements ======
2935
General rules for basic HTML elements in any context */
3036
body {
31-
background: var(--paper);
32-
color: var(--ink);
33-
font: var(--font);
37+
background: var(--paper);
38+
color: var(--ink);
39+
font: var(--font);
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
gap: 2rem;
3444
}
35-
3645
a {
37-
padding: var(--space);
38-
border: var(--line);
39-
max-width: fit-content;
46+
padding: var(--space);
47+
border: var(--line);
48+
max-width: fit-content;
4049
}
41-
4250
img,
4351
svg {
44-
width: 100%;
45-
object-fit: cover;
52+
width: 100%;
53+
object-fit: cover;
54+
}
55+
p {
56+
margin-bottom: 0.5rem;
57+
}
58+
h1 {
59+
margin-bottom: 1rem;
60+
}
61+
h2 {
62+
margin-bottom: 0.8rem;
4663
}
47-
4864
/* ====== Site Layout ======
4965
Setting the overall rules for page regions
5066
https://www.w3.org/WAI/tutorials/page-structure/regions/
5167
*/
5268
main {
53-
max-width: var(--container);
54-
margin: 0 auto calc(var(--space) * 4) auto;
69+
max-width: var(--container);
70+
margin: 0 auto calc(var(--space) * 4) auto;
71+
min-height: 0;
5572
}
5673

74+
header {
75+
text-align: center;
76+
}
5777
footer {
58-
position: fixed;
59-
bottom: 0;
60-
text-align: center;
78+
position: fixed;
79+
bottom: 0;
80+
text-align: center;
81+
border-top: 2px solid rgb(158, 158, 158);
82+
padding: 1rem;
83+
min-width: 100%;
84+
background-color: rgb(54, 53, 53);
85+
color: white;
6186
}
62-
6387
/* ====== Articles Grid Layout ====
6488
Setting the rules for how articles are placed in the main element.
6589
Inspect this in Devtools and click the "grid" button in the Elements view
@@ -68,32 +92,28 @@ https://developer.chrome.com/docs/devtools/css/grid
6892
https://gridbyexample.com/learn/
6993
*/
7094
main {
71-
display: grid;
72-
grid-template-columns: 1fr 1fr;
73-
gap: var(--space);
74-
75-
>*:first-child {
76-
grid-column: span 2;
77-
}
95+
display: grid;
96+
grid-template-columns: 1fr 1fr;
97+
gap: var(--space);
98+
> *:first-child {
99+
grid-column: span 2;
100+
}
78101
}
79-
80102
/* ====== Article Layout ======
81103
Setting the rules for how elements are placed in the article.
82104
Now laying out just the INSIDE of the repeated card/article design.
83105
Keeping things orderly and separate is the key to good, simple CSS.
84106
*/
85107
article {
86-
border: var(--line);
87-
padding-bottom: var(--space);
88-
text-align: left;
89-
display: grid;
90-
grid-template-columns: var(--space) 1fr var(--space);
91-
92-
>* {
93-
grid-column: 2/3;
94-
}
95-
96-
>img {
97-
grid-column: span 3;
98-
}
108+
border: var(--line);
109+
padding-bottom: var(--space);
110+
text-align: left;
111+
display: grid;
112+
grid-template-columns: var(--space) 1fr var(--space);
113+
> * {
114+
grid-column: 2/3;
115+
}
116+
> img {
117+
grid-column: span 3;
118+
}
99119
}

0 commit comments

Comments
 (0)