Skip to content

London | 26-ITP-May | Hugh Mills | Sprint 2 | Wireframe to web code#1405

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

Closed
HM-127BTY wants to merge 8 commits into from
Closed

London | 26-ITP-May | Hugh Mills | Sprint 2 | Wireframe to web code #1405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e4d7a04
Started work
HM-127BTY May 16, 2026
c2fd516
Added infor to Header.
HM-127BTY Jun 3, 2026
ede0704
added styles for header,
HM-127BTY Jun 3, 2026
a9b67f1
removed the image file and changed to the image online to wiki page.
HM-127BTY Jun 3, 2026
c2c02e0
changed file in form-control to one before changes
HM-127BTY Jun 3, 2026
74566dd
Mades fixes and updates.
HM-127BTY Jun 5, 2026
6c3a2e6
Changes to the "Read more" tag to make it more uniform.
HM-127BTY Jun 6, 2026
08e533a
Added " aspect-ratio:16/9 ;" to the "img" in style.css to help make …
HM-127BTY Jun 6, 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
36 changes: 26 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,25 +8,41 @@
</head>
<body>
<header>
<div>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<p id="top-comment">
Here are 3 useful links explaining useful aspects for Readme files, Purpose of Wireframes and what is a Branch of Git.
</p>
</div>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
<article id="readme-article">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/README-cURL_black_trimmed.png" alt="A black screen showing text from a readme file that has been opened">
<h2>Purpose of a Readme file</h2>
<p>A Readme file is a file containing text that is often used to relay information to the user.
</p>
<a href="https://en.wikipedia.org/wiki/README">Read more</a>
</article>

<article id="wireframe-article">
<img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >
<h2>Purpose of a Wireframe</h2>
<p>A wireframe is normally an image that is used to show instructions on how a website is meant to be displayed.
</p>
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
</article>

<article id="branch-article">
<img src="https://docs.wavemaker.com/learn/assets/images/branching-model-121bd320dd2f5972a5f6ce2fb19a3f4e.png" alt="Connection blue balls in a straight line starting from one called Master then connection to others with lined arrow, from First is extra arrow goign up to red balls labed Bugfix then back down to third blue ball, from 2nd blue ball extra arrow goes down to two green balls labed Feature then back to last blue ball." >
<h2>A branch of Git</h2>
<p>A Branch in git is a copy of the main folder where there has been edits or fixes done to in a controlled manner that can then be implemented to the main folder in due time.
</p>
<a href="">Read more</a>
<a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read more</a>

@akerenakerenJun 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@HM-127BTY, why is this anchor link UI different from the rest?

@HM-127BTYHM-127BTYJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I am unsure why it is doing that, could be because it is the last item in all the articles before footer? I will look into it tomorrow, hopefully with some assistance from others in the class on Saturday.

@HM-127BTYHM-127BTYJun 6, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I worked it out, I did not have a height set for it, so added "max-height: fit-content;" this helped make them match.

</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
By Hugh Mills - Intro to Programing - May 2026
</p>
</footer>
</body>
Expand Down
32 changes: 32 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,23 +24,29 @@ As well as useful links to learn more */
--line: 1px solid;
--container: 1280px;
}

/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
max-height: fit-content;
}

img,
svg {
width: 100%;
aspect-ratio:16/9 ;
object-fit: cover;
}

/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
Expand All@@ -49,11 +55,37 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}

header {
text-align:center;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}

h1 {
text-align:center;
font-size: 4em;
max-width: fit-content;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}

#top-comment {
text-align:center;
margin-bottom: 20px;
}

footer {
position: fixed;
bottom: 0;
text-align: center;
color: white;
padding-top: 10px;
background-color: rgb(28, 77, 127);
width:100%
}
Comment on lines +59 to 87

@akerenakerenJun 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@HM-127BTY, how could you improve the readability and the separation between blocks of code?

@HM-127BTYHM-127BTYJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

My best guess would be spacing, keeping a clear line between them would help to break it up and make it more readable?


/* ====== 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
Expand Down
Loading