Skip to content

Commit e565f10

Browse files
author
Yonas Gebre
committed
main page developed
1 parent ff7b9d0 commit e565f10

9 files changed

Lines changed: 74 additions & 11 deletions

‎Wireframe/branch_git.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<header>
2+
<h1>Branch in Git</h1>
3+
</header>

‎Wireframe/image_branch.png‎

69.2 KB
Loading

‎Wireframe/image_git.png‎

72.9 KB
Loading

‎Wireframe/image_readme.png‎

77.7 KB
Loading

‎Wireframe/image_wireframe.png‎

73.9 KB
Loading

‎Wireframe/index.html‎

Lines changed: 60 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,75 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
11+
<h1>Basic of Web Development </h1>
12+
<P>
13+
Web development is the process of creating and maintaining websites and web applications.<br>
14+
Good web developers, they have a strong understanding of Git, README files and wireframes(Design) before the actual development process.<br>
15+
This articles introduce the purpose of README files,wireframes and how to create branches in Git.
16+
</P>
17+
1518
</header>
1619
<main>
1720
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
21+
22+
<img src="image_readme.png" alt="README file illustration" />
23+
<h2>Purpose of README file</h2>
24+
<p>
25+
README files to communicate important information about a project for users and developers.
26+
A README is often the first item a visitor will see when visiting your repository.
27+
From the readme, users can easily understand what your project is about, how to use it.
28+
</p>
29+
<p>
30+
README files typically include information on:
31+
<ul>
32+
<li>What the project does a Project description</li>
33+
<li>How users can get started with the project Installation instructions</li>
34+
<li>Usage guidelines</li>
35+
<li>Contributing guidelines</li>
36+
<li>License information</li>
37+
</p>
38+
<a href="purpose_readme.html">Read more</a>
39+
</article>
40+
<article>
41+
<img src="image_wireframe.png" alt="Wireframe Example" />
42+
<h2>Purpose of a wireframe</h2>
43+
<p>
44+
Wireframe graphic representation of a website, mobile app, or other digital interface that highlights the overall structure and layout of the design without going into specifics like colors, fonts, or images. A wireframe is a product outline that shows what interface elements will be present on important pages.
45+
</p>
46+
<p>
47+
Wireframes are used to:
48+
<ul>
49+
50+
<li>Structural Planning</li>
51+
<li>User Flow</li>
52+
<li>Communication</li>
53+
54+
</ul>
55+
</p>
56+
<a href="purpose_wireframe.html">Read more</a>
57+
</article>
58+
<article>
59+
<img src="image_git.png" alt="branch in git" id="branch-image"/>
60+
<h2>Branch in Git</h2>
2061
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
62+
In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
2363
</p>
24-
<a href="">Read more</a>
64+
<p>
65+
Common Reasons to Create a Branch:
66+
</p>
67+
<ul>
68+
<li>Developing a new feature</li>
69+
<li>Fixing a bug</li>
70+
<li>Experimenting with ideas</li>
71+
</ul>
72+
73+
<a href="branch_git.html">Read more</a>
2574
</article>
2675
</main>
2776
<footer>
2877
<p>
29-
This is the default, provided code and no changes have been made yet.
78+
Contact: <a href="mailto:yonas.desbelegebre@gmail.com">yonas.desbelegebre@gmail.com</a>
79+
copyright &copy; 2026 Yonas Gebre. All rights reserved.
3080
</p>
3181
</footer>
3282
</body>

‎Wireframe/purpose_readme.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<header>
2+
<h1>Purpose of README file</h1>
3+
</header>

‎Wireframe/purpose_wireframe.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<header>
2+
<h1>Purpose of a wireframe</h1>
3+
</header>

‎Wireframe/style.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,16 @@ a {
3939
img,
4040
svg {
4141
width: 100%;
42-
object-fit: cover;
42+
height: 480px; object-fit: cover;
4343
}
44+
4445
/* ====== Site Layout ======
4546
Setting the overall rules for page regions
4647
https://www.w3.org/WAI/tutorials/page-structure/regions/
4748
*/
49+
header{
50+
text-align: center;
51+
}
4852
main {
4953
max-width: var(--container);
5054
margin: 0 auto calc(var(--space) * 4) auto;

0 commit comments

Comments
 (0)