Skip to content

Manchester | ITP - Jan - 2026 | Mehroz Munir | Sprint 1 | Wireframe to Web Code #991

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
MehrozMunir wants to merge 1 commit into
base: main
Choose a base branch
from
+151 −27
Open

Manchester | ITP - Jan - 2026 | Mehroz Munir | Sprint 1 | Wireframe to Web Code #991

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
86 changes: 72 additions & 14 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,89 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Sprint1 - Exercise</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Understanding Readme files, Wireframes and Git</h1>
<p>
This is the default, provided code and no changes have been made yet.
A quick guide to README files, Wireframes and Git branches.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<article>
<img src="placeholder1.svg" alt="README illustration">

<h2>What is the purpose of a README file?</h2>

<p>
A README gives an overview of a project and explains what it does.
It helps anyone using or contributing to the project understand the basics quickly.
</p>

<details>
<summary>Read more</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README usually includes installation steps, usage instructions,
dependencies, examples, and contribution guidelines. It is the first place
someone looks when trying to understand a repository. A clear README saves
time for both the project owner and future developers.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
</details>
</article>

<article>
<img src="placeholder2.svg" alt="Simple wireframe sketch illustration">

<h2>What is the purpose of a wireframe?</h2>

<p>
A wireframe is a basic visual outline of a webpage or app. It shows where
things will go on the screen without focusing on colours or final design.
</p>

<details>
<summary>Read more</summary>
<p>
This is the default, provided code and no changes have been made yet.
Wireframes help designers and developers plan the structure and layout of
a page before any real code or detailed design work begins. They make it
easier to decide on the placement of headings, images, buttons, and
content. Because wireframes are quick to create and easy to change, teams
can test ideas, discuss improvements, and fix layout problems early in the
project. This saves time and reduces mistakes later when the real coding
starts.
</p>
</footer>
</details>
</article>


<article>
<img src="placeholder3.svg" alt="Git branching illustration">

<h2>What is a branch in Git?</h2>

<p>
A branch in Git is a separate line of development where you can work on
changes without affecting the main codebase.
</p>

<details>
<summary>Read more</summary>
<p>
Developers use branches to build new features, fix bugs, or experiment
safely without breaking the main project. Each branch is a copy of the
project’s history, and you are free to make changes independently. Once
the work on the branch is complete and tested, it can be merged back into
the main branch. This workflow makes collaboration easier, keeps the main
code stable, and allows multiple people to work on different features at
the same time.
</p>
</details>
</article>


</main>

</body>
</html>
6 changes: 0 additions & 6 deletions Wireframe/placeholder.svg
View file
Open in desktop

This file was deleted.

19 changes: 19 additions & 0 deletions Wireframe/placeholder1.svg
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.
15 changes: 15 additions & 0 deletions Wireframe/placeholder2.svg
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.
24 changes: 24 additions & 0 deletions Wireframe/placeholder3.svg
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.
28 changes: 21 additions & 7 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,7 @@ a {
border: var(--line);
max-width: fit-content;
}
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/
Expand All @@ -50,9 +46,8 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
margin-top: 2rem;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -87,3 +82,22 @@ article {
grid-column: span 3;
}
}

details summary {
cursor: pointer;
padding: var(--space);
border: var(--line);
max-width: fit-content;
margin-top: var(--space);
}

details[open] summary {
margin-bottom: var(--space);
}

article img {
width: 150px;
height: auto;
margin: 0 auto var(--space) auto;
display: block;
}
Loading