London | 26-ITP-Jan | Shuheda Begum | Sprint 1 | Wireframe #956
+190
−87
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,33 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <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> | ||
| <!-- Page Header --> | ||
| <header class="page-header"> | ||
| <h1>Featured Articles</h1> | ||
| <p>Explore our most recent and highlighted articles in one place.</p> | ||
| </header> | ||
|
|
||
| <!-- Main Content --> | ||
| <main class="content"> | ||
| <!-- Featured Article --> | ||
| <article class="featured"> | ||
| <div class="image"> | ||
| <img src="ReadMeImages.png" | ||
| alt="Read me Article image" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h2>What is the purpose of a README file?</h2> | ||
| <p> | ||
| A README file serves as the main introduction to a project and helps users and developers quickly understand | ||
| what it is, what it does, and how to use it. It typically explains the project’s purpose and key features, | ||
| provides basic instructions for installation or usage, and offers important details such as dependencies or | ||
| setup requirements. A README may also include contribution guidelines, licensing information, and contact | ||
| details, making it easier for others to collaborate and maintain the project. Overall, the purpose of a README | ||
| file is to clearly communicate essential information so the project is easy to understand, use, and contribute | ||
| to. | ||
| </p> | ||
| <a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read | ||
| more</a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <!-- Two-column Articles --> | ||
| <section class="grid"> | ||
| <article class="card"> | ||
| <div class="image"> | ||
| <img | ||
| src="WireFrameImage.png" | ||
| alt="Wire Frame Article image" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h3>What is the purpose of a wireframe?</h3> | ||
| <p> | ||
| The purpose of a wireframe is to provide a visual blueprint of a website or application before it is fully | ||
| designed or built. It outlines the layout, structure, and placement of elements such as headers, content | ||
| areas, images, and navigation without focusing on colors or detailed styling. Wireframes help designers, | ||
| developers, and stakeholders understand how content will be organized, identify usability issues early, and | ||
| plan functionality efficiently. | ||
| </p> | ||
| <a href="https://www.geeksforgeeks.org/websites-apps/purpose-of-wireframing-in-web-design-process/">Read | ||
| more</a> | ||
| </div> | ||
| </article> | ||
|
|
||
|
|
||
| <article class="card"> | ||
| <div class="image"> | ||
| <img | ||
| src="GitBranchesImage.png" | ||
| alt="Git Branches Article image" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h3>What is a branch in Git?</h3> | ||
| <p> | ||
| A branch in Git is a separate line of development that allows you to work on changes without affecting the | ||
| main codebase. It lets you create and test new features, fix bugs, or experiment with ideas independently | ||
| from the main branch (often called main or master). Branches make it easy to manage multiple versions of a | ||
| project at the same time and safely merge completed work back into the main code when it is ready. | ||
| </p> | ||
| <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </main> | ||
|
|
||
| <!-- Footer --> | ||
| <footer class="footer"> | ||
| <p> | ||
| © 2026 Featured Articles. All rights reserved. | ||
| </p> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
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 |
|---|---|---|
|
|
@@ -16,74 +16,117 @@ As well as useful links to learn more */ | |
| https://web.dev/articles/min-max-clamp | ||
| https://scrimba.com/learn-css-variables-c026 | ||
| ====== Design Palette ====== */ | ||
| /* Reset */ | ||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| background: #f5f4f4; | ||
| color: #000; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| /* Header */ | ||
| .page-header { | ||
| text-align: center; | ||
| padding: 2rem 1rem; | ||
| } | ||
|
|
||
| .page-header h1 { | ||
| font-size: 2.5rem; | ||
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
| .page-header p { | ||
| font-size: 1rem; | ||
| color: #555; | ||
| } | ||
|
|
||
| /* Main content */ | ||
| .content { | ||
| max-width: 1100px; | ||
| margin: 0 auto; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| /* Featured article */ | ||
| .featured { | ||
| border: 2px solid #000; | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .featured .image { | ||
| height: 250px; | ||
| border-bottom: 2px solid #000; | ||
| } | ||
| .image img { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| .featured .text { | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .featured h2 { | ||
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
| /* Article grid */ | ||
| .grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| gap: 1.5rem; | ||
| } | ||
|
|
||
| /* Article cards */ | ||
| .card { | ||
| border: 2px solid #000; | ||
| } | ||
|
|
||
| .card .image { | ||
| height: 200px; /* Keep this or adjust as needed */ | ||
| width: 100%; /* Added to make the image fit the container */ | ||
| border-bottom: 2px solid #000; | ||
| } | ||
|
|
||
| .card .text { | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| .card h3 { | ||
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
|
|
||
| /* Footer */ | ||
| .footer { | ||
| position: fixed; | ||
| bottom: 0; | ||
| width: 100%; | ||
| z-index: 1000; text-align: center; | ||
|
There was a problem hiding this comment. Is
Author
There was a problem hiding this comment. I've spoken to a few others that have completed this task, an none of them have been asked to line up the 'Read more' horizontally. I will run the comments you've made by Ebrahim tomorrow morning, because I've done the task, its complete, but you keep coming back with more things to do. I've got many other mandatory task to complete, and at this rate, all my free time is spent correcting things, that the others I'm working alongside, have not even have to address and their work has been marked complete. There was a problem hiding this comment. @codebyshay - I appreciate you raising this concern. I have asked other ITP trainees to fix alignment issues with their wireframe webpage. I completely understand you have other tasks and time constraints! If you feel the requirements are unreasonable or unclear, that's absolutely worth discussing with Ebrahim. But from a code review perspective, my job is to ensure the implementation matches the specification—which includes layout details like alignment. |
||
| border-top: 1px solid rgb(14, 13, 13); | ||
| background-color: #f8ea1e; | ||
| } | ||
|
|
||
| /* Responsive */ | ||
| @media (max-width: 768px) { | ||
| .grid { | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .featured .image { | ||
| height: 220px; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| outline: 1px solid black; | ||
| padding: 4px; | ||
| border-radius: 12px; | ||
| } | ||
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.
There are two footer classes defined. It's easier to maintain and avoid conflicts if only one footer class is defined.