Skip to content

Glasgow | Jan-ITP-2026 | Alasdair MacDonald | Sprint 1 | Wireframe #1070

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
MacDonald91 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Glasgow | Jan-ITP-2026 | Alasdair MacDonald | Sprint 1 | Wireframe #1070

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
72 changes: 57 additions & 15 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,73 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Wireframe Exercise</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
<main>
<!-- Header MUST be first child of main for the CSS grid -->
<header>
<h1>Web Development Basics</h1>
<p>
This page explains the purpose of a README file, a wireframe, and a Git
branch.
</p>
</header>

<article>
<img
src="placeholder.svg"
alt="Illustration representing a README file"
/>
<h2>Purpose of a README file</h2>
<p>
A README file explains what a project is, how it works, and how to use
it. It helps other developers understand the project quickly.
</p>
<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="wireframe.png"
alt="Illustration showing a wireframe layout"
/>
<h2>Purpose of a wireframe</h2>
<p>
A wireframe is a simple visual plan of a webpage. It shows the layout
and structure before colours, images, or styling are added.
</p>
<a href="https://www.productplan.com/glossary/wireframe/">
Read more
</a>
</article>

<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="placeholder.svg"
alt="Illustration representing a Git branch"
/>
<h2>What is a Git branch?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A Git branch allows developers to work on changes safely without
affecting the main code until the work is ready.
</p>
<a href="">Read more</a>
<a
href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
>
Read more
</a>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>© 2026 Web Basics</p>
</footer>
</body>
</html>