Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
58 changes: 48 additions & 10 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,64 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Starting a project</h1>
<p>
This is the default, provided code and no changes have been made yet.
The following page contains an introduction to a README file,a WIREFRAME, and to GIT BRANCH.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="https://docs.github.com/assets/cb-55933/mw-1440/images/help/repository/readme-links.webp"
alt="GitHub README for Scientist, a Ruby library for refactoring critical paths, showing the 'How do I science?' section with explanation of testing refactored code under load"

Choose a reason for hiding this comment

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

The <img> alt text is not reflecting what I see on the screen. This part: "with explanation of testing refactored code under load" isn't displayed in the image so it would be better to remove that part.

/>
<h2>What is a README file</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file can be added to the repository to tell other people why
the project is useful, what they can do with the project, and how they
can use it...

Choose a reason for hiding this comment

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

I think the trailing '...' could be replaced with a single period.

</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
>
</article>
<article>
<img
src="https://balsamiq.com/assets/learn/articles/wireframe-example-plain.png"
alt="Wireframe mockup of a product page for a cushy fleece hoodie with image gallery, size selector, and add-to-cart button"
/>
<h2>What is a WIREFRAME</h2>
<p>
A wireframe is the skeleton of your digital project. Think of it as
the foundation for your website, app, or dashboard. It focuses on
layout, and content placement—not on colors, fonts, or any visual
polish...

Choose a reason for hiding this comment

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

I think the trailing '...' could be replaced with a single period.

</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/" >Read more</a>
</article>
<article>
<img
src="data:image/png;base64,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"

Choose a reason for hiding this comment

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

The <img> src is very long and it makes your HTML hard to scan. Would it be possible for you to download the image locally and then save it within the project (you could create an /img folder within the Wireframe directory). This will make the code easier to read and maintain!

alt="Diagram titled ‘GIT Branch and its Operations’ showing master and two feature branches with colored nodes and commits, plus a git logo"
/>
<h2>What is a GIT BRANCH</h2>
<p>
Use a branch to isolate development work without affecting other
branches in the repository. Each repository has one default branch,
and can have multiple other branches. You can merge a branch into
another branch using a pull request...

Choose a reason for hiding this comment

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

I think the trailing '...' could be replaced with a single period.

</p>
<a
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
>Read more</a
>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Contact:</p>
<p>Mob:123456</p>

Choose a reason for hiding this comment

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

I am unsure what 'Mob' stands for.

<p>G-mail:[email protected]</p>
</footer>
</body>
</html>
44 changes: 32 additions & 12 deletions Wireframe/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,38 @@ As well as useful links to learn more */
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);

color: var(--ink);
font: var(--font);
margin-bottom: 9rem;
}

header {
margin-bottom: 5rem;
}

h1 {
margin-bottom: 5rem;
text-align: center;
}

a {
background-color: #000004;
color: white;
padding: var(--space);
border: var(--line);
max-width: fit-content;
border: none;
display: inline-block;
max-width: 7rem;
max-height: 2rem;
text-align: center;
text-decoration: none;
}
img,
svg {
width: 100%;
object-fit: cover;
}

/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
Expand All @@ -50,9 +68,13 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
background-color: aquamarine;
text-align: center;
position: fixed;

bottom: 0;
text-align: center;
left: 0;
right: 0;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand All @@ -78,12 +100,10 @@ article {
border: var(--line);
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
}
> img {
grid-column: span 3;
}
display: flex;
flex-direction: column;
}

article a {
margin-top: auto;
}