London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe#1411
London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe#1411ChinweP wants to merge 8 commits into
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ChinweP
added
the
Needs Review
akeren
added
📅 Sprint 2
akeren
left a comment
akeren
left a comment
There was a problem hiding this comment.
@ChinweP, your codebase is well-structured, simple, and easy to follow, with two files saved in the root directory of your project.
-
As your projects grow, what might happen if you later add more CSS or JavaScript files?
-
How could you organise your folders so the project stays easy to navigate, scalable, and maintainable now and in the future?
|
|
||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
@ChinweP, could you explain why you've added these empty lines?
| <footer> | ||
| <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> |
There was a problem hiding this comment.
@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?
| <!--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> | ||
| 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> | ||
| </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> |
There was a problem hiding this comment.
@ChinweP, how could you improve the code formatting?
| 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> |
There was a problem hiding this comment.
@ChinweP, why is this resource returning a Not Found (404)?
There was a problem hiding this comment.
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/
akeren
added
Reviewed
|
Thank you @akeren for your review and comment. I will look into all your comments. |
2 participants
Learners, PR Template
Self checklist
Changelist
I built a webpage using the provided wireframe and added all the required content. The page includes three articles explaining README files, wireframes and Git branches. I added images, alt texts, summaries, "Read more" links, fixed the footer to the bottom, styled everything with CSS file and then checked accessibility with Lighthouse. I also validated my code using the W3C validator.