Skip to content

MANCHESTER | MAY-2025 | Chukwuemeke Ajuebor | Wireframe #469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 45 additions & 8 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,62 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Readmes, Wireframe & Branches</h1>
<p>
This is the default, provided code and no changes have been made yet.
Here we give you a snippet of what these basic terms are in Web development.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://cdn12.picryl.com/photo/2016/12/31/blank-board-business-business-finance-4e1d6a-1024.jpg" alt="A pinned sheet of paper on a noticeboard" />
<h2>README</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file serves as the introductory document for a project, providing essential information to help users understand, install, and use the software or codebase. It typically outlines the project's purpose, installation instructions, usage examples, and any dependencies or requirements. The README helps streamline collaboration and onboarding by offering a clear overview and guidance to developers, users, or contributors.
<ol>
<li>Introduces the project and explains its purpose.
<li>Provides installation, usage, and setup instructions.
<li>Helps new users or contributors understand how to get started.
</ol>

</p>
<a href="">Read more</a>
<a href="https://en.wikipedia.org/wiki/README">Read more</a>

<img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Robot_wireframe.jpg" alt="Wireframe of a CAD Robot" />
<h2>wireframe</h2>
<p>
A wireframe is a visual blueprint or schematic used in the early stages of designing a website or application.
It outlines the basic structure and layout of a page, focusing on content placement, user interface elements,
and functionality without involving design details like colors or images. Wireframes help stakeholders, designers,
and developers align on functionality and user experience before investing in full design or development
<ol>
<li>Shows the layout and structure of a page or screen.
<li> Helps plan functionality and user interactions.
<li>Facilitates early feedback and alignment before detailed design.
</ol>

</p>
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSv6sQ_lMGsaVpNGAbpbSR53noaBwktmTH7aSaNxm01iuqIiXVttbf7xpAvrGus9J-qec&usqp=CAU" alt="An actual tree shown with it's branches" />
<h2>Branch in Git</h2>
<p>
A branch in Git allows developers to work on different versions or features of a project simultaneously without affecting the main codebase.
By creating a branch, you can isolate changes, experiment freely, and collaborate with others before merging the updates into the main branch.
This helps manage development workflows, avoid conflicts, and maintain a stable production environment.

<ol>
<li>Enables isolated development of features or fixes.
<li>Prevents disruptions to the main codebase.
<li>Supports collaboration and smoother code integration.
</ol>

</p>
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
CYF ITP May 2025 Coursework
</p>
</footer>
</body>
Expand Down
6 changes: 4 additions & 2 deletions Wireframe/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ body {
a {
padding: var(--space);
border: var(--line);
color:rgb(from color 215 215 215);
max-width: fit-content;
}
img,
Expand All @@ -50,8 +51,9 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
position: absolute;
bottom: 10;
font-family: helvetica;
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down