Skip to content

London | 26-ITP-JAN | Kayanat Suleman | Sprint 1 | Wireframe #1087

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

London | 26-ITP-JAN | Kayanat Suleman | Sprint 1 | Wireframe #1087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7a56285
Create three articles explaining README, wireframes, and Git branches
KayanatSuleman Jan 22, 2026
99c4e3f
Fix broken article tags in wireframe page
KayanatSuleman Jan 22, 2026
2809de5
Add external links to each article
KayanatSuleman Jan 22, 2026
2be4de3
Replace placeholder summaries with wireframe and Git branch descriptions
KayanatSuleman Jan 22, 2026
07f9474
Fix footer css sytnax and pin footer to bottom
KayanatSuleman Jan 22, 2026
7e05e34
Updating article summaries and page descriptions, implementing semati…
KayanatSuleman Jan 22, 2026
601a89d
Cross checking success critiera and objectives met, including a light…
KayanatSuleman Jan 22, 2026
2824c47
updating obstructing paragraph within footer for easily readibility
KayanatSuleman Jan 27, 2026
0c82ff5
Merge upstream main into feature/wireframe
KayanatSuleman Jan 27, 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
24 changes: 12 additions & 12 deletions Wireframe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u

<!--{{<objectives>}}>-->

- [ ] Use semantic HTML tags to structure the webpage
- [ ] Create three articles, each including an image, title, summary, and a link
- [ ] Check a webpage against a wireframe layout
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
- [ ] Use version control by committing often and pushing regularly to GitHub
- [x] Use semantic HTML tags to structure the webpage
- [x] Create three articles, each including an image, title, summary, and a link
- [x] Check a webpage against a wireframe layout
- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
- [x] Use version control by committing often and pushing regularly to GitHub
<!--{{</objectives>}}>-->

## Acceptance Criteria

- [ ] Semantic HTML tags are used to structure the webpage.
- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
- [ ] The page header includes a title and description.
- [ ] The articles section has three unique articles, each including an image, title, summary, and a link.
- [ ] The page footer is fixed to the bottom of the viewport.
- [ ] The webpage is styled using a linked .css file.
- [ ] The webpage is properly committed and pushed to a branch on GitHub.
- [x] Semantic HTML tags are used to structure the webpage.
- [x] The page scores 100 for Accessibility in the Lighthouse audit.
- [x] The page header includes a title and description.
- [x] The articles section has three unique articles, each including an image, title, summary, and a link.
- [x] The page footer is fixed to the bottom of the viewport.
- [x] The webpage is styled using a linked .css file.
- [x] The webpage is properly committed and pushed to a branch on GitHub.

## Resources

Expand Down
76 changes: 45 additions & 31 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,47 @@
<!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>
<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>
<!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>
<body>
<header>
<h1>Wireframe</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
This page explains key concepts used in web development, including README files, wireframes, and Git branches.
</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>
</body>
</html>
</header>
<main>
<section>
<article>
<img src="placeholder.svg" alt="" />
<h2>What is the purpose of a README file?</h2>
<p>
A ReadMe file explains what a project is, how to set it up and how to use it.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank" rel="noopener noreferrer">Learn more about READMEs</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a simple visual guide that shows the layout and structure of a webpage before it is built.
</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank" rel="noopener noreferrer">Learn more about wireframes</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>What is a branch in Git?</h2>
<p>
A Git branch allows developers to work on new features or fixes independently without affecting the main codebase.
</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">Learn more about Git branching</a>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
5 changes: 5 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,12 @@ main {
}
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: var(--space);
background: var(--paper);
border-top: var(--line);
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down