Skip to content

London | 26-ITP-Jan | Damian Dunkley | Sprint 1 | Feature/Wireframe #958

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
DamianDL wants to merge 2 commits into from
+82 −13
Closed

London | 26-ITP-Jan | Damian Dunkley | Sprint 1 | Feature/Wireframe #958

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0943dd
Update text to answer three questions in 3 articles, with links.
DamianDL Jan 15, 2026
3e10354
Changes to page formatting into Wireframe template
DamianDL Jan 15, 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
95 changes: 82 additions & 13 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,100 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Wireframe Webcode Assignment</title>
<link rel="stylesheet" href="style.css" />
</head>

<style>
Copy link

@jenny-alexander jenny-alexander Jan 23, 2026

Choose a reason for hiding this comment

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

Can you move all of the CSS styling into the style.css file? This ensures that the styling (CSS) is kept separate from the content (HTML) and makes it easier to read and maintain the code.

.container {
display: grid;
grid-template-rows: auto auto; /* Two rows */
grid-template-columns: 1fr 1fr; /* Two columns for second row */
gap: 20px;
max-width: 800px;
margin: 0 auto;
}

.article {
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ccc;
text-align: center;
}

/* First article spans both columns */
.article-top {
grid-column: span 2;
}

@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* Stack on small screens */
}
.article-top {
grid-column: span 1;
}
}
</style>
</head>
Copy link

@jenny-alexander jenny-alexander Jan 23, 2026

Choose a reason for hiding this comment

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

This closing tag </head> doesn't match any opening tag. Perhaps it's a typo?

<body>
Copy link

@jenny-alexander jenny-alexander Jan 23, 2026

Choose a reason for hiding this comment

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

There is already a <body> element within the original index.html file. You are meant to add content to the existing <body> element.
A valid html file can only ever have one <body> element.

<div class="container">
<article class="article article-top">Top Article (Centered)</article>
<article class="article">Bottom Left Article</article>
<article class="article">Bottom Right Article</article>
</div>
</body>
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe to Webcode Assignment</h1>
<p>
This is the default, provided code and no changes have been made yet.
This is the initial DRAFT version of this page. <!--First line updated to reflect draft status-->
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<h2>Wireframe schematic</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
Wireframe is a visual guide that represents the skeletal framework
of a website or application. Its purpose is to outline the layout.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</article> <<!--What is the purpose of a Wireframe-->
<h3>What is the Purpose of a Readme File</h3>
</main>
<p>
A readme file serves as a guide for users and developers, providing
essential information about a project, including its purpose,
installation instructions, usage guidelines, and contribution
protocols. It helps ensure that everyone involved understands how to
effectively use and contribute to the project.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more, Github Document</a>
</article> <<!--What is the purpose of a Wireframe-->
<h4>What is the Purpose of a Wireframe</h4>
</main>
<p>
A wireframe is a visual guide that represents the skeletal framework
of a website or application. Its purpose is to outline the layout,
structure, and functionality of a page before the actual design and
development process begins. Wireframes help stakeholders visualize
the user interface, plan content placement, and ensure that the user
experience is intuitive and effective.
</p>
<a href="https://www.productplan.com/glossary/wireframe/">Read more about Wireframes</a>
</article> <<!--What is a branch in Git-->
<h5>What is a branch in Git</h5>
</main>
<p>
A branch in Git is a separate line of development that allows
multiple versions of a project to coexist. It enables developers to
work on new features, bug fixes, or experiments without affecting the
main codebase. Branches facilitate collaboration, as team members can
work independently and later merge their changes back into the main
branch when ready.
</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 about Git branches</a>
</footer>
</body>
</html>
Loading