Skip to content

London |26-ITP-january | Dagim Daniel | Sprint 1 | wireframe #1174

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
Dagim-Daniel wants to merge 7 commits into
base: main
Choose a base branch
from
Open

London |26-ITP-january | Dagim Daniel | Sprint 1 | wireframe #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
85343a6
add "an" to README file
Dagim-Daniel Feb 12, 2026
55de4e4
add "first" in the README file
Dagim-Daniel Feb 12, 2026
3f7b510
creating the page based on the wireframe
Dagim-Daniel Feb 12, 2026
1831ddc
Revert "add "an" to README file"
Dagim-Daniel Feb 12, 2026
b167650
restore to its previous one
Dagim-Daniel Feb 13, 2026
52df496
fix some index, typo errors and delete blank spaces
Dagim-Daniel Feb 15, 2026
380064d
indentation fixed
Dagim-Daniel Feb 15, 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
75 changes: 65 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -10,23 +10,78 @@
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
Wireframe is low-fidelity, Visual Blueprint of a webpage or app
interface.
</p>
</header>
<main>
<!-- what is the purpose of README article -->
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
<img
src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203"
alt="README image"
/>
<h2>README file</h2>
<details>
<summary>
The purpose of README file is to give information about the project
and how to use it
</summary>
<p>
A README file is the "front door" of your project. it is typically a
text file (usuallyREADME.md using Markdown) located in the root
directory of your code
</p>
</details>
<a
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
>Read more</a
>
</article>
<!--purpose of wireframe article-->
<article>
<img
src="https://github.com/Dagim-Daniel/Module-Onboarding/blob/main/Wireframe/wireframe.png?raw=true"
alt=""
/>
<h2>Purpose of Wireframe</h2>
<details>
<summary>It establish the basic Structure of a page.</summary>
<p>
wireframe is the perfect way for the designers to gauge how the user
would interact with the interface. Before adding visual
considerations like color or images, they serve as an outline to get
the team on the same page early.
</p>
</details>
<a href="https://medium.com/design-bootcamp/wireframes-5d63f9d760a8"
>Read more</a
>
</article>
<!-- what is branch git article -->
<article>
<img
src="https://cdn.iconscout.com/icon/free/png-256/free-git-branch-logo-icon-svg-download-png-1982843.png"
alt=""
/>
<h2>Branch in Git</h2>
<details>
<summary>
In Git, branch a pointer to a snapshot of your changes.
</summary>
<p>
Branch is like a separate working copy of your project in Git. It
allows you to make changes without affecting the main branch (often
called "main" or "master").
</p>
</details>
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Author: Dagim Daniel :
<a href="mailto:dagimdan19@gmail.com">dagimdan19@gmail.com</a>
</p>
</footer>
</body>
Expand Down
23 changes: 19 additions & 4 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
/* Here are some starter styles
You can edit these or replace them entirely
It's showing you a common way to organise CSS
It's showing you a common way to organize CSS
And includes solutions to common problems
As well as useful links to learn more */

/* ====== Design Palette ======
This is our "design palette".
It sets out the colours, fonts, styles etc to be used in this design
It sets out the colors, fonts, styles etc to be used in this design
At work, a designer will give these to you based on the corporate brand, but while you are learning
You can design it yourself if you like
Inspect the starter design with Devtools
Click on the colour swatches to see what is happening
Click on the color swatches to see what is happening
I've put some useful CSS you won't have learned yet
For you to explore and play with if you are interested
https://web.dev/articles/min-max-clamp
Expand All @@ -36,15 +36,28 @@ a {
border: var(--line);
max-width: fit-content;
}
footer a
{
padding: var(--space);
border: none;
text-align: center;
max-width: fit-content;

}
img,
svg {
width: 100%;
object-fit: cover;
aspect-ratio: 16/9; /* keeps the image from getting too tall or too wide */
object-fit: fit;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
header {
text-align: center;
padding: var(--space);
}
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
Expand All @@ -53,6 +66,8 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
background-color: blanchedalmond;
width:100%;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down