Skip to content

London | 26-ITP-May | Mandip Sanger | Sprint 2 | Wireframe #1441

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
mandipsanger wants to merge 13 commits into
base: main
Choose a base branch
from
+81 −10
Open

London | 26-ITP-May | Mandip Sanger | Sprint 2 | Wireframe #1441

Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cd266a2
update links
mandipsanger Jun 5, 2026
761fd79
add link for articles
mandipsanger Jun 5, 2026
254364a
add style sheet
mandipsanger Jun 5, 2026
3dfe293
closing tags
mandipsanger Jun 5, 2026
948e4de
commit errors
mandipsanger Jun 6, 2026
af35abe
image width and height
mandipsanger Jun 6, 2026
403cf49
fix errors
mandipsanger Jun 6, 2026
be4c074
fix errors
mandipsanger Jun 6, 2026
b8adb1c
fix revert form control original html
mandipsanger Jun 10, 2026
5b0ba5a
fix read me error
mandipsanger Jun 10, 2026
3cd9c74
fix header error
mandipsanger Jun 10, 2026
ef92e54
fix html errors
mandipsanger Jun 10, 2026
4ce5321
fix footer
mandipsanger Jun 10, 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
63 changes: 39 additions & 24 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en"User-agent: *
Allow: />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand All @@ -8,26 +9,40 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</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>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>
</html>
<h1>Wireframe</h1>
<p>
Articles are a great way to share information and ideas with others. They can be used to educate, inform, or entertain readers on a wide range of topics. Whether you're writing about current events, technology, health, or any other subject, articles provide a platform for you to express your thoughts and insights. With the right research and writing skills, you can create engaging and informative articles that resonate with your audience and contribute to meaningful discussions. .These articles have beeen selected to explain the purpose of Read me file, Wireframe and Branch in Git.
</p>
</header>
<main>
<article>
<img src="https://public-images.interaction-design.org/literature/articles/materials/ElementsofaWireframe.png" width="300" height="200" alt="Wireframe" />

@cjyuan cjyuan Jun 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

  • A better practice is to set the image dimension in CSS.

  • 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?

@mandipsanger mandipsanger Jun 10, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you very much I think I have solved all the issues.

<h2>Purpose of Readme file</h2>
<p>
The purpose of a README file is to serve as the primary guide and quick-start manual for a project. Placed at the root of a folder or repository, it explains what the project does, how to install and use it, and how others can contribute.
</p>
<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 src="https://ubc-lib-geo.github.io/gis-workshop-waml-template/content/img/readme3.png" width="300" height="200" alt="Readme" />
<h2>Purpose of Wireframe</h2>
<p>
A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch. Product designers and UX (user experience) professionals draw up wireframes to communicate how they plan to arrange and prioritize features, and how they intend for users to interact with its product or website.Wireframes typically depict only functionality, not the true style and visual elements of the final product. It's why most wireframes look simple: grayscale instead of colors, placeholders for images, and Lorem Ipsum for text.
</p>
<a href="https://www.productplan.com/glossary/wireframe">Read more</a>
</article>

<article>
<img src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png" width="300" height="200" alt="Branch" />
<h2>Purpose of Branch</h2>
<p>Branches allow you to develop features, fix bugs, or safely experiment with new ideas in a contained area of your repository. You always create a branch from an existing branch. Typically, you might create a new branch from the default branch of your repository.
</p>
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a></article>
</article>
</main>
</body>
<footer>
<p>Wifreframe project by Mandip Sanger </p>
</footer>
</html>
Loading