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 11 commits into
base: main
Choose a base branch
from
+78 −18
Open

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 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
30e35da
Add flexbox layout to body to fix footer overlap issue
ChinweP Jun 9, 2026
8016fca
Replace fixed footer with flexbox sticky footer (margin-top: auto)
ChinweP Jun 9, 2026
d6246a3
Add image for README, wireframe, and git branch
ChinweP Jun 10, 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" />

@akeren akeren Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@ChinweP ChinweP Jun 10, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@akeren, Thank you for your feedback. I have added the appropriate image.

<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" />

@akeren akeren Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@ChinweP ChinweP Jun 10, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@akeren, Thank you for your feedback. I have added the appropriate image.

<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" />

@akeren akeren Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@ChinweP, could you find an appropriate image that aligns with this article and update it as stated in the acceptance criteria?

@ChinweP ChinweP Jun 10, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@akeren, Thank you for your feedback. I have added the appropriate image.

<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 69

@akeren akeren Jun 5, 2026

Copy link
Copy Markdown

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?

@ChinweP ChinweP Jun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@akeren, I'm not sure how. Please, help me understand

@ChinweP ChinweP Jun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Is it by removing unnecessary slashes from code? for example: This Example of a webpage wireframe to Example of a webpage wireframe

@akeren akeren Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@akeren, I'm not sure how. Please, help me understand

@ChinweP, some empty spaces made the code not clean and consistent. You could consider using prettier or eslint to help with consistent code formatting without issues.

@akeren akeren Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@ChinweP, you may follow this guideline to enable that 👉 https://github.com/CodeYourFuture/Module-Onboarding/blob/main/practical_guide.md

@ChinweP ChinweP Jun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you @akeren for your feedback and explanation. I did consistently format document with prettier.

<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 69 to 74

@akeren akeren Jun 5, 2026

Copy link
Copy Markdown

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?

@ChinweP ChinweP Jun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

The footer is scrolling above the UI because I set it to position: fixed, which removes it from the normal page flow. To fix it, I will remove the fixed positioning and use a flexbox layout with margin-top: auto so the footer stays at the bottom without covering any content.

@ChinweP ChinweP Jun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@akeren, I have fixed the footer.

</body>
Expand Down
27 changes: 22 additions & 5 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);

min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
padding: var(--space);
Expand All @@ -49,11 +53,7 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
}

/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Expand Down Expand Up @@ -87,3 +87,20 @@ 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 {
margin-top: auto;
text-align: center;
padding: var(--space);
}