From 29f9281053c1997f98d026cc3fd65aec65281b56 Mon Sep 17 00:00:00 2001 From: d-odumosu Date: Wed, 13 May 2026 17:04:01 +0100 Subject: [PATCH 01/18] feat:added firstname, lastname, email and shirt color. --- Form-Controls/index.html | 42 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..2932f0224 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -17,6 +17,48 @@

Product Pick

+ + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ Choose a shirt color: +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html index 627834866..562ffade8 100644 --- a/Wireframe/wireframe.html +++ b/Wireframe/wireframe.html @@ -2,7 +2,9 @@ + + Wireframe From e8d4e9dde6f5d22737c66e8a099e793fe3675489 Mon Sep 17 00:00:00 2001 From: d-odumosu Date: Sat, 30 May 2026 22:28:09 +0100 Subject: [PATCH 13/18] feat: added blog post content to all pages --- Wireframe/branches.html | 123 +++++++++++++++++++++++++++++++- Wireframe/index.html | 12 ++-- Wireframe/readme.html | 113 +++++++++++++++++++++++++++++- Wireframe/wireframe.html | 147 +++++++++++++++++++++++++++++++++++++-- 4 files changed, 379 insertions(+), 16 deletions(-) diff --git a/Wireframe/branches.html b/Wireframe/branches.html index 49befda67..41471bdb7 100644 --- a/Wireframe/branches.html +++ b/Wireframe/branches.html @@ -30,10 +30,127 @@

The Blog

-
+
-

-

+
+

What Is a Branch in Git?

+
+ +

+ Modern software development often involves multiple developers working on the + same project simultaneously. Without a system for managing changes, code could + quickly become disorganised and difficult to maintain. +

+ +

+ Git solves this problem through version control, and one of its most powerful + features is branching. +

+ +

+ A branch in Git is a separate line of development that allows developers to + work on changes independently without affecting the main project. +

+ +

+ You can think of a branch as creating a copy of the project where changes can + be made safely. Once the work is complete and tested, those changes can be + merged back into the main project. +

+ +
+

Why Branches Are Important

+

Branches provide a safe and organised way to develop software.

+
+ +
+

Feature Development

+

+ Developers often create branches when working on new features. +

+

For example: feature-user-authentication

+

+ This branch might contain all the code required to add login and + registration functionality. +

+
+ +
+

Bug Fixes

+

+ Branches can also be used to fix bugs without interfering with ongoing + development. +

+

For example: fix-navigation-bug

+

+ Developers can work on the issue, test the solution, and merge it back + into the main branch when ready. +

+
+ +
+

Experimentation

+

+ Sometimes developers want to test a new idea without risking the stability + of the project. Branches provide a safe environment for experimentation. +

+

+ If the experiment fails, the branch can simply be deleted. +

+
+ +
+

Common Git Branch Workflow

+

A typical Git workflow follows these steps:

+
    +
  • Create a new branch.
    • +
  • Make changes within that branch.
    • +
  • Commit changes regularly.
    • +
  • Push the branch to GitHub.
    • +
  • Open a Pull Request.
    • +
  • Review and test the changes.
    • +
  • Merge the branch into the main branch.
    • +
+

+ This workflow helps maintain code quality and prevents accidental changes + to the production version of the project. +

+
+ +
+

Collaboration Benefits

+

+ Branches are especially valuable when multiple developers work together. +

+

Imagine a team building an e-commerce website:

+
    +
  • Developer A works on the shopping cart.
    • +
  • Developer B works on the product search feature.
    • +
  • Developer C fixes bugs in the checkout process.
    • +
+

+ Each developer can work on their own branch independently without + disrupting anyone else's work. Once their tasks are complete, their + changes can be reviewed and merged into the main branch. +

+

+ This approach improves collaboration, reduces conflicts, and allows teams + to develop features simultaneously. +

+
+ +
+

Branches and Professional Development

+

+ Branching is considered a standard industry practice. Employers expect + developers to understand how branches work because they form the foundation + of collaborative software development. +

+

+ Learning how to create, switch, merge, and manage branches is therefore an + essential skill for anyone pursuing a career in software engineering. +

+
diff --git a/Wireframe/index.html b/Wireframe/index.html index 504be1053..1ee53950a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,8 +30,8 @@

The Blog

illustration of a readme.md file

What is the purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is usually the first file someone sees when they open a project repository. Its main + purpose is ...

Read more @@ -41,8 +41,8 @@

What is the purpose of a README file

illustration of a man showing a wireframe

What is the purpose of a wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe is a simple visual representation of a website or application's layout. It acts as a + blueprint ...

Read more @@ -52,8 +52,8 @@

What is the purpose of a wireframe

illustration of a git tree branching out

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch in Git is an independent line of development that allows developers to work on changes without + affecting ...

Read more diff --git a/Wireframe/readme.html b/Wireframe/readme.html index 627834866..fdce56965 100644 --- a/Wireframe/readme.html +++ b/Wireframe/readme.html @@ -2,7 +2,9 @@ + + Wireframe @@ -29,10 +31,115 @@

The Blog

-
+
-

-

+
+

What Is a README File?

+
+ +

+ A README file is one of the most important documents within a software + project. It is usually the first file that users, developers, recruiters, + or potential employers look at when they visit a project's repository. + The name "README" comes from the idea that it should be the file people + read before doing anything else with the project. +

+ +

+ The primary purpose of a README file is to explain what the project is, + why it exists, how it works, and how someone can use or contribute to it. + Without proper documentation, even a well-built application can be + difficult for others to understand and use. +

+ +
+

What a README Usually Includes

+

A well-written README file often includes several key sections:

+
+ +
+

Project Overview

+

+ The project overview provides a brief introduction explaining what the + application does and what problem it solves. This section helps readers + quickly determine whether the project is relevant to their needs. +

+

For example, a project overview might state:

+
+

+ + "This application helps users track their daily water intake and + set hydration goals through a simple and responsive interface." + +

+
+
+ +
+

Installation Instructions

+

+ Installation instructions explain how users can set up the project on + their own machines. This may include downloading dependencies, cloning + a repository, configuring environment variables, or running setup + commands. Clear installation steps are especially important for + open-source projects because they reduce confusion and allow others to + start using the software quickly. +

+
+ +
+

Usage Information

+

+ The usage section explains how the application should be used once it + has been installed. This may include screenshots, code examples, or + step-by-step instructions. Users should be able to understand the main + features and functionality of the application without having to read + through the source code. +

+
+ +
+

Technologies Used

+

Many README files include a list of technologies used within the project, such as:

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • React
    • +
  • Node.js
    • +
  • MongoDB
    • +
+

This gives readers a quick understanding of the project's technical stack.

+
+ +
+

Contribution Guidelines

+

+ If a project accepts contributions from other developers, the README + often explains how people can contribute, submit bug reports, or create + pull requests. +

+
+ +
+

Why README Files Matter

+

+ README files serve as a communication tool between developers and users. + They improve project maintainability, make onboarding easier for new + team members, and demonstrate professionalism. +

+

+ For developers building a portfolio, a strong README can make a + significant difference. Recruiters often review project documentation + before looking at the code itself. A clear README demonstrates + organisation, attention to detail, and an understanding of industry + best practices. +

+

+ In many ways, a README file acts as the project's user guide, + instruction manual, and introduction all in one document. +

+
diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html index 562ffade8..cb94fdc2f 100644 --- a/Wireframe/wireframe.html +++ b/Wireframe/wireframe.html @@ -31,10 +31,149 @@

The Blog

-
-
-

-

+
+
+
+

What Is the Purpose of a Wireframe?

+
+ +

+ Before developers begin building a website or application, they need a clear + plan for how the interface will look and function. This is where wireframes + become extremely valuable. +

+ +

+ A wireframe is a visual representation of a web page, application screen, or + user interface. It focuses on structure, layout, and functionality rather than + colours, fonts, images, or detailed design elements. +

+ +

+ Wireframes are often described as the blueprint of a website because they show + where key components will be placed before development begins. +

+ +
+

What Does a Wireframe Include?

+

A wireframe typically shows:

+ +
    +
  • Navigation menus
    • +
  • Headers and footers
    • +
  • Content sections
    • +
  • Images or image placeholders
    • +
  • Buttons
    • +
  • Forms
    • +
  • Search bars
    • +
  • Sidebars
    • +
  • Calls to action
    • +
+ +

+ Instead of concentrating on aesthetics, wireframes focus on user experience + and information hierarchy. +

+
+ +
+

Types of Wireframes

+

There are generally three levels of wireframes:

+ +
+

Low-Fidelity Wireframes

+

+ These are simple sketches or basic digital layouts that focus on page + structure. They are often created quickly and used during the early + planning stages. +

+
+ +
+

Mid-Fidelity Wireframes

+

+ These include more detail, such as content placement and interface + components, but still avoid visual styling. +

+
+ +
+

High-Fidelity Wireframes

+

+ These closely resemble the final product and may include realistic + layouts, spacing, and interactions. They are often used before moving + into the design phase. +

+
+
+ +
+

Why Wireframes Are Important

+

+ Wireframes provide several benefits throughout the development process. +

+ +
+

Improved Planning

+

+ Creating a wireframe allows teams to think through the layout before + investing time in coding. This helps identify potential issues early + and reduces the need for major redesigns later. +

+
+ +
+

Better Communication

+

+ Wireframes make it easier to communicate ideas between developers, + designers, clients, and stakeholders. Everyone can visualise the + structure of the project and provide feedback before development begins. +

+
+ +
+

Focus on User Experience

+

+ Because wireframes remove distractions such as colours and styling, + they encourage teams to focus on usability and functionality. +

+
+ +
+

Reduced Development Costs

+

+ Making changes to a wireframe is much quicker and less expensive than + changing a completed website. Catching problems early can save + significant development time. +

+
+
+ +
+

Real-World Example

+

+ Imagine a team is building an online bookstore. Before writing any code, + they create wireframes showing: +

+ +
    +
  • The homepage
    • +
  • Product catalogue pages
    • +
  • Individual book pages
    • +
  • Shopping cart
    • +
  • Checkout process
    • +
+ +

+ This allows them to map out the user's journey and ensure that customers + can easily find and purchase books. +

+ +

+ Wireframes help transform ideas into organised plans, making them a crucial + part of the web development process. +

+
From 5f0b48b230d94b1d69a29ba7b61d03c4e149d533 Mon Sep 17 00:00:00 2001 From: d-odumosu Date: Sun, 31 May 2026 23:27:48 +0100 Subject: [PATCH 14/18] feat: all pages completed and meets all requirements --- Wireframe/branches.html | 238 ++++++++++++++++++------------------ Wireframe/index.html | 17 +-- Wireframe/readme.html | 217 +++++++++++++++++---------------- Wireframe/style.css | 94 ++++++++++++++- Wireframe/wireframe.html | 253 ++++++++++++++++++++------------------- 5 files changed, 455 insertions(+), 364 deletions(-) diff --git a/Wireframe/branches.html b/Wireframe/branches.html index 41471bdb7..d019c0676 100644 --- a/Wireframe/branches.html +++ b/Wireframe/branches.html @@ -31,143 +31,147 @@

The Blog

-
-
-

What Is a Branch in Git?

-
- -

- Modern software development often involves multiple developers working on the - same project simultaneously. Without a system for managing changes, code could - quickly become disorganised and difficult to maintain. -

- -

- Git solves this problem through version control, and one of its most powerful - features is branching. -

- -

- A branch in Git is a separate line of development that allows developers to - work on changes independently without affecting the main project. -

- -

- You can think of a branch as creating a copy of the project where changes can - be made safely. Once the work is complete and tested, those changes can be - merged back into the main project. -

- -
-

Why Branches Are Important

-

Branches provide a safe and organised way to develop software.

-
- -
-

Feature Development

+
+
+
+

What Is a Branch in Git?

+
+

Git documentation explains that branches allow developers to diverge from the main line of development + and + work independently on features, fixes, or experiments before merging their changes back into the project + (Git SCM, n.d.).

- Developers often create branches when working on new features. + Modern software development often involves multiple developers working on the + same project simultaneously. Without a system for managing changes, code could + quickly become disorganised and difficult to maintain.

-

For example: feature-user-authentication

-

- This branch might contain all the code required to add login and - registration functionality. -

-
-
-

Bug Fixes

-

- Branches can also be used to fix bugs without interfering with ongoing - development. -

-

For example: fix-navigation-bug

- Developers can work on the issue, test the solution, and merge it back - into the main branch when ready. + Git solves this problem through version control, and one of its most powerful + features is branching.

-
-
-

Experimentation

- Sometimes developers want to test a new idea without risking the stability - of the project. Branches provide a safe environment for experimentation. + A branch in Git is a separate line of development that allows developers to + work on changes independently without affecting the main project.

-

- If the experiment fails, the branch can simply be deleted. -

-
-
-

Common Git Branch Workflow

-

A typical Git workflow follows these steps:

-
    -
  • Create a new branch.
    • -
  • Make changes within that branch.
    • -
  • Commit changes regularly.
    • -
  • Push the branch to GitHub.
    • -
  • Open a Pull Request.
    • -
  • Review and test the changes.
    • -
  • Merge the branch into the main branch.
    • -
-

- This workflow helps maintain code quality and prevents accidental changes - to the production version of the project. -

-
- -
-

Collaboration Benefits

-

- Branches are especially valuable when multiple developers work together. -

-

Imagine a team building an e-commerce website:

-
    -
  • Developer A works on the shopping cart.
    • -
  • Developer B works on the product search feature.
    • -
  • Developer C fixes bugs in the checkout process.
    • -
-

- Each developer can work on their own branch independently without - disrupting anyone else's work. Once their tasks are complete, their - changes can be reviewed and merged into the main branch. -

- This approach improves collaboration, reduces conflicts, and allows teams - to develop features simultaneously. + You can think of a branch as creating a copy of the project where changes can + be made safely. Once the work is complete and tested, those changes can be + merged back into the main project.

-
-
-

Branches and Professional Development

-

- Branching is considered a standard industry practice. Employers expect - developers to understand how branches work because they form the foundation - of collaborative software development. -

-

- Learning how to create, switch, merge, and manage branches is therefore an - essential skill for anyone pursuing a career in software engineering. -

-
-
+
+

Why Branches Are Important

+

Branches provide a safe and organised way to develop software.

+
+ +
+

Feature Development

+

+ Developers often create branches when working on new features. +

+

For example: feature-user-authentication

+

+ This branch might contain all the code required to add login and + registration functionality. +

+
+ +
+

Bug Fixes

+

+ Branches can also be used to fix bugs without interfering with ongoing + development. +

+

For example: fix-navigation-bug

+

+ Developers can work on the issue, test the solution, and merge it back + into the main branch when ready. +

+
+ +
+

Experimentation

+

+ Sometimes developers want to test a new idea without risking the stability + of the project. Branches provide a safe environment for experimentation. +

+

+ If the experiment fails, the branch can simply be deleted. +

+
+ +
+

Common Git Branch Workflow

+

A typical Git workflow follows these steps:

+
    +
  • Create a new branch.
    • +
  • Make changes within that branch.
    • +
  • Commit changes regularly.
    • +
  • Push the branch to GitHub.
    • +
  • Open a Pull Request.
    • +
  • Review and test the changes.
    • +
  • Merge the branch into the main branch.
    • +
+

+ This workflow helps maintain code quality and prevents accidental changes + to the production version of the project. +

+
+ +
+

Collaboration Benefits

+

+ Branches are especially valuable when multiple developers work together. +

+

Imagine a team building an e-commerce website:

+
    +
  • Developer A works on the shopping cart.
    • +
  • Developer B works on the product search feature.
    • +
  • Developer C fixes bugs in the checkout process.
    • +
+

+ Each developer can work on their own branch independently without + disrupting anyone else's work. Once their tasks are complete, their + changes can be reviewed and merged into the main branch. +

+

+ This approach improves collaboration, reduces conflicts, and allows teams + to develop features simultaneously. +

+
+ +
+

Branches and Professional Development

+

+ Branching is considered a standard industry practice. Employers expect + developers to understand how branches work because they form the foundation + of collaborative software development. +

+

+ Learning how to create, switch, merge, and manage branches is therefore an + essential skill for anyone pursuing a career in software engineering. +

+
+
+
\ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 1ee53950a..d873cca64 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,8 +4,8 @@ - - Wireframe + + The Blog | Learning Programming Basics @@ -34,7 +34,7 @@

What is the purpose of a README file

purpose is ...

Read more + aria-label="read more about what the purpose of a read me file does">README file ...
@@ -44,8 +44,7 @@

What is the purpose of a wireframe

A wireframe is a simple visual representation of a website or application's layout. It acts as a blueprint ...

- Read - more + Wireframes
@@ -55,20 +54,16 @@

What is a branch in Git?

A branch in Git is an independent line of development that allows developers to work on changes without affecting ...

- Read more + Git branching
-