Skip to content

London | 26-ITP-May | Rhoda Ajiroba | Sprint 2 | wireframe #1436

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
codebyra wants to merge 4 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-May | Rhoda Ajiroba | Sprint 2 | wireframe #1436

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a60983
Add content for README, wireframe and git branch articles
codebyra Jun 9, 2026
b1a12ab
Add article images and improve styling
codebyra Jun 9, 2026
59a9037
Add images and improve article layout
codebyra Jun 9, 2026
df06455
Fix footer spacing and format HTML
codebyra Jun 9, 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/images/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.
Binary file added Wireframe/images/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.
Binary file added Wireframe/images/wireframe-topic.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.
83 changes: 62 additions & 21 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,67 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
<h1>Web Development Concepts</h1>
<p>Understanding README files, Wireframes and Git Branches</p>
</header>

<main>
<article>
<img src="images/readme.png" alt="README documentation example" />


<h2>What is a README File?</h2>

<p>

@cjyuan cjyuan Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code is not yet properly indented.

You may want to follow this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to keep your code consistently formatted.

@codebyra codebyra Jun 9, 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.

@cjyuan I have formatted the HTML document to ensure consistent indentation and updated the footer styling to prevent overlap with the article content and links.

A README file explains a project. It usually contains information
about the purpose of the project, installation instructions,
usage examples and important notes for developers.
</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="images/wireframe-topic.png" alt="Website wireframe layout sketch" />

<h2>What is a Wireframe?</h2>

<p>
A wireframe is a visual plan of a webpage. It helps designers
and developers organise content and layout before building
the final website.
</p>

<a href="https://www.interaction-design.org/literature/topics/wireframing">
Read More
</a>

</article>

<article>
<img src="images/branch.png" alt="Git branching workflow diagram" />

<h2>What is a Git Branch?</h2>

<p>
A Git branch is an independent line of development.
It allows developers to work on new features without
affecting the main version of a project.
</p>

<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
Read More
</a>

</article>
</main>

<footer>
<p>Contact information and site details</p>
</footer>

</body>
</html>
21 changes: 21 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,24 @@ article {
grid-column: span 3;
}
}
header {
text-align: center;
margin: 2rem 0;
}

header h1 {
margin-bottom: 0.5rem;
}

footer {
width: 100%;
background-color: white;
border-top: 1px solid black;
padding: 10px;
}
article img {
width: 100%;
height: 250px;
object-fit: contain;
}

Loading