Skip to content

Commit 953e387

Browse files
author
Yonas Gebre
committed
meta description for the SEO
1 parent d9a251e commit 953e387

5 files changed

Lines changed: 50 additions & 9 deletions

File tree

‎Wireframe/branch_git.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
<header>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta name="description" content="This article explains the concept of branches in Git,
6+
<body>
7+
<header>
28
<h1>Branch in Git</h1>
3-
</header>
9+
</header>
10+
</body>
11+
</html>

‎Wireframe/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="This article provides an introduction to the basics of web development, covering key concepts such as Git, README files, and wireframes. It explains the importance of these tools in the development process and how they contribute to effective project management and communication." />
67
<title>Wireframe</title>
78
<link rel="stylesheet" href="style.css" />
89
</head>

‎Wireframe/purpose_readme.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
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+
<meta name="description" content="This article explains the purpose of README files in software development projects, highlighting their importance for communication, documentation, and project management. It covers the key components typically included in a README file and how they benefit both users and developers." />
7+
<title>Purpose of README file</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
111
<header>
212
<h1>Purpose of README file</h1>
3-
</header>
13+
</header>
14+
</body>
15+
</html>

‎Wireframe/purpose_wireframe.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
<header>
2-
<h1>Purpose of a wireframe</h1>
3-
</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+
<meta name="description" content="This article explains the purpose of wireframes in the design and development process, highlighting their role in visualizing layout, structure, and user flow for websites and applications. It covers the benefits of using wireframes for communication, planning, and iteration in project development." />
7+
<title>Purpose of a wireframe</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Purpose of a wireframe</h1>
12+
</header>
13+
<p>A wireframe is a visual guide that represents the skeletal framework of a website or application. It outlines the layout, structure, and content placement without focusing on the final design elements like colors, images, or typography.</p>
14+
</body>
15+
</html>

‎Wireframe/style.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,29 @@ As well as useful links to learn more */
2121
--ink: color-mix(in oklab, var(--color) 5%, black);
2222
--font: 100%/1.5 system-ui;
2323
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
24+
--line: 2px solid;
2525
--container: 1280px;
26+
--yellow: oklch(0.8 0.2 90);
2627
}
2728
/* ====== Base Elements ======
2829
General rules for basic HTML elements in any context */
2930
body {
3031
background: var(--paper);
3132
color: var(--ink);
3233
font: var(--font);
34+
3335
}
3436
a {
3537
padding: var(--space);
3638
border: var(--line);
3739
max-width: fit-content;
40+
font:var(--yellow);
41+
font-weight: bold;
3842
}
3943
img,
4044
svg {
4145
width: 100%;
42-
height: 480px; object-fit: cover;
46+
height: 475px; object-fit: cover;
4347
}
4448

4549
/* ====== Site Layout ======
@@ -56,13 +60,17 @@ main {
5660

5761
footer {
5862
height: 60px;
59-
background-color:#444444;
63+
background-color:#4D4D4D;
6064
color: #fff;
6165
display: flex;
6266
align-items: center;
6367
justify-content: center;
6468
bottom: 0;
6569
}
70+
footer a {
71+
color: #fff;
72+
text-decoration: none;
73+
}
6674
/* ====== Articles Grid Layout ====
6775
Setting the rules for how articles are placed in the main element.
6876
Inspect this in Devtools and click the "grid" button in the Elements view

0 commit comments

Comments
 (0)