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 6 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
48 changes: 37 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,57 @@
<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>
<h1>Understanding README Files, Wireframes and Git Branches</h1>
<p>
This is the default, provided code and no changes have been made yet.
</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>
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="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/" target="_blank">Read more</a>

@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, why is this resource returning a Not Found (404)?

@ChinweP ChinweP Jun 5, 2026 •
edited
Loading

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 URL is not complete. I missed adding "-guide" at the end of the URL. The complete URL is: https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

</article>

<article id="branch-article">
<img src="placeholder.svg" alt="Diagram showing Git branches"/>
<h2>What is a branch in Git?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
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="">Read more</a>
<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>
</html>
23 changes: 23 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,26 @@ 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;
}




@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, could you explain why you've added these empty lines?

@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.

It is as a result of deleting some codes and I didn't think it mattered but I have removed them. I guess it helps with better formatting. @akeren, am I right?

@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.

It is as a result of deleting some codes and I didn't think it mattered but I have removed them. I guess it helps with better formatting. @akeren, am I right?

Yes @ChinweP

Loading