Skip to content

Cape Town | 2026-ITP-May | Juanita Nwachukwu | Sprint 2 | Wireframe to Web Code #1415

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
Jay99-prog wants to merge 2 commits into
base: main
Choose a base branch
from
+94 −21
Open

Cape Town | 2026-ITP-May | Juanita Nwachukwu | Sprint 2 | Wireframe to Web Code #1415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ce41cc
feature/wireframe
Jay99-prog Jun 5, 2026
de0ae2e
updated-wireframe-assessment
Jay99-prog Jun 6, 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
94 changes: 79 additions & 15 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
<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>
<p>This page explains README files, wireframes and Git branches.</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<article class="article-one">
<img src="wireframe.png" alt="Wireframe example">

<h2>What is a Wireframe?</h2>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A wireframe is a simple visual guide that shows the structure and
layout of a webpage before it is designed.
</p>
<a href="">Read more</a>

<a
href="https://www.productplan.com/glossary/wireframe/"
target="_blank"
>
Read more about Wireframes
</a>
</article>

<section class="bottom-articles">
<article>
<img src="readme.jpg" alt="README file example">

<h2>What is a README File?</h2>

<p>
A README file explains what a project is, how it works and how other
people can use it.
</p>

<a
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
target="_blank"
rel="noopener noreferrer"
>
Read more about README files
</a>
</article>
<img src="wireframe.png" alt="Wireframe example">

<h2>What is a wireframe?</h2>

<p>
A wireframe is a simple layout showing structure before design.
</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>

<article>
<
</article>

<article>
<img src="gitbranch.png" alt="Git branch diagram">

<h2>What is a Git Branch?</h2>

<p>
A Git branch is a separate version of your code that allows you to
work on changes without affecting the main project.
</p>

<a
href="https://www.atlassian.com/git/tutorials/using-branches"
target="_blank"
rel="noopener noreferrer"
>
Read more about Git branches
</a>
</article>
</section>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Created for Code Your Future Wireframe project.</p>
</footer>
</body>
</html>
21 changes: 15 additions & 6 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--ink: black;
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
Expand All @@ -30,6 +30,7 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
padding-bottom: 60px;
}
a {
padding: var(--space);
Expand All @@ -52,7 +53,10 @@ main {
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background: var(--paper);
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand All @@ -65,10 +69,12 @@ main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
}

main > *: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.
Expand All @@ -80,10 +86,13 @@ article {
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
}

article > * {
grid-column: 2/3;
}
> img {

article > img {
grid-column: span 3;
}
}

Loading