Skip to content

Glasgow | Jan-26 | Elisabeth Matulian | Sprint 1 | Wireframe #939

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
Elisabeth-Matulian wants to merge 5 commits into
base: main
Choose a base branch
from
+69 −27
Open

Glasgow | Jan-26 | Elisabeth Matulian | Sprint 1 | Wireframe #939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
66c88bf
Working with wareframe
Elisabeth-Matulian Jan 10, 2026
7cca5f5
Added pics and filled the footer with links.
Elisabeth-Matulian Jan 19, 2026
7dbae9f
Align images and links, remove link borders and bullets, deleted unus…
Elisabeth-Matulian Jan 20, 2026
b70e461
git commit -m added background color and make footer
Elisabeth-Matulian Jan 21, 2026
7dc1e66
Update footer: set light grey background for better contrast
Elisabeth-Matulian 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
Binary file added Wireframe/image_branch.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/image_readme.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/image_wireframe.avif
View file
Open in desktop
Binary file not shown.
77 changes: 50 additions & 27 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,56 @@
<!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>
<header>
<h1>Wireframe</h1>

<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>Key Web Development Concepts</h1>
<p>
Definitions of README files, Wireframes, and Git branches.
</p>
</header>
<main>
<article>
<img src="image_readme.webp" alt="A picture about the necessity of the readme file" />
<h2>What is a README file?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A README file is a document included in a project that explains what the project is about, how to set it up, and
how to use it. It helps other developers and users understand your work quickly.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<a
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
more</a>
</article>
<article>
<img height="500" src="image_wireframe.avif" alt="Wireframe sketch example" />
<h2>What is a Wireframe?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A wireframe is a simple visual guide that represents the structure of a webpage or app. It shows where elements like buttons, text, and images will be placed and how users will interact with them.
</p>
</footer>
</body>
</html>
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
</article>
<article>
<img height="500" src="image_branch.webp" alt="Git branches diagram" />
<h2>What is a Branch in Git?</h2>
<p>
A branch in Git is a separate line of development in a project. It allows you to work on new features or fixes without affecting the main code. Once ready, the changes can be merged back into the main branch.
</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
</article>
</main>
<footer>
Copy link

@jenny-alexander jenny-alexander Jan 19, 2026

Choose a reason for hiding this comment

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

Your footer is looking better now. However, I see a few issues that should be fixed.

  1. Since you are using <li> elements, the default will show a bullet point. Can you find a way to ensure that those bullet points are not displayed?
Image
  1. The exercise instructions say: "The page footer is fixed to the bottom of the viewport." Right now, when I scroll up and down on your webpage, the footer is not fixed. If you aren't sure what a fixed footer is, here is a good example from W3Schools.

Copy link
Author

@Elisabeth-Matulian Elisabeth-Matulian Jan 20, 2026

Choose a reason for hiding this comment

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

Thanks for your helpful feedback. I’ve made changes but I'm not sure if I correctly understand the way the footer should look.

I’d really appreciate it if you could take another look and let me know if everything looks good now.

Thanks again for your guidance.

Copy link

@jenny-alexander jenny-alexander Jan 20, 2026

Choose a reason for hiding this comment

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

@Elisabeth-Matulian - I had a look at your footer and I think there are a few opportunities to improve it.

I took a video recording for you to see what I mean. I also added an orange background colour to it. You can see that your footer isn't spanning the entire width of the screen.
Can you make changes to:
1 - Add a background color so the user can always see your footer?
2 - Ensure that the footer takes up the entire width of the page?

Screen.Recording.2026-01-20.at.3.07.46.PM.mov

Copy link
Author

@Elisabeth-Matulian Elisabeth-Matulian Jan 21, 2026

Choose a reason for hiding this comment

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

Thank you very much for taking the time to review my work and for the detailed feedback.

I’ve now updated the footer to add a background colour and ensured it spans the full width of the page.

When you have a moment, could you please have another look and let me know if everything looks correct now?

Thanks again for your help.

Copy link

@jenny-alexander jenny-alexander Jan 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

@Elisabeth-Matulian I'm glad you found my comments useful!

I reviewed the footer and see it's now visible ✅ and it's full width ✅. I ran an accessibility report against your page and see a small issue with the contrast ratio of the footer. Can you take a look?

Also, wanted to point out that the 'Read more' buttons on the wireframe have a complete border around them and yours only have an underline.
https://github.com/CodeYourFuture/Module-Onboarding/tree/main/Wireframe
At this point, I'm not going to ask you change that -> but wanted to highlight to ensure in the future that you try to follow the wireframe as closely as possible! ☺️

Copy link
Author

@Elisabeth-Matulian Elisabeth-Matulian Jan 21, 2026

Choose a reason for hiding this comment

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

Thank you for reviewing my updates. I’m glad the previous changes improved the footer.
I’ve noted the accessibility contrast issue and adjusted it. When you have a moment, could you please take another look at my full submission?

<ul>
<li><a href="mailto:elisabeth.matulian@example.com">Email</a></li>
<li><a href="https://codeyourfuture.io">Website</a></li>
<li><span>© 2026 Elisabeth Matulian</span></li>
</ul>
</footer>
</body>

</html>
19 changes: 19 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
padding-bottom: 60px;
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
border-style: none;
}
img,
svg {
Expand All @@ -48,11 +50,15 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
display: flex;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
height: 60px;
background-color:#f6f4f4;
width: 100%;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -87,3 +93,16 @@ article {
grid-column: span 3;
}
}

header {
text-align: center;
}
ul {
display: flex;
justify-content: center;
}
li {
padding: 15px;
font-size: 10px;
list-style-type: none;
}