Skip to content

BIRMINGHAM | 26 ITP JAN | MERVE REIS | Sprint 1 | WIREFRAME #1075

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
mervereis wants to merge 4 commits into
base: main
Choose a base branch
from
+86 −51
Open

BIRMINGHAM | 26 ITP JAN | MERVE REIS | Sprint 1 | WIREFRAME #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8ebc4e
wireframe webpage
mervereis Jan 26, 2026
dfb78a2
deleted to extra file
mervereis Jan 26, 2026
2c2c56c
form created
mervereis Jan 26, 2026
d815812
form reverted on wrong branch
mervereis Jan 26, 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
49 changes: 26 additions & 23 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
</html>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>

</html>
80 changes: 52 additions & 28 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,57 @@
<!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>Wireframe</h1>
<p>
A basic blueprint for webpage
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>What is the purpose of readme files?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A README file usually serves as the primary, high-level documentation for a
software project, dataset, or repository,
designed to help users and developers understand, install, and use the project
</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.
<a href="https://www.makeareadme.com">Read more</a>
</article>
<article>
<img src="wireframe.png" alt="wireframe pictures" />
<h2>What's the purpose of wireframe?</h2>
<p>The purpose of a wireframe is to serve as a blueprint for a digital product (website, app) by focusing on its
structure,
layout, and functionality, not visual design (colors, fonts).
</p>
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
</article>
<article>
<img src="/code-review-flow.png" alt="whats branch" />
<h2>What's the branch in git?</h2>
<p>A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git
is master . As you start making commits, you're given a master branch that points to the last commit you made.
</p>
</footer>
</body>
</html>
<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>

</main>
<footer style="border-top: 1px solid; padding: 2rem;">
If you want to learn more about <a href="https://www.productplan.com/glossary/wireframe/">Wireframe</a>


</footer>
</body>

</html>
8 changes: 8 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ body {
color: var(--ink);
font: var(--font);
}

header {
text-align: center;
}

a {
padding: var(--space);
border: var(--line);
Expand All @@ -48,11 +53,14 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
margin-bottom: 6rem;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
background-color: white;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down