Skip to content

Commit e8d4e9d

Browse files
d-odumosud-odumosu
committed
feat: added blog post content to all pages
1 parent a09650e commit e8d4e9d

4 files changed

Lines changed: 379 additions & 16 deletions

File tree

‎Wireframe/branches.html‎

Lines changed: 120 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,127 @@ <h1 class="site-title">The Blog</h1>
3030
</div>
3131
</header>
3232

33-
<div class="container">
33+
<div class="container container-blog-content">
3434
<article>
35-
<h2></h2>
36-
<p></p>
35+
<header>
36+
<h2>What Is a Branch in Git?</h2>
37+
</header>
38+
39+
<p>
40+
Modern software development often involves multiple developers working on the
41+
same project simultaneously. Without a system for managing changes, code could
42+
quickly become disorganised and difficult to maintain.
43+
</p>
44+
45+
<p>
46+
Git solves this problem through version control, and one of its most powerful
47+
features is branching.
48+
</p>
49+
50+
<p>
51+
A branch in Git is a separate line of development that allows developers to
52+
work on changes independently without affecting the main project.
53+
</p>
54+
55+
<p>
56+
You can think of a branch as creating a copy of the project where changes can
57+
be made safely. Once the work is complete and tested, those changes can be
58+
merged back into the main project.
59+
</p>
60+
61+
<section>
62+
<h3>Why Branches Are Important</h3>
63+
<p>Branches provide a safe and organised way to develop software.</p>
64+
</section>
65+
66+
<section>
67+
<h3>Feature Development</h3>
68+
<p>
69+
Developers often create branches when working on new features.
70+
</p>
71+
<p><em>For example: feature-user-authentication</em></p>
72+
<p>
73+
This branch might contain all the code required to add login and
74+
registration functionality.
75+
</p>
76+
</section>
77+
78+
<section>
79+
<h3>Bug Fixes</h3>
80+
<p>
81+
Branches can also be used to fix bugs without interfering with ongoing
82+
development.
83+
</p>
84+
<p><em>For example: fix-navigation-bug</em></p>
85+
<p>
86+
Developers can work on the issue, test the solution, and merge it back
87+
into the main branch when ready.
88+
</p>
89+
</section>
90+
91+
<section>
92+
<h3>Experimentation</h3>
93+
<p>
94+
Sometimes developers want to test a new idea without risking the stability
95+
of the project. Branches provide a safe environment for experimentation.
96+
</p>
97+
<p>
98+
If the experiment fails, the branch can simply be deleted.
99+
</p>
100+
</section>
101+
102+
<section>
103+
<h3>Common Git Branch Workflow</h3>
104+
<p>A typical Git workflow follows these steps:</p>
105+
<ul>
106+
<li>Create a new branch.</li>
107+
<li>Make changes within that branch.</li>
108+
<li>Commit changes regularly.</li>
109+
<li>Push the branch to GitHub.</li>
110+
<li>Open a Pull Request.</li>
111+
<li>Review and test the changes.</li>
112+
<li>Merge the branch into the main branch.</li>
113+
</ul>
114+
<p>
115+
This workflow helps maintain code quality and prevents accidental changes
116+
to the production version of the project.
117+
</p>
118+
</section>
119+
120+
<section>
121+
<h3>Collaboration Benefits</h3>
122+
<p>
123+
Branches are especially valuable when multiple developers work together.
124+
</p>
125+
<p>Imagine a team building an e-commerce website:</p>
126+
<ul>
127+
<li>Developer A works on the shopping cart.</li>
128+
<li>Developer B works on the product search feature.</li>
129+
<li>Developer C fixes bugs in the checkout process.</li>
130+
</ul>
131+
<p>
132+
Each developer can work on their own branch independently without
133+
disrupting anyone else's work. Once their tasks are complete, their
134+
changes can be reviewed and merged into the main branch.
135+
</p>
136+
<p>
137+
This approach improves collaboration, reduces conflicts, and allows teams
138+
to develop features simultaneously.
139+
</p>
140+
</section>
141+
142+
<section>
143+
<h3>Branches and Professional Development</h3>
144+
<p>
145+
Branching is considered a standard industry practice. Employers expect
146+
developers to understand how branches work because they form the foundation
147+
of collaborative software development.
148+
</p>
149+
<p>
150+
Learning how to create, switch, merge, and manage branches is therefore an
151+
essential skill for anyone pursuing a career in software engineering.
152+
</p>
153+
</section>
37154
</article>
38155
</div>
39156
<footer class="site-footer">

‎Wireframe/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ <h1 class="site-title">The Blog</h1>
3030
<img src="./images/md.png" alt="illustration of a readme.md file">
3131
<h2>What is the purpose of a README file</h2>
3232
<p>
33-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
34-
voluptates. Quisquam, voluptates.
33+
A README file is usually the first file someone sees when they open a project repository. Its main
34+
purpose is ...
3535
</p>
3636
<a class="article-read-more" href="readme.html"
3737
aria-label="read more about what the purpose of a read me file does">Read more</a>
@@ -41,8 +41,8 @@ <h2>What is the purpose of a README file</h2>
4141
<img src="./images/wireframes-01.png.webp" alt="illustration of a man showing a wireframe">
4242
<h2>What is the purpose of a wireframe</h2>
4343
<p>
44-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
45-
voluptates. Quisquam, voluptates.
44+
A wireframe is a simple visual representation of a website or application's layout. It acts as a
45+
blueprint ...
4646
</p>
4747
<a class="article-read-more" href="wireframe.html" aria-label="read more about the purpose of a wireframe">Read
4848
more</a>
@@ -52,8 +52,8 @@ <h2>What is the purpose of a wireframe</h2>
5252
<img src="./images/branch.webp" alt="illustration of a git tree branching out">
5353
<h2>What is a branch in Git?</h2>
5454
<p>
55-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
56-
voluptates. Quisquam, voluptates.
55+
A branch in Git is an independent line of development that allows developers to work on changes without
56+
affecting ...
5757
</p>
5858
<a class="article-read-more" href="branches.html" aria-label="read more about branches on git">Read more</a>
5959
</article>

‎Wireframe/readme.html‎

Lines changed: 110 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
56
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<meta name="description" content="A blog about, wireframes, git branching and readme files"/>
68
<title>Wireframe</title>
79
<link rel="stylesheet" href="style.css"/>
810
</head>
@@ -29,10 +31,115 @@ <h1 class="site-title">The Blog</h1>
2931
</div>
3032

3133
</header>
32-
<div class="container">
34+
<div class="container container-blog-content">
3335
<article>
34-
<h2></h2>
35-
<p></p>
36+
<header>
37+
<h2>What Is a README File?</h2>
38+
</header>
39+
40+
<p>
41+
A README file is one of the most important documents within a software
42+
project. It is usually the first file that users, developers, recruiters,
43+
or potential employers look at when they visit a project's repository.
44+
The name "README" comes from the idea that it should be the file people
45+
read before doing anything else with the project.
46+
</p>
47+
48+
<p>
49+
The primary purpose of a README file is to explain what the project is,
50+
why it exists, how it works, and how someone can use or contribute to it.
51+
Without proper documentation, even a well-built application can be
52+
difficult for others to understand and use.
53+
</p>
54+
55+
<section>
56+
<h3>What a README Usually Includes</h3>
57+
<p>A well-written README file often includes several key sections:</p>
58+
</section>
59+
60+
<section>
61+
<h3>Project Overview</h3>
62+
<p>
63+
The project overview provides a brief introduction explaining what the
64+
application does and what problem it solves. This section helps readers
65+
quickly determine whether the project is relevant to their needs.
66+
</p>
67+
<p>For example, a project overview might state:</p>
68+
<blockquote>
69+
<p>
70+
<em>
71+
"This application helps users track their daily water intake and
72+
set hydration goals through a simple and responsive interface."
73+
</em>
74+
</p>
75+
</blockquote>
76+
</section>
77+
78+
<section>
79+
<h3>Installation Instructions</h3>
80+
<p>
81+
Installation instructions explain how users can set up the project on
82+
their own machines. This may include downloading dependencies, cloning
83+
a repository, configuring environment variables, or running setup
84+
commands. Clear installation steps are especially important for
85+
open-source projects because they reduce confusion and allow others to
86+
start using the software quickly.
87+
</p>
88+
</section>
89+
90+
<section>
91+
<h3>Usage Information</h3>
92+
<p>
93+
The usage section explains how the application should be used once it
94+
has been installed. This may include screenshots, code examples, or
95+
step-by-step instructions. Users should be able to understand the main
96+
features and functionality of the application without having to read
97+
through the source code.
98+
</p>
99+
</section>
100+
101+
<section>
102+
<h3>Technologies Used</h3>
103+
<p>Many README files include a list of technologies used within the project, such as:</p>
104+
<ul>
105+
<li>HTML</li>
106+
<li>CSS</li>
107+
<li>JavaScript</li>
108+
<li>React</li>
109+
<li>Node.js</li>
110+
<li>MongoDB</li>
111+
</ul>
112+
<p>This gives readers a quick understanding of the project's technical stack.</p>
113+
</section>
114+
115+
<section>
116+
<h3>Contribution Guidelines</h3>
117+
<p>
118+
If a project accepts contributions from other developers, the README
119+
often explains how people can contribute, submit bug reports, or create
120+
pull requests.
121+
</p>
122+
</section>
123+
124+
<section>
125+
<h3>Why README Files Matter</h3>
126+
<p>
127+
README files serve as a communication tool between developers and users.
128+
They improve project maintainability, make onboarding easier for new
129+
team members, and demonstrate professionalism.
130+
</p>
131+
<p>
132+
For developers building a portfolio, a strong README can make a
133+
significant difference. Recruiters often review project documentation
134+
before looking at the code itself. A clear README demonstrates
135+
organisation, attention to detail, and an understanding of industry
136+
best practices.
137+
</p>
138+
<p>
139+
In many ways, a README file acts as the project's user guide,
140+
instruction manual, and introduction all in one document.
141+
</p>
142+
</section>
36143
</article>
37144
</div>
38145
<footer class="site-footer">

0 commit comments

Comments
 (0)