Skip to content

Manchester | 26-ITP-May | Abdu Hassen | Sprint 2 | wireframe #1366

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

Manchester | 26-ITP-May | Abdu Hassen | Sprint 2 | wireframe #1366

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
80 changes: 70 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,92 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<meta
name="description"
content="This page explains the purpose of wireframe and README file and also tells about what a branch is in Git"
/>
<title>
The purpose of wireframe and readme and what branch means in git
</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>What is Branch in Git, The Purpose of README & Wireframing</h1>
<p>
This is the default, provided code and no changes have been made yet.
This page covers three essential concepts in software development. It
explains what a Git branch is and why it is used to manage code changes
safely, explores the purpose of a README file and how it helps others
understand your project, and walks through the wireframing process from
initial structural sketches to a fully designed application page.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="https://super-monitoring.com/blog/wp-content/uploads/2022/01/readme.png.webp"
alt="A laptop and book representing a README documentation guide"
fetchpriority="high"
/>
<h2>The Purpose of README</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file contains descriptive information about the content of a
directory in which the file is located. The scope of the information
generally includes the files of the directory, and may include
descendant directories, or even the full directory tree. The name is
intended to draw a user's attention to important and orientational
information about the directory content. A rule of thumb for one
unfamiliar with the content of a directory is to read the README file
before other files. Although the name README is often used, there are
many other similar names used for the same purpose including "Read Me"
and "READ.ME". Sometimes the file name includes an extension to
indicate the file format such as "README.txt" for plain text or
"README.md" for Markdown.The file's name is often all caps.
</p>
<a href="">Read more</a>
<a href="https://en.wikipedia.org/wiki/README"
>Read more about README files</a
>
</article>
<article>
<img
src="https://storage.ghost.io/c/c8/0c/c80ce826-734b-44fa-90f7-43d0deb4f5bc/content/images/size/w1200/2025/03/Immerse---What-is-a-wireframe.png"
alt="Wireframe progression showing structural sketch to fully designed app page"
/>
<h2>The Purpose of Wireframe</h2>
<p>
Wireframing is a way to design a website service at the structural
level. A wireframe is commonly used to layout content and
functionality on a page which takes into account user needs and user
journeys. Wireframes are used early in the development process to
establish the basic structure of a page before visual design and
content is added.
</p>
<a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/"
>Read more about Wireframing</a
>
</article>
<article>
<img
src="https://graphite.com/images/content/guides/git-merge-how-does-it-work/1711136885-merged-branch.jpg"
alt="Git branch diagram showing branching and merging workflow"
/>
<h2>What is Branch in Git</h2>
<p>
In Git, a branch is like a separate workspace where you can make
changes and try new ideas without affecting the main project. Think of
it as a "parallel universe" for your code.
</p>
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
>Read more about Git branches</a
>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
This page covered three essential concepts every developer should know:
Git branches, README files, and wireframing.
</p>
</footer>
</body>
Expand Down
23 changes: 20 additions & 3 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--color: white;
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--line: 3px solid;
--container: 1280px;
}
/* ====== Base Elements ======
Expand All @@ -31,16 +32,34 @@ body {
color: var(--ink);
font: var(--font);
}
header {
text-align: center;
margin-bottom: 40px;
}
header p {
text-align: left;
text-indent: 40px;
max-width: 1500px;
margin: 0 auto;
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
background-color: #ebcb6e;
}
img,
svg {
width: 100%;
height: 400px;
object-fit: cover;
}
main > *:first-child > img {
height: 800px;
width: 70%;
margin: 0 auto;
display: block;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
Expand All @@ -50,8 +69,6 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down
Loading