Skip to content

Glasgow | 26-ITP-May | Francesco Romano Monda | Sprint 2 | Wireframe to Web Code #1409

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
fromonda wants to merge 5 commits into
base: main
Choose a base branch
from
+66 −55
Open

Glasgow | 26-ITP-May | Francesco Romano Monda | Sprint 2 | Wireframe to Web Code #1409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd27467
Add README, wireframe, and Git branch articles with images
fromonda May 29, 2026
d16c2f0
Update index.html
fromonda May 30, 2026
e8b0bc4
Footer positioning fix and article spacing adjustment
fromonda Jun 2, 2026
acd8a37
Wireframe layout refinements
fromonda Jun 3, 2026
bb9b076
Header layout alignment with main content and removal of fixed footer…
fromonda Jun 5, 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
Binary file added Wireframe/git-branch.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 41 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,63 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>

Copy link
Copy Markdown

@akeren akeren Jun 5, 2026

Choose a reason for hiding this comment

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

@fromonda, could you explain why you've added this empty line?

Copy link
Copy Markdown
Author

@fromonda fromonda Jun 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

The empty line you mentioned, along with the others I added, is intended to make the code more readable by visually separating the different sections. In this case, it helps distinguish the head snippet from the body snippet, while the others separate the individual article snippets, making the structure easier to read.

<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Learn about README files, wireframes, and Git branches.</p>
</header>
Copy link
Copy Markdown

@akeren akeren Jun 5, 2026

Choose a reason for hiding this comment

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

@fromonda, when you compare the header with the main body, does the UI alignment look intentional? What CSS change might help align them?

Copy link
Copy Markdown
Author

@fromonda fromonda Jun 5, 2026

Choose a reason for hiding this comment

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

The alignment between the header and the main body was not intentional; it was simply the default behaviour. From your comment, I understood that you were suggesting a more consistent alignment, so I applied the same container styling used for the main body to the header as well.


<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="readme.png"
alt="Illustration promoting the creation of an effective README file"
/>
<h2>What is a README File?</h2>
<p>
A README file explains what a project does, how to install it, how to
use it, and any important information developers need. It is usually
the first file people read when viewing a project.
</p>
<a href="https://www.makeareadme.com/">Read more</a>
</article>

<article>
<img src="wireframe.png" alt="Wireframe showing a webpage layout" />
<h2>What is a Wireframe?</h2>
<p>
A wireframe is a digital diagram that shows the skeleton of a website.
It strips away visual elements like colors, fonts, and images to focus
entirely on where headers and content blocks live.
</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
</article>

<article>
<img src="git-branch.png" alt="Illustration of branching in Git" />
<h2>What is a Git Branch?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A branch in Git is an independent line of development. Branches allow
developers to work on new features, updates, or fixes without
affecting the main project. This helps keep changes organized and
separate until they are ready to be merged.
</p>
<a href="">Read more</a>
<a
href="https://book.the-turing-way.org/reproducible-research/vcs/vcs-git-branches/"
>Read more</a
>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Built using semantic HTML, CSS layout techniques, and version control
practices.
</p>
</footer>
Comment on lines 57 to 62
Copy link
Copy Markdown

@akeren akeren Jun 5, 2026

Choose a reason for hiding this comment

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

@fromonda, examine the footer position in the rendered UI. Where should it sit relative to the rest of the page, and what styling might need to change?

Copy link
Copy Markdown
Author

@fromonda fromonda Jun 5, 2026

Choose a reason for hiding this comment

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

The footer was intentionally anchored to the bottom of the viewport using position: fixed. However, based on your comment, I understood that the footer would be better positioned below the page content so that it follows the normal document flow. I have therefore removed the fixed positioning and allowed the footer to sit naturally after the main content.

</body>
Expand Down
Binary file added Wireframe/readme.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 25 additions & 45 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,3 @@
/* Here are some starter styles
You can edit these or replace them entirely
It's showing you a common way to organise 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
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
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
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
Expand All @@ -24,8 +6,7 @@ As well as useful links to learn more */
--line: 1px solid;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
/* ====== Base Elements ====== */
body {
background: var(--paper);
color: var(--ink);
Expand All @@ -41,26 +22,18 @@ svg {
width: 100%;
object-fit: cover;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
/* ====== Site Layout ====== */
header,
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
background: white;
border-top: 1px solid black;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
/* ====== Articles Grid Layout ==== */
main {
display: grid;
grid-template-columns: 1fr 1fr;
Expand All @@ -69,21 +42,28 @@ main {
grid-column: span 2;
}
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
/* ====== Article Layout ====== */
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;
}
row-gap: 0.5rem;
}

article > * {
grid-column: 2 / 3;
}

article > img {
grid-column: span 3;
}

article h2 {
margin: 0;
}

article p {
margin: 0.5rem 0 0 0;
}
Binary file modified Wireframe/wireframe.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading