Skip to content

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

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
asandagwala wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

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
Binary file added Wireframe/Pic1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/git.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 29 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,43 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Wireframe Task</h1>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<article>
<img src="wireframe.png" alt="An image of a wireframe template"/>
<h2>What is the purpose of a wireframe</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A wireframe is a simple diagram showcasing the UI of a webpage
It shows where components should be
in relation to each other and what, roughly, they should do.
</p>
<a href="">Read more</a>
<a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
</article>
<article>
<img src = "git.png" alt ="An image of a Git icon">
<h2>What is a branch in Git</h2>
<p>A git branch is basically a separate workspace that
allows you to work on a project with others without making any
changes to the main directly. You can do all your work on
your branch and then merge it to the main branch
</p>
<a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>
</article>
<article>
<img src ="logo.jpg" alt = "A picture of a README template">
<h2>What is the purpose of a README FILE</h2>
Comment on lines 33 to +36
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

Indentation is off.

As a best practice, consider following this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.

<p>
The purpose of a README file is to provide information on what your
project is about.
</p>
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>

</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created for WIREFRAME HTML and CSS task.
</p>
</footer>
</body>
Expand Down
Binary file added Wireframe/logo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

There are two main selectors in this file. Consider merging the properties from both selectors into a single main rule to make them easier to find and maintain.

Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
margin:0;
padding:20px;
padding-bottom:80px;
}
a {
padding: var(--space);
Expand All @@ -40,6 +43,7 @@ img,
svg {
width: 100%;
object-fit: cover;
display:block
}
/* ====== Site Layout ======
Setting the overall rules for page regions
Expand All @@ -50,8 +54,9 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding:10px;
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down Expand Up @@ -79,6 +84,7 @@ article {
padding-bottom: var(--space);
text-align: left;
display: grid;
background: white;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
Expand All @@ -87,3 +93,8 @@ article {
grid-column: span 3;
}
}

main article:first-child img{
height:300px;
}

Comment on lines +97 to +100
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

Could we keep main article:first-child img next to the main selector? Grouping selectors that start with main together makes them easier to locate and scan when reviewing or updating the selector list. You could even use the nested syntax.

Loading