Glasgow | 25-ITP-SEP | Chibuikem Okwu | Sprint 1 | Wireframe #909
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,31 +3,80 @@ | |
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Wireframe.</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Wireframe Web Project </h1> | ||
| <p> | ||
| Learn about key tools every developer uses: README files, wireframes, | ||
| and Git branches. | ||
| </p> | ||
| </header> | ||
| <main> | ||
| <article> | ||
| <div> | ||
| <img src="readme.jpg" alt=Screenshot of a README file example showing project documentation" /> | ||
|
There was a problem hiding this comment. There is a typo in your There was a problem hiding this comment. @chibu0070 - the typo still exists on line 21 above. Can you find it within the 'alt' portion of the img tag? |
||
| <h2>What is the purpose of a README file?</h2> | ||
| <p> | ||
| A README file introduces a project, explaining what it does, how | ||
| to install it, and how to use it. It helps others understand your | ||
| project quickly. | ||
| </p> | ||
| <a | ||
| href="https://www.makeareadme.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >Read more</a | ||
| ><br> | ||
| </div> | ||
| <br> | ||
| </article> | ||
|
|
||
|
There was a problem hiding this comment. The bottom two article's titles don't quite line up horizontally. Can you review and ensure that their alignment matches the wireframe. 
There was a problem hiding this comment. The alignment is still not quite right. Can you find a way to fix it? Perhaps you can research online how to do this with CSS? |
||
| <article> | ||
| <img src="wireframed1.png" alt="Example of a website wireframe showing layout structure" /> | ||
| <div> | ||
| <h2>What is the purpose of a wireframe?</h2> | ||
| <p> | ||
| A wireframe is a visual guide that outlines a webpages structure. | ||
| Designers and developers use it to plan layouts before adding | ||
| content or styling. | ||
| </p> | ||
| <a | ||
| href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| >Read more</a | ||
| > | ||
| </div> | ||
| <br> | ||
| </article> | ||
|
|
||
| <article> | ||
| <img src="branch-in-git.jpg" alt="Diagram showing Git branches and their relationships" /> | ||
| <div> | ||
| <h2>What is a branch in Git? | ||
|
|
||
| </h2> | ||
| <p> | ||
| A Git branch allows developers to work on new features or fixes | ||
| separately from the main code. This keeps the main project stable | ||
| while updates are tested. | ||
| </p> | ||
| <a | ||
| href="https://www.atlassian.com/git/tutorials/using-branches" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > Read more </a> | ||
| </div> | ||
| <br> | ||
| </article> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
|
There was a problem hiding this comment. The footer requirements are: Do you know what 'fixed to the bottom of the viewport' means? It means that the footer is always visible no matter where you scroll to on the page. Right now, when I scroll to the top of the page, the footer disappears. There was a problem hiding this comment. Good job updating your footer. |
||
| <p>© 2025 CodeYourFuture Chibuikem Okwu</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
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.
The top article's title and description don't match the wireframe alignment. Can you review the wireframe and make the necessary changes?
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.
The title and description match the wireframe now.