Skip to content

Commit ce9c573

Browse files
ZiadMakkawiZiadMakkawi
committed
Created the wireframe
1 parent 37c7257 commit ce9c573

2 files changed

Lines changed: 123 additions & 99 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 68 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,72 @@
1-
<body>
2-
<header>
3-
<h1>Web Development Fundamentals</h1>
4-
<p>
5-
An introduction to README files, wireframes, and Git branches.
6-
</p>
7-
</header>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Web Fundamentals</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
89

9-
<main>
10-
<article>
11-
<img src="placeholder.svg" alt="Document icon representing a README file" />
12-
<h2>What is a README file?</h2>
13-
<p>
14-
A README file explains what a project does, how to set it up, and how to
15-
use or contribute to it. It is usually the first thing people read when
16-
they open a repository.
17-
</p>
18-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
19-
Learn more about README files
20-
</a>
21-
</article>
10+
<body>
11+
<header>
12+
<h1>Web Fundamentals!!!</h1>
13+
<p>Understanding README files, wireframes, and Git branches</p>
14+
</header>
2215

23-
<article>
24-
<img src="placeholder.svg" alt="Wireframe sketch showing webpage layout" />
25-
<h2>What is a wireframe?</h2>
26-
<p>
27-
A wireframe is a simple visual guide that shows the structure and layout
28-
of a webpage before it is built. It helps designers and developers plan
29-
content placement and user flow.
30-
</p>
31-
<a href="https://www.productplan.com/glossary/wireframe/">
32-
Learn more about wireframes
33-
</a>
34-
</article>
16+
<main>
17+
<!-- Featured article (top wide card) -->
18+
<article class="featured">
19+
<img
20+
src="placeholder.svg"
21+
alt="Document icon representing a README file"
22+
/>
23+
<h2>What is a README file?</h2>
24+
<p>
25+
A README file explains what a project is, how to install or run it,
26+
and how others can use or contribute to it. It is usually the first
27+
file someone reads in a repository.
28+
</p>
29+
<a
30+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
31+
>
32+
Read more
33+
</a>
34+
</article>
3535

36-
<article>
37-
<img src="placeholder.svg" alt="Diagram showing Git branches" />
38-
<h2>What is a Git branch?</h2>
39-
<p>
40-
A Git branch is a separate line of development that allows developers to
41-
work on features or fixes without affecting the main codebase until the
42-
changes are ready.
43-
</p>
44-
<a href="https://git-scm.com/docs/git-branch">
45-
Learn more about Git branches
46-
</a>
47-
</article>
48-
</main>
36+
<!-- Two smaller articles -->
37+
<article>
38+
<img
39+
src="placeholder.svg"
40+
alt="Wireframe sketch showing page layout"
41+
/>
42+
<h2>What is a wireframe?</h2>
43+
<p>
44+
A wireframe is a simple visual guide that shows the structure and
45+
layout of a webpage before any code is written.
46+
</p>
47+
<a href="https://www.productplan.com/glossary/wireframe/">
48+
Read more
49+
</a>
50+
</article>
4951

50-
<footer>
51-
<p>© 2026 Ziad Ahmed</p>
52-
</footer>
53-
</body>
54-
s
52+
<article>
53+
<img
54+
src="placeholder.svg"
55+
alt="Diagram illustrating Git branches"
56+
/>
57+
<h2>What is a Git branch?</h2>
58+
<p>
59+
A Git branch allows developers to work on new features or fixes in
60+
isolation without affecting the main codebase.
61+
</p>
62+
<a href="https://git-scm.com/docs/git-branch">
63+
Read more
64+
</a>
65+
</article>
66+
</main>
67+
68+
<footer>
69+
<p>© 2026 Ziad Ahmed</p>
70+
</footer>
71+
</body>
72+
</html>

‎Wireframe/style.css‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -26,64 +26,70 @@ As well as useful links to learn more */
2626
}
2727
/* ====== Base Elements ======
2828
General rules for basic HTML elements in any context */
29+
* {
30+
box-sizing: border-box;
31+
}
32+
2933
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
34+
margin: 0;
35+
font-family: system-ui, sans-serif;
36+
min-height: 100vh;
37+
padding-bottom: 4rem;
3338
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
39+
40+
header {
41+
text-align: center;
42+
padding: 2rem 1rem;
43+
}
44+
45+
header h1 {
46+
margin-bottom: 0.5rem;
47+
}
48+
49+
main {
50+
max-width: 1200px;
51+
margin: 0 auto;
52+
padding: 1rem;
53+
display: grid;
54+
grid-template-columns: 1fr 1fr;
55+
gap: 2rem;
3856
}
39-
img,
40-
svg {
57+
58+
.featured {
59+
grid-column: span 2;
60+
}
61+
62+
article {
63+
border: 1px solid #000;
64+
padding: 1rem;
65+
display: flex;
66+
flex-direction: column;
67+
gap: 0.75rem;
68+
}
69+
70+
article img {
4171
width: 100%;
72+
height: 200px;
4273
object-fit: cover;
74+
border: 1px solid #000;
4375
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
76+
77+
a {
78+
display: inline-block;
79+
padding: 0.5rem 1rem;
80+
border: 1px solid #000;
81+
text-decoration: none;
82+
color: inherit;
83+
width: fit-content;
5184
}
85+
5286
footer {
5387
position: fixed;
5488
bottom: 0;
89+
width: 100%;
90+
border-top: 1px solid #000;
91+
background: #fff;
5592
text-align: center;
93+
padding: 0.75rem;
5694
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
89-
}
95+

0 commit comments

Comments
 (0)