Skip to content

NW | 25-ITP-Sep | TzeMing Ho | Sprint 1 | Wireframe #737

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

Closed
TzeMingHo wants to merge 13 commits into from
Closed

NW | 25-ITP-Sep | TzeMing Ho | Sprint 1 | Wireframe #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f0724ab
added image, title, summary, and context of wireframe
TzeMingHo Aug 28, 2025
715c2d6
updated context of wireframe and branches in git
TzeMingHo Aug 28, 2025
1a89b42
add context of readme files
TzeMingHo Aug 29, 2025
20ea11e
add color styling in style.css
TzeMingHo Aug 29, 2025
49d1280
edited styling
TzeMingHo Aug 29, 2025
c0fcee3
trying to recreate pull request
TzeMingHo Sep 2, 2025
dcc225f
filled in the README.md
TzeMingHo Sep 2, 2025
25198bb
filled up self-check list in readme with x
TzeMingHo Sep 2, 2025
b07aafc
update repeated styling with variables
TzeMingHo Sep 9, 2025
abee8a9
Delete Wireframe/README.md
TzeMingHo Sep 9, 2025
79e9e23
reset README file
TzeMingHo Sep 9, 2025
6d7b7dc
restore WireFrame\README.md from main
TzeMingHo Sep 10, 2025
e197caf
restore Wireframe/README.md from main
TzeMingHo Sep 10, 2025
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
39 changes: 31 additions & 8 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,48 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe, branches in git, and readme files</h1>
<p>
This is the default, provided code and no changes have been made yet.
Let's get familiar with wireframe, branches, and readme files. They are important concepts in web development and version control.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://uxguerrilla.co.uk/wp-content/uploads/2020/09/mobile-web.png" alt="a black and white photo of wireframe in tablet, webpage, and smartphone" />
<h2>The purpose of a wireframe</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
Wireframe is a visual guide that represents the skeletal framework of a
website or application. It shows the layout, structure, and features
without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.
</p>
<a href="">Read more</a>
<a href="https://adamfard.com/blog/wireframes" target="_blank">Read more</a>
</article>
<article>

<img id="branches-img" src="https://wac-cdn.atlassian.com/dam/jcr:a905ddfd-973a-452a-a4ae-f1dd65430027/01%20Git%20branch.svg?cdnVersion=2934" alt="a picture of git branches" />


<h2>Branches in git</h2>
<p>
A branch in Git is a separate line of development that allows you to
work on different features or fixes independently. It enables
collaboration, experimentation, and version control without affecting
the main codebase.
</p>
<a href="https://www.w3schools.com/git/git_branch.asp" target="_blank">Read more</a>
</article>
<article>
<img id="readme-img" src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*oppPsIqwEiB_kndtd6GWxA.png" alt="a picture of a banner written readme" />
<h2>The purpose of a README file</h2>
<p>
A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank" >Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created @ Tze Ming Ho 2025
</p>
</footer>
</body>
Expand Down
84 changes: 70 additions & 14 deletions Wireframe/style.css
View file
Open in desktop
Copy link

@jenny-alexander jenny-alexander Sep 8, 2025

Choose a reason for hiding this comment

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

Great job styling your wireframe 🙌 Here are a few suggestions to improve your code:

  1. Move repeated colors, border and background color to variables. This will make your code easier to maintain in the future. At first glance I see border-green and border-radius repeated a few times.
  2. I see the main selector defined twice. The 2nd main selector will overwrite the first one. Can you combine them into one selector?

Original file line number Diff line number Diff line change
Expand Up @@ -18,64 +18,99 @@ 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: color-mix(in oklab, var(--color) 5%, rgb(3, 3, 3));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;

/* repeated colors for easy access */
--header-color: rgb(1, 77, 77);
--border-color: green;
--body-color: rgb(239, 244, 247);
--border-radius: 25px;
--brownish: rgb(116, 72, 15);
--yellowish: rgb(247, 247, 236);

}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
header {
text-align: center;
color: var(--header-color);
}

body {
background: var(--paper);
color: var(--ink);
font: var(--font);
background-color: var(--body-color);
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
text-decoration: none;
color: var(--brownish);
border-radius: var(--border-radius);
border-color: var(--border-color);
display: flex;
justify-content: center;
align-items: center;
}
img,
svg {
width: 100%;
object-fit: cover;

a:hover {
background-color: var(--brownish);
color: white;
transition: background-color 0.3s ease;
font-weight: bold;
}

/* ====== 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;
}
footer {
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 {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;
}
}
footer {
position: fixed;
bottom: 0;
text-align: center;
background-color: var(--yellowish);
width: 99%;
border: var(--line);
border-color: var(--border-color);
color: var(--brownish);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}


/* ====== 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);
border-radius: var(--border-radius);
padding-bottom: var(--space);
text-align: left;
display: grid;
Expand All @@ -85,5 +120,26 @@ article {
}
> img {
grid-column: span 3;

}
background-color: var(--yellowish);
border-color: var(--border-color);
color: var(--brownish);
}


img {
width: 100%;
object-fit: cover;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}

#branches-img, #readme-img {
min-height: 200px;
max-height: 300px;
}

#branches-img {
object-fit: contain;
}
Loading