Skip to content

London | 26-ITP-May | Yodit Kasu | Sprint 2 | Wireframe #1384

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
YoditE wants to merge 9 commits into
base: main
Choose a base branch
from
+112 −21
Open

London | 26-ITP-May | Yodit Kasu | Sprint 2 | Wireframe #1384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7ee9e02
complete wireframe practice
YoditE May 22, 2026
2a1af61
Merge branch 'main' of https://github.com/CodeYourFuture/Module-Onboa…
YoditE May 22, 2026
947b473
complete form controls exercise
YoditE May 23, 2026
540cf9c
Update wireframe html and css
YoditE May 27, 2026
3ad3bca
Fix CSS validation issue
YoditE May 29, 2026
6c309a8
Complete wireframe project
YoditE May 30, 2026
4438783
complete wireframe project
YoditE May 30, 2026
83bc6f9
Fix review comments and update images
YoditE Jun 4, 2026
3940bb8
Fix accessibility and address review feedback
YoditE Jun 4, 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
48 changes: 41 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,49 @@ <h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
<lable for="name">Name:</lable>
<input type="name" id="name" name="name" minlength="2" required>
<br><br>

<lable for="email">Email:</lable>
<input type="email" id="email" name="email" required>
<br><br>
<label for="color">Colour</label>
<select id="colour" name="colour" required>
<option value="">Choose a colour</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<br><br>
<label for="size">Size:</lable>
<select id="size" name="size" required>
<option value="">Choose a size</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<br><br>

<button type="submit">Submit</button>




</form>



<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Yodit Kasu</p>
</footer>
</body>
</html>
</body>
</html>
Binary file added Wireframe/02-newspaper-site-wireframe-example.webp
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-Branchand-its-Operations.webp
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/image_thumb10.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.
35 changes: 24 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,39 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Web Development Concepts</h1>
<p>Learn about README files, wireframes, and Git branches.</p>
</header>
Comment on lines 10 to 13
Copy link
Copy Markdown

@akeren akeren Jun 3, 2026

Choose a reason for hiding this comment

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

@YoditE, when you compare the header with the main body, what CSS change might help align them?

Copy link
Copy Markdown
Author

@YoditE YoditE Jun 3, 2026

Choose a reason for hiding this comment

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

@akeren Looking at it again, I think matching the spacing and margins between the header and the main content would help make the layout more consistent. I could review the padding and margin values so both sections align better.

Copy link
Copy Markdown

@akeren akeren Jun 4, 2026

Choose a reason for hiding this comment

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

@akeren Looking at it again, I think matching the spacing and margins between the header and the main content would help make the layout more consistent. I could review the padding and margin values so both sections align better.

Yes, that's fine. @YoditE, what about the position?

Copy link
Copy Markdown
Author

@YoditE YoditE Jun 4, 2026

Choose a reason for hiding this comment

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

I reviewed the layout again and noticed the header and main content were not aligned consistently. I adjusted the positioning and spacing so the content aligns properly and the page structure is more consistent.

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="image_thumb10.png" alt="README file example">
<h2>README.md File</h2>
<p>
A README file explains what a project does, how to install it, and how to use it. It helps other developers understand the project quickly. </p>
<a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" target="_blank">Read more</a>
</article>

<article>
<img src="02-newspaper-site-wireframe-example.webp" alt="Wireframe example">
<h2>Wireframe</h2>
<p>
A wireframe is a simple visual plan of a webpage. It shows the layout and structure before the website is built.
</p>
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Read more</a>
</article>
<article>
<img src="GIT-Branchand-its-Operations.webp" alt="Git branch workflow">
<h2>Git Branch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A Git branch allows developers to work on new features without changing the main version of a project. Changes can be merged later when they are ready.
</p>
<a href="">Read more</a>
<a href="https://www.w3schools.com/git/git_branch.asp" target="_blank">Read more</a>
</article>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created by Yodit Kasu using HTML and CSS
</p>
</footer>
</body>
</html>
50 changes: 47 additions & 3 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,10 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
margin: 0 auto;
}
footer {
position: fixed;
bottom: 0;

text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down Expand Up @@ -87,3 +86,48 @@ article {
grid-column: span 3;
}
}
h1 {
color: rgb(47, 159, 174);
text-align: center;

}

header p {
text-align: center;
}
header {
margin-bottom: 30px;
}
a {
background-color: black;
color: white;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
a:hover{
background-color: teal;}


article {
border: var(-- line);
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
border-radius: 12px;
overflow: hidden;
padding: 16px;
}

article:hover { transform: scale(1.02);}

body { background-color: #d6d0d0;}

h1 { color: rgb(47, 120, 120); }

p { color: #333333; }
a { background-color: black;
color: white;

}