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 3 commits into
base: main
Choose a base branch
from
+139 −16
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
3 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
942f993
corrected
Jay99-prog Jun 7, 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
134 changes: 124 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,147 @@
<!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>
header {
text-align: center;
}
<h1>Wireframe</h1>
<<<<<<< HEAD
<p>
This is the default, provided code and no changes have been made yet.
Code was provided and changed by Juanita Nwachukwu.
</p>
=======
<p>This page explains README files, wireframes and Git branches.</p>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Jun 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

This is a block of merged code from two conflicting sources. For example, one from the repo on GitHub and one from the local repo on your computer. It is easy to fix.

For each block of merged code, for example,

<<<<<<< HEAD
      <p>
        Code was provided and changed by Juanita Nwachukwu.
      </p>
=======
      <p>This page explains README files, wireframes and Git branches.</p>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

all you need to do is decide whether to keep the top part:

      <p>
        Code was provided and changed by Juanita Nwachukwu.
      </p>

or keep the bottom part:

      <p>This page explains README files, wireframes and Git branches.</p>

And then delete the part you do not want to keep, and delete the markers:
<<<<<<< HEAD
=======
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

Copy link
Copy Markdown
Author

@Jay99-prog Jay99-prog Jun 7, 2026

Choose a reason for hiding this comment

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

I created a new branch because the cod eon VS looked really damaged, and due to time contraints i made a new one with some updated and hopefully clean changes. The Validator didn't flag any errors, images where reuploaded and fixed, Please help me review it... this is the site:
#1423

</header>

<main>
<article class="article-one">
<img src="wireframe.png" alt="Wireframe example">

<<<<<<< HEAD
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="readme.png" alt="README file example" />
<h2>What is a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file explains what a project is, how it works, and how to use it.
</p>
<a href="">Read more</a>
<a href="https://www.freecodecamp.org/news/what-is-a-readme-file/" target="_blank">Learn more about README</a>
</article>
=======
<h2>What is a Wireframe?</h2>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

<<<<<<< HEAD
<article>
<img src="wireframe.png" alt="Website wireframe example" />
<h2>What is a Wirframe?</h2>
=======
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
<p>
A wireframe is a simple visual guide that shows the structure and
layout of a webpage before it is designed.
</p>
<<<<<<< HEAD
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Read more</a>
</article>
=======
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91

<<<<<<< HEAD
<article>
<img src="git-branch.png" alt="Git branch diagram" />
<h2>What is a Git branch?</h2>
<p>
A Git branch is a separate version of your code used to work on features safely.
</p>
<a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank">Read more</a>
=======
<a
href="https://www.productplan.com/glossary/wireframe/"
target="_blank"
>
Read more about Wireframes
</a>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
</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>
<<<<<<< HEAD
footer {
text-align: center;
}
<p>
This is the default, provided code and no changes have been made yet.
Code was provided and changed throughout by Juanita Nwachukwu
</p>
=======
<p>Created for Code Your Future Wireframe project.</p>
>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
</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;
}
}