Skip to content

Cape Town | May-ITP-26 | Enice Mutanda | Sprint 2 | WireFrame #1359

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
Enice-Codes wants to merge 1 commit into
base: main
Choose a base branch
from
+52 −11
Open

Cape Town | May-ITP-26 | Enice Mutanda | Sprint 2 | WireFrame #1359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/images/image1.jpg
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/images/image2.jpg
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/images/image3.jpg
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.
44 changes: 37 additions & 7 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,55 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<center>
<h1>Wireframe</h1>
</center>
<p>
This is the default, provided code and no changes have been made yet.
A wireframe is a basic, two-dimensional blueprint or outline of
a website or app interface
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>

<img src="images/image1.jpg" alt="" />
<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 is a document that provides information about a project,
including its purpose, how to use it, and any other relevant details.
It serves as a guide for users and developers who want to understand
the project and contribute to it.

</p>
<a href="">Read more</a>
</article>

<article>
<img src="images/image2.jpg" alt="" />
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

Providing meaningful alt text is important because it ensures images are accessible to people using screen readers and also helps when images
fail to load, giving users essential context about the content or function of the image.

Can you give a more descriptive alt value to all images?

<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a visual representation of a website or app's layout and
structure. It serves as a blueprint for the design and development
process, allowing designers and developers to plan the user interface
and user experience before creating the final product.</p>
<a href="">Read more</a>
</article>

<article>
<img src="images/image3.jpg" alt="" />
<h2>What is a branch?</h2>
<p>
Comment on lines +45 to +48
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

Indentation is off.

As a best practice, consider following this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.

A branch in version control is a separate line of development.
It allows you to work on different features or experiments without affecting the main codebase.
</p>
<a href="">Read more</a>

</article>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
CYF Module Onboarding - Wireframe Exercise 2026
</p>
</footer>
</body>
Expand Down
19 changes: 15 additions & 4 deletions Wireframe/style.css
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

There are two main selectors in this file. Consider merging the properties from both selectors into a single main rule to make them easier to find and maintain.

Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,40 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);

}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
}

h1{
postion: center;
}


img,
svg {
width: 100%;
object-fit: cover;

}

/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;

}

footer {
position: fixed;
bottom: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -86,4 +97,4 @@ article {
> img {
grid-column: span 3;
}
}
}
Loading