Skip to content

London | 26-ITP-May | Mahdi Rafiei | Sprint 2 | Wireframe #1355

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
mrafeie wants to merge 3 commits into
base: main
Choose a base branch
from
+97 −42
Open

London | 26-ITP-May | Mahdi Rafiei | Sprint 2 | Wireframe #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0366220
Update index.html with new content and structure
mrafeie May 26, 2026
0a28a44
Update wireframe content and footer information
mrafeie May 26, 2026
4a99774
Enhance layout and styling in style.css
mrafeie May 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
87 changes: 57 additions & 30 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,60 @@
<!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>
<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>
<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>Welcome to Intro to Programming</h1>
<p>
Here we will learn about some introductory web development
concepts.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
Copy link
Copy Markdown

@LonMcGregor LonMcGregor May 30, 2026

Choose a reason for hiding this comment

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

Can you find some real images to include, rather than just the placeholders? Also consider adding an alt attribute if necessary

<h2>The purpose of a README file</h2>
<p>
A README file is text file often included with a software
program or code package which provides the reader with
information they may need to use the software, such
installation instructions.
</p>
<a href="#">Read more about README files</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>The purpose of a wireframe</h2>
<p>
A wireframe is used to express the layout of a visual medium
such as a newspaper, or web page. It helps designers and
programmers to get a simple overview of a design.
</p>
<a href="">Read more about wireframing</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>What is a Git branch</h2>
<p>
A git branch is a copy of the code in a git repository.
Branches are created so that developers can work separately
on specific features. Once a feature is completed it is
merged into main. If the creation of a feature is not
successful, for example there are too many bugs, the branch
can be deleted without affecting the main branch.
</p>
<a href="">Read more about Git</a>
</article>
</main>
<footer>
<p>
Completed by Mahdi Rafiei for Intro to programming at Code Your
Future.
</p>
</footer>
</body>
</html>
52 changes: 40 additions & 12 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,71 @@ As well as useful links to learn more */
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */

* {
margin: 0;
box-sizing: border-box;
}

: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;
--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);
background: var(--paper);
color: var(--ink);
font: var(--font);
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
padding: var(--space);
border: var(--line);
max-width: fit-content;
}
img,
svg {
width: 100%;
object-fit: cover;
}
p {
margin-bottom: 0.5rem;
}
h1 {
margin-bottom: 1rem;
}
h2 {
margin-bottom: 0.8rem;
}
/* ====== 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;
min-height: 0;
}
header {
text-align: center;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
border-top: 2px solid rgb(158, 158, 158);
padding: 1rem;
min-width: 100%;
background-color: rgb(54, 53, 53);
color: white;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down
Loading