London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe #1411
+66
−13
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,66 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Understanding README, Wireframe and Git Branch</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Understanding README Files, Wireframes and Git Branches</h1> | ||
| <p>A simple guide explaining three important web development concepts.</p> | ||
| </header> | ||
| <main> | ||
| <!--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-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> | ||
| <p> | ||
| Footers usually contain contact links and other information about the | ||
| site overall | ||
| </p> | ||
| </footer> | ||
|
Comment on lines
60
to
65
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?
Author
There was a problem hiding this comment. 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. |
||
| </body> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
to 
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ChinweP, some empty spaces made the code not clean and consistent. You could consider using
prettieroreslintto help with consistent code formatting without issues.