Skip to content

West Midlands | ITP-MAY-25 | Abdullah Saleh | Wireframe | Week2 #456

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 6 commits into
base: main
Choose a base branch
from
Open

West Midlands | ITP-MAY-25 | Abdullah Saleh | Wireframe | Week2 #456

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
b857c02
First article has been added
3bdullah-saleh May 8, 2025
5c9cc12
Second article has been added
3bdullah-saleh May 8, 2025
89bbffe
Third article has been added
3bdullah-saleh May 8, 2025
df34016
Information has been added to footer
3bdullah-saleh May 8, 2025
0e907ca
Updated HTML structure and refined styles
3bdullah-saleh May 13, 2025
fcee29c
I used VSCode “Format Document” feature in this commit
3bdullah-saleh May 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
74 changes: 66 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,83 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>README, Wireframe & Git Branches</h1>
<p>
This is the default, provided code and no changes have been made yet.
A quick guide to three essential web development tools: README files,
wireframes, and Git branches—what they are and why they matter.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
id="resize-image1"
src="https://www.mygreatlearning.com/blog/wp-content/uploads/2021/06/shutterstock_1872947134-1.jpg.webp"
alt="Sample README file highlighting key sections like project description, installation instructions, and usage guidelines."
/>
<h2>README File – Everything you Need to Know</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
The article explains the importance of a README file, a critical
component in any software project, especially open-source ones. It
introduces the README as a documentation file—typically written in
Markdown—that provides users and developers with essential information
about the project. Key contents usually include the project’s purpose,
installation steps, usage instructions, contribution guidelines, and
license details. The guide outlines best practices for writing a
clear, concise, and well-organized README file to improve project
visibility, usability, and collaboration. It also offers a structured
example to help readers build their own README efficiently.
</p>
<a href="">Read more</a>
<a href="https://www.mygreatlearning.com/blog/readme-file/"
>Read more</a
>
</article>

<article>
<img
src="https://cdn.careerfoundry.com/en/wp-content/uploads/old-blog-uploads/low-fid-wireframe.png"
alt="Low-fidelity wireframe of a mobile app layout with placeholders."
/>
<h2>All You Need to Know About Wireframe</h2>
<p>
The article defines a wireframe as a basic two-dimensional layout of a
web page or app interface. It's used early in the design process to
visualize the structure, layout, and functionality of a product
without focusing on colors, graphics, or final design elements.
Wireframes help teams align on user flow, content placement, and
feature priority, making them an essential communication tool between
designers, developers, and stakeholders. Typically created in
grayscale, they serve as the foundation for further UI and UX
development.
</p>
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
</article>

<article>
<img
src="https://res.cloudinary.com/snyk/image/upload/f_auto,w_2560,q_auto/v1615821731/wordpress-sync/image1-11.png"
alt="Visual diagram of Git branching showing main, feature, and merged branches in a version control workflow."
/>
<h2>Are you curious to learn about Branches in Git?</h2>
<p>
The article introduces the concept of a Git branch as a separate
workspace within a repository, allowing developers to work on new
features, bug fixes, or experiments without affecting the main
codebase. It emphasizes the benefits of branching, such as
facilitating parallel development and simplifying collaboration. The
guide provides practical examples of creating a new branch using git
branch, switching between branches with git checkout, and viewing
existing branches. It also illustrates how branching streamlines
workflows compared to traditional methods, highlighting Git's
efficiency in managing project versions.
</p>
<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.
@2025 Abdullah Saleh <br />
Trainee at CYF - All rights reserved.
</p>
</footer>
</body>
Expand Down
11 changes: 9 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,15 @@ svg {
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
header {
font: var(--font);
text-align: center;
}
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
}
Expand Down Expand Up @@ -84,6 +87,10 @@ article {
grid-column: 2/3;
}
> img {
grid-column: span 3;
grid-column: span 2;
}
}
/*resize the height of first image*/
#resize-image1 {
height: 400px;
}