Skip to content
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

ITP,JAN25,LONDON | GENET_HAILE | MODEL ONBOARDING WIREFRAM | WEEK 1 #249

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

ITP,JAN25,LONDON | GENET_HAILE | MODEL ONBOARDING WIREFRAM | WEEK 1 #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9ebc43b
change title
genethaile12 Jan 18, 2025
4c5dd3b
cooking
genethaile12 Jan 26, 2025
c34ee81
i have changed the title and html
genethaile12 Feb 3, 2025
89cd8a2
i have completed the work
genethaile12 Feb 3, 2025
24a44e5
changed background colour
genethaile12 Feb 4, 2025
b863d29
i changed background colour
genethaile12 Feb 15, 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
69 changes: 59 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,79 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<h1>Wireframe</h1>
<h1> Structuring Projects: README, Wireframes & Git</h1>
<p>
This is the default, provided code and no changes have been made yet.
"This wireframe outlines the essential components of a well-structured development workflow,
covering README files, wireframing, and Git. A clear and informative README file helps developers
and contributors understand a project’s purpose, setup, and usage. Wireframing plays a crucial role
in planning and visualizing user interfaces before coding begins, ensuring a smooth design process.
Git, as a version control system, enables efficient collaboration, tracking changes, and managing code repositories.
Together, these elements form the foundation of an organized and maintainable software development project

</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src=https://miro.medium.com/v2/resize:fit:1200/1*oppPsIqwEiB_kndtd6GWxA.png 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 should always altx texts for images?

Copy link
Author

Choose a reason for hiding this comment

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

To improve accessibility by describing what an image is showing to visitors who do not have the ability to see them

Copy link

Choose a reason for hiding this comment

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

So we always fill tag attributes according to visuals we use in our images

<h2>README file</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.

</p>
<a href="">Read more</a>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
Copy link

Choose a reason for hiding this comment

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

If you're using internal website links in your website, I suggest you to use target="_blank" in a tag as well, which will allow user to open link in another window

</article>
</main>
<section class="mini-articles">
<article>
<img src="https://www.archimetric.com/wp-content/uploads/2022/02/01-youtube-wireframe-example.png">
<div aria-colcount="article-info">
<h3>wireframe </h3>
<p>A wireframe is a simple visual representation of a webpage, app, or software interface, outlining
its structure and layout without detailed design elements. It serves as a blueprint, showing where
key components like buttons, images, and text will be placed.
Wireframes are usually created in black-and-white or grayscale and focus on functionality rather
than aesthetics. They help designers, developers, and stakeholders plan the user experience (UX)
before moving on to full design and development.
Common tools for creating wireframes include Figma, Adobe XD, Balsamiq, and Sketch
</p>
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
</div>
</article>
</section>
<section>
<article>
<img src="https://miro.medium.com/v2/resize:fit:1400/1*mtsk3fQ_BRemFidhkel3dA.png">
<div aria-colcount="article-info">
<h3> Git </h3>
<p>
Git is a version control system that helps developers track changes in their code, collaborate
efficiently, and manage project history. It allows multiple people to work on the same project
without overwriting each other’s work.

Key Features of Git:
Version Control – Tracks changes and allows reverting to previous versions.
Branching & Merging – Developers can work on separate branches and merge changes when ready.
Collaboration – Teams can contribute without conflicts using platforms like GitHub, GitLab, or Bitbucket.
Distributed System – Every developer has a full copy of the project history.

Basic Git Commands:
git init – Initializes a Git repository.
git add . – Stages changes for commit.
git commit -m "Message" – Saves changes with a message.
git push – Uploads changes to a remote repository.
git pull – Retrieves the latest changes from a remote repo.
Git is widely used in software development to ensure code safety, collaboration, and efficient
project management.
</p>
<a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read more</a>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
created by Genet Haile.
</p>
</footer>
</body>
Expand Down
5 changes: 3 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ 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(0, 0, 0));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
Expand Down Expand Up @@ -52,7 +52,8 @@ main {
footer {
position: fixed;
bottom: 0;
text-align: center;
text-align: left;
background-color: rgb(212, 126, 12);
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down