Skip to content

ITP-JAN-25 | EYUEL_ABRAHAM| | Module-Onboarding Feature/wireframe | Week 1 #126

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

ITP-JAN-25 | EYUEL_ABRAHAM| | Module-Onboarding Feature/wireframe | Week 1 #126

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
60b1ffd
first commit- added the bottom images
eyuell21 Jan 11, 2025
51705b2
Added the articles
eyuell21 Jan 11, 2025
ed9497d
centered the footer
eyuell21 Jan 11, 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
84 changes: 76 additions & 8 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,92 @@
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
Wireframing is a practice most commonly used by UX designers. This process allows all stakeholders to agree on where the information will be placed before the developers build the interface out with code.t.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<h2>Purpose of a wire frame</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A wireframe is a basic, simplified visual representation or blueprint of a website, app, or digital product. It shows the layout and structure of a page, without focusing on design elements like colors, fonts, or images. Think of it as a skeleton or map of the website.

Wireframes are used in the early stages of design to:<br>
<br>
<span class="paraBold">Plan the structure:</span> Show where things like text, buttons, navigation menus, and images will go.<br>
<span class="paraBold"> Help user flow:</span> Help designers and developers see how users will navigate the site or app. <br>
<span class="paraBold"> Test ideas quickly:</span> Experiment with different layouts and features before investing time in detailed design.<br>
<br>
Wireframes can range from low-fidelity (simple sketches) to high-fidelity (detailed mockups), but they all focus on the layout and functionality rather than the visual design.
<br>
<br>
In simple terms, wireframes are visual representations of a web page or app interface, stripped down to its bare bones. Think of it as the architectural blueprint of your design project. They outline the structure and functionality of your product without getting caught up in colors, visuals, or specific content.
</p>
<a href="">Read more</a>
<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#:~:text=A%20wireframe%20is%20a%20two,are%20kept%20to%20a%20minimum." target="_blank">Read more</a>
</article>
</main>
<section class="side-images">
<div class="bottom-side">
<article>
<img src="placeholder.svg" alt="" />
<h2>Branch in Git</h2>
<p>In Git, a branch is a new/separate version of the main repository. A branch in Git is like a separate version of your project where you can work on changes without affecting the main codebase. It allows you to experiment, develop new features, or fix bugs independently, and later you can merge those changes back into the main project.
<br>
<br>
You always create a branch from an existing branch. Typically, you might create a new branch from the default branch of your repository. You can then work on this new branch in isolation from changes that other people are making to the repository. A branch you create to build a feature is commonly referred to as a feature branch or topic branch. For more information, see Creating and deleting branches within your repository.
<br>
<br>
You can also use a branch to publish a GitHub Pages site. For more information, see About GitHub Pages.
<br>
You must have write access to a repository to create a branch, open a pull request, or delete and restore branches in a pull request. For more information, see Access permissions on GitHub.
<br>
<br>
In summary, branches in Git allow developers to work on different tasks in isolation, organize development, and merge changes in an efficient and controlled way. They help manage multiple versions of a project simultaneously, making it easier to collaborate and experiment.
<br>
<br>
</p>

<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more

</a>
</article>
</div>

<div class="bottom-side">
<article>
<img src="placeholder.svg" alt="" />
Copy link

Choose a reason for hiding this comment

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

Can you tell me why we have to use alt tags in img elements, please do not forget to fill alt tags in images

<h2>Readme file</h2>
<p>
A README file in Git (usually named README.md) is a documentation file that provides essential information about a project. It’s typically the first thing a person sees when they visit a repository and serves as a guide to understand what the project is, how to use it, and how to contribute to it.
<br>
<br>
You can add a README file to a repository to communicate important information about your project. A README, along with a repository license, citation file, contribution guidelines, and a code of conduct, communicates expectations for your project and helps you manage contributions.
<br>
<br>
Why a README is Important:
<br>
<br>
<strong>Clarifies Purpose:</strong>It explains what the project does, helping users quickly understand its purpose.
<br>
<strong>Guides Users:</strong> It provides instructions on installation, usage, and configuration.
<br>
<strong>Helps Contributions:</strong> It gives clear guidelines for people who want to contribute to the project.
<br>
<strong>Improves Accessibility:</strong> It makes the project more approachable and easier to use for both developers and non-developers.
<br>
<br>
In summary, a README file in Git is essential for documenting a project. It helps developers and other users understand the project’s purpose, how to use it, and how to contribute. It's a key part of every repository, especially for open-source projects.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes#about-readmes">Read more</a>
</article>
</div>
</section>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<div>
<p>
Code your future 2024.
</p>
</div>
Copy link

Choose a reason for hiding this comment

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

Footer position is fixed but you should also show footer's background, if not user can't clearly see where footer starts and also due to z-index problem, it creates barrier for user to click on read more button if you scroll to top, please refers to these issue.

</footer>
</body>
</html>
30 changes: 30 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,33 @@ article {
grid-column: span 3;
}
}
.side-images{
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 5px;
margin-top: -40px;

}
.side-images .bottom-side{
max-width: 50%;

}


.paraBold{
font-weight: bold;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
color: black;
padding: 10px;
text-align: center;
max-height: 50px;
margin-top: 20px;
}
footer p {
padding-top: 20px;
}