Skip to content

Manchester| 26-ITP-Jan | Ofonime Edak| Sprint 1| wireframe #1176

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
Ofonimeedak wants to merge 6 commits into
base: main
Choose a base branch
from
+267 −93
Open

Manchester| 26-ITP-Jan | Ofonime Edak| Sprint 1| wireframe #1176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cbdfad6
created a branch and restructure html with content
Ofonimeedak Feb 12, 2026
1f11ce7
linked and styled with external css
Ofonimeedak Feb 14, 2026
9e5bb4b
correction addressing the last review, alignment,max-width and center…
Ofonimeedak Feb 15, 2026
a050606
html validation checked and passed
Ofonimeedak Feb 15, 2026
c67e88a
Remove accidental file
Ofonimeedak Feb 15, 2026
0e5962a
correction to warning error in html and footer overflow
Ofonimeedak Feb 15, 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
152 changes: 135 additions & 17 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -7,26 +7,144 @@
<link rel="stylesheet" href="style.css" />
</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>
<div class="page">
<header>
<h1>Course Work on Wireframe</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A Course Work on Wireframe and How Web Developers Use it to Develop
Web Codes.
</p>
<a href="">Read more</a>
</article>
</main>
</header>
<main>
<section class="readme">
<img id="svg1" src="./placeholder.svg" alt="" />
<h2>A README file</h2>
<article class="article1">
<h3> Definition </h3>
<p>
According to wikipedia, a A README file contains descriptive
information about the content of a directory in which the file is
located. The scope orientational information about the directory
content.
</p>
</article>
<details>
<summary>
<h3>Summary of README File</h3>

A README.md is a key document in repositories, especially on
GitHub. It introduces the project, explains its purpose, setup,
and usage, and helps users and developers contribute effectively.
A well-written README is important because: Allows formatted
documentation. The extension .md stands for markdown. It is meant
to be the first document to be read by someone starting on the
project. Gives a high-level description: what this software or
project does, why it exists, who it is for and how to install /
configure. It can include code examples, API usage, command-line
usage, etc. It states the license under which the software is
released, gives credit to authors or collaborators. Looks polished
when hosted as a webpage.
</summary>
</details>

<a
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
>Read more</a
>
</section>

<div class="sub-main">
<section class="wireframe">
<img id="svg2" src="./placeholder.svg" alt="placeholder" />
<h3>What is the Purpose of Wireframes</h3>

<article class="wireframe-article">
<h3> Definition </h3>
<p>
Wireframes are skeleton of the <br />

This skeleton is a two-dimensional depiction of a pages
interface
<br />that shows the spacing of elements on the page, how
content is prioritized, what functionalities are available,
<br />and how users will interact with the site <br />

They also play a vital role in connecting information
architecture
<br />to the visual aspects of the design by showing pathways
between the various pages.
<br />

Wireframes are intentionally void of color, graphics and
stylized fonts.
</p>
</article>

<details>
<summary>
<h3>Summary of Wireframe</h3>
Wireframing is a quick and effective way to identify usability
issues early on in your design process.
</summary>
</details>

<a
href="https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611"
>Read More</a
>
</section>
<section class="branch">
<img id="svg3" src="./placeholder.svg" alt=" placeholder" />
<h3>What is Branch in Git</h3>
<article class="branch-article">
<h3> Definition </h3>
<p>
A Git branch is a separate workspace used to make changes
without
<br />
affecting the main project. Once the work is complete, the
changes
<br />can be merged back into the main or master branch.
<br />Branches make it easy to:
</p>
<ul>
<li>Manage different tasks or features independently</li>
<li>Test changes without affecting live code</li>
<li>Collaborate with others efficiently</li>
</ul>
</article>
<details>
<summary>
<h3>Summary of Branching</h3>
Without branching developers will not have the flexibility of
<br />making changes and contributing to the main branch after a
pull request
</summary>
</details>

<a
href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/"
>
Read More</a
>
</section>
</div>
</main>
</div>
<footer>
Other Useful Resources follow the Links
<p>
This is the default, provided code and no changes have been made yet.
<a
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
>ReadMe File</a
>
<a
href="https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611"
>Wireframe</a
>
<a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/">
Git Branch</a
>
</p>
</footer>
</body>
Expand Down
208 changes: 132 additions & 76 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,145 @@
/* Here are some starter styles
You can edit these or replace them entirely
It's showing you a common way to organise CSS
And includes solutions to common problems
As well as useful links to learn more */

/* ====== Design Palette ======
This is our "design palette".
It sets out the colours, fonts, styles etc to be used in this design
At work, a designer will give these to you based on the corporate brand, but while you are learning
You can design it yourself if you like
Inspect the starter design with Devtools
Click on the colour swatches to see what is happening
I've put some useful CSS you won't have learned yet
For you to explore and play with if you are interested
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
}


/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);

body {
display: flex;
align-items: center;
flex-direction: column;
background-color: rgb(220, 245, 245);
justify-content: center;

}
.page{
display: flex;
justify-content: center;
width: 100%;
max-width: 1280px;
display: flex;
flex-direction: column;
align-items: center;



}
h3{

color: blue;
}

a {
padding: var(--space);
border: var(--line);
padding: 1px;
border: solid 1px ;
max-width: fit-content;
height: 15px;
text-decoration: none;

}

.readme{
border: solid red 1px;
min-height: 300px;
width:100% ;
border-radius: 10px;
padding: 20px 10px 20px 10px;
margin-bottom: 10px;

}
img,
svg {

#svg1{
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;
main{
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
min-height: 300px;
width: 80%;




}
.sub-main {
display: flex;
width: 102.5%;
gap: 10px;
border-radius: 10px;
padding: 20px;

}
footer {

.sub-main > * {
flex: 1;
padding: 10px;

}


#svg2,
#svg3 {
width: 100%;
object-fit: cover;
border-radius: 10px;

}
.image-container{
width: 100%;
height: 35%;
border: solid burlywood 4px;
border-radius: 10px;
object-fit: cover;

}

.branch-article,
.wireframe-article {

padding: 10px;
height: 30%;
margin: 0;


}
details{
margin: 0;
padding: 10px;
}

.branch,
.wireframe{
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid orange;
margin-bottom: 80px;
border-radius: 10px;
padding: 20px 10px 20px 10px;

}

summary {
list-style: none;
cursor: pointer;
padding: 0;
margin: 0;
}

footer{
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
bottom: 0;
text-align: center;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;
}
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
article {
border: var(--line);
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
}
> img {
grid-column: span 3;
}
width: 99%;
background-color: antiquewhite;
align-items: center;
padding: 10px;
margin: 10px 20px 0 20px;
z-index: 99;
}