Skip to content

Commit 76e8cdf

Browse files
eyob-techeyob-tech
committed
add wireframe webpage with 3 articles
1 parent c44123d commit 76e8cdf

2 files changed

Lines changed: 137 additions & 95 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 57 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,60 @@
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>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</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>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Web Development Basics</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Understanding Web Development</h1>
12+
<p>Learn about the tools and concepts every developer needs to know</p>
13+
</header>
14+
15+
<main>
16+
<article>
17+
<img src="placeholder.svg" alt="A README file displayed in a code editor" />
18+
<h2>What is the purpose of a README file?</h2>
19+
<p>When you open someone's project for the first time,
20+
the README is the first thing you read. It tells you
21+
what the project does, why it exists, how to install it,
22+
and how to use it. Without a README, other developers
23+
would have no idea where to start. Writing a clear README
24+
is one of the most important habits a developer can build.</p>
25+
<a href="#">Read more</a>
26+
</article>
27+
28+
<article>
29+
<img src="placeholder.svg" alt="A hand-drawn wireframe sketch of a webpage layout" />
30+
<h2>What is the purpose of a wireframe?</h2>
31+
<p>Before writing a single line of code, designers and
32+
developers draw a wireframe. It is a simple sketch that
33+
shows where each part of the page will go — the header,
34+
the images, the text, the buttons. Think of it like the
35+
blueprint of a house. You plan before you build. A
36+
wireframe saves time and avoids confusion later.</p>
37+
<a href="#">Read more</a>
38+
</article>
39+
40+
<article>
41+
<img src="placeholder.svg" alt="A diagram showing how Git branches split from the main branch" />
42+
<h2>What is a branch in Git?</h2>
43+
<p>A branch in Git is like a safe copy of your project
44+
where you can make changes freely. While you work on
45+
your branch, the main code stays untouched. When your
46+
work is finished and tested, you merge your branch back
47+
into main. This is how developers work together without
48+
breaking each other's code.</p>
49+
<a href="#">Read more</a>
50+
</article>
51+
</main>
52+
53+
<footer>
54+
<p>This page covers README files, wireframes, and Git branches —
55+
three essential concepts for every web developer.</p>
56+
</footer>
57+
</body>
3358
</html>
59+
60+

‎Wireframe/style.css‎

Lines changed: 80 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,104 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
1+
/* ====== Design Palette ====== */
192
:root {
203
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
4+
--ink: color-mix(in oklch, var(--color) 5%, black);
225
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
6+
--space: clamp(6px, 2px + 2vw, 15px);
247
--line: 1px solid;
25-
--container: 1280px;
8+
--container: 1200px;
269
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
10+
11+
/* ====== Base Elements ====== */
2912
body {
30-
background: var(--paper);
31-
color: var(--ink);
3213
font: var(--font);
14+
color: var(--ink);
15+
background: #f9f9f9;
16+
margin: 0;
17+
padding: 0;
18+
padding-bottom: 80px;
19+
font-family: system-ui, sans-serif;
3320
}
21+
22+
h1, h2 {
23+
margin: 0 0 8px 0;
24+
}
25+
3426
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
27+
display: inline-block;
28+
padding: 8px 16px;
29+
border: 1px solid #333;
30+
color: #333;
31+
text-decoration: none;
32+
margin-top: 8px;
33+
}
34+
35+
a:hover {
36+
background: #333;
37+
color: white;
3838
}
39+
40+
a:focus {
41+
outline: 3px solid blue;
42+
}
43+
3944
img,
4045
svg {
4146
width: 100%;
47+
height: 200px;
4248
object-fit: cover;
49+
display: block;
4350
}
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;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
51+
52+
/* ====== Header ====== */
53+
header {
5554
text-align: center;
55+
padding: 24px 16px;
56+
border-bottom: 1px solid #ccc;
57+
background: white;
5658
}
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-
*/
59+
60+
/* ====== Site Layout ====== */
6461
main {
62+
max-width: 900px;
63+
margin: 24px auto;
64+
padding: 0 16px;
6565
display: grid;
6666
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
67+
gap: 24px;
7168
}
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-
*/
69+
70+
/* First article spans full width */
71+
main > article:first-child {
72+
grid-column: span 2;
73+
}
74+
75+
/* ====== Article Layout ====== */
7776
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
77+
border: 1px solid #ccc;
78+
padding: 16px;
79+
background: white;
8080
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-
}
81+
}
82+
83+
article h2 {
84+
font-size: 1.1rem;
85+
margin: 12px 0 8px;
86+
}
87+
88+
article p {
89+
font-size: 0.95rem;
90+
line-height: 1.6;
91+
margin-bottom: 12px;
92+
}
93+
94+
/* ====== Footer ====== */
95+
footer {
96+
position: fixed;
97+
bottom: 0;
98+
width: 100%;
99+
text-align: center;
100+
padding: 16px;
101+
background: #333;
102+
color: white;
103+
font-size: 0.9rem;
89104
}

0 commit comments

Comments
 (0)