Skip to content

London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe #1411

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.

Sign up for GitHub

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
ChinweP wants to merge 8 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe #1411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4206a32
Added wireframe title
ChinweP Jun 3, 2026
f2277c0
Added page title and description
ChinweP Jun 3, 2026
02587f9
Added full-width README article with image, title, summary and link
ChinweP Jun 3, 2026
b7aec1c
Added two bottom articles with images and summaries
ChinweP Jun 3, 2026
f7c71a9
Added css to place bottom articles side by side
ChinweP Jun 3, 2026
faf93fe
Added images from the placeholder.svg folder
ChinweP Jun 4, 2026
731dc74
URL Not Found (404) error fixed
ChinweP Jun 5, 2026
51cfd01
Empty lines in css deleted
ChinweP Jun 5, 2026
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
60 changes: 47 additions & 13 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,66 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Understanding README, Wireframe and Git Branch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Understanding README Files, Wireframes and Git Branches</h1>
<p>A simple guide explaining three important web development concepts.</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<!--Top article (full-width)-->
<article class="top-article" id="readme-article">
<img src="placeholder.svg" alt="Illustration of a README file" />
<h2>What is the purpose of a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file explains what a project is about, how to use it, and any
important information someone needs before working with the project
code.
</p>
<a href="">Read more</a>
<a href="https://www.makeareadme.com/" target="_blank">Read more</a>
</article>

<!--Bottom two articles side -by-side-->

<section class="bottom-articles">
<article id="wireframe-article">
<img src="placeholder.svg" alt="Example of a webpage wireframe" />
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a simple layout plan that shows where content will go
on a webpage before you start designing or coding.
</p>

<a
href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/"
target="_blank"
>Read more</a
>
</article>

<article id="branch-article">
<img src="placeholder.svg" alt="Diagram showing Git branches" />
<h2>What is a branch in Git?</h2>
<p>
A Git baranch lets developers work on new features without affecting
the main project. When finished, the branch can be merged back in.
</p>
<a
href="https://www.atlassian.com/git/tutorials/using-branches"
target="_blank"
>Read more</a
>
</article>
</section>
</main>
<footer>
Comment on lines +15 to 60
Copy link
Copy Markdown

@akeren akeren Jun 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChinweP, how could you improve the code formatting?

<p>
This is the default, provided code and no changes have been made yet.
Footers usually contain contact links and other information about the
site overall
</p>
</footer>
Comment on lines 60 to 65
Copy link
Copy Markdown

@akeren akeren Jun 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChinweP, your footer is fixed throughout, which affects the user experience. Could you explain why it's scrolling above the UI and what CSS style would help fix it?

</body>
Expand Down
19 changes: 19 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,22 @@ article {
grid-column: span 3;
}
}

.bottom-articles {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
}

header{
text-align: center;
}

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}