Skip to content

London | 25-ITP-Jan | Oussama Mouggal | Sprint 1| Wireframe #1005

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
Oussama-Mouggal wants to merge 8 commits into
base: main
Choose a base branch
from
+31 −7
Open

London | 25-ITP-Jan | Oussama Mouggal | Sprint 1| Wireframe #1005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a56ce9
modified the header
Oussama-Mouggal Jan 21, 2026
ba2adca
created the first wireframe using html
Oussama-Mouggal Jan 21, 2026
f35b9aa
created the seconde wireframe and add urls
Oussama-Mouggal Jan 21, 2026
286e5db
added footer
Oussama-Mouggal Jan 21, 2026
d7062c1
fix: update footer styles for better visibility and layout
Oussama-Mouggal Jan 21, 2026
1833cd4
fix: update image source and footer background color for improved aes…
Oussama-Mouggal Jan 21, 2026
805dea8
Update Wireframe/index.html
Oussama-Mouggal Jan 21, 2026
1ea6b67
fix: update "Read more" links for articles to point to relevant resou…
Oussama-Mouggal Jan 21, 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
34 changes: 27 additions & 7 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,43 @@
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
This is an article explaining the wireframe structure of a webpage.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://markdown.land/wp-content/uploads/2022/01/VSCode-markdown-preview-1024x470.png" alt="Readme file picture" />
<h2>What is the purpose of a Readme file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A Readme file serves as a guide for users and developers, providing
essential information about a project, including its purpose,
installation instructions, usage guidelines, and contribution
protocols.
</p>
<a href="">Read more</a>
<a href="https://www.reddit.com/r/cs50/comments/x8965j/what_is_the_purpose_of_readme/">Read more</a>
</article>
<article>
<img src="https://images.edrawsoft.com/articles/wireframe/wireframe-1.jpg" alt="Wireframe picture" />
<h2>What is the purpose of a wireframe?
</h2>
Comment on lines +30 to +31
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The closing h2 tag is on a separate line, which is inconsistent with the formatting of other h2 elements in the file (see line 19 and line 39).

Copilot uses AI. Check for mistakes.
<p>
The purpose of a wireframe is to provide a visual guide that represents the skeletal framework of a website or application, helping to plan layout and functionality.
</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
</article>
<article>
<img src="https://git-scm.com/images/logos/downloads/Git-Logo-2Color.png" alt="Git logo" />
<h2>What is a branch in Git?
</h2>
Comment on lines +39 to +40
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The closing h2 tag is on a separate line, which is inconsistent with the formatting of other h2 elements in the file (see line 19).

Copilot uses AI. Check for mistakes.
<p>
A branch in Git is a separate line of development that allows multiple people to work on different features or fixes simultaneously without affecting the main codebase.
</p>
<a href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Codeyourfuture Jan26 - Wireframe assignment
</p>
</footer>
</body>
Expand Down
4 changes: 4 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,11 @@ main {
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4b3a3a;
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded color value #4b3a3a doesn't follow the design system established in the CSS file. Consider using CSS custom properties (like --ink or --paper) defined in the :root selector to maintain consistency with the design palette.

Copilot uses AI. Check for mistakes.
color: white;
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded color "white" doesn't follow the design system established in the CSS file. Consider using CSS custom properties (like --paper) defined in the :root selector to maintain consistency with the design palette.

Copilot uses AI. Check for mistakes.
text-align: center;
Comment on lines 53 to 59
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fixed positioning of the footer combined with width: 100% and bottom: 0 will cause the footer to overlay content at the bottom of the page. The main element has bottom margin (calc(var(--space) * 4)), but this may not be sufficient to prevent content from being hidden under the fixed footer. Consider adding padding-bottom to the body or adjusting the main margin to account for the footer height.

Copilot uses AI. Check for mistakes.
}
/* ====== Articles Grid Layout ====
Expand Down