Skip to content

London | 26-ITP-May | Edina Kurdi | Sprint 2 | Wireframe #1357

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
edinakurdi wants to merge 13 commits into from
Closed

London | 26-ITP-May | Edina Kurdi | Sprint 2 | Wireframe #1357

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0a4362f
add placeholder text to wireframe articles
edinakurdi May 26, 2026
ceb09d7
update link styling, footer content and article links
edinakurdi May 26, 2026
0515ff4
add space before footer link
edinakurdi May 26, 2026
aac134f
remove dubplicate padding on a
edinakurdi May 26, 2026
6844c6c
clean up footer CSS
edinakurdi May 26, 2026
8c86b9f
add colour variable to CSS root
edinakurdi May 26, 2026
33516ee
add and style article images
edinakurdi May 26, 2026
c0c0492
add short descriptions of the three concepts
edinakurdi May 26, 2026
7033ccf
fix footer according to criteria - fixed position
edinakurdi May 26, 2026
d5fb5bf
readme checks each criteria
edinakurdi May 26, 2026
570b39b
add wireframe alt text
edinakurdi May 26, 2026
eef708e
merge the two main selectors into one
edinakurdi May 30, 2026
56b4f2b
update footer to avoid overlaping with text in body
edinakurdi May 31, 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
34 changes: 17 additions & 17 deletions Wireframe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

<!--{{<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
- [ ] Develop the habit of writing clean, well-structured, and error-free code
- [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
- [x] Develop the habit of writing clean, well-structured, and error-free code
<!--{{</objectives>}}>-->

## Task
Expand All @@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u

## Acceptance Criteria

- [ ] Semantic HTML tags are used to structure the webpage.
- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
- [ ] The webpage is styled using a linked .css file.
- [ ] The webpage is properly committed and pushed to a branch on GitHub.
- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
- [ ] The page footer is fixed to the bottom of the viewport.
- [ ] The page layout closely match the wireframe.
- [x] Semantic HTML tags are used to structure the webpage.
- [x] The page scores 100 for Accessibility in the Lighthouse audit.
- [x] The webpage is styled using a linked .css file.
- [x] The webpage is properly committed and pushed to a branch on GitHub.
- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
- [x] The page footer is fixed to the bottom of the viewport.
- [x] The page layout closely match the wireframe.

### Developers must adhere to professional standards.

Expand All @@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
These practices reflect the level of quality expected in professional work.
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.

- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
- [ ] My code is consistently formatted
- [ ] My page content is free of typos and grammatical mistakes
- [ ] I commit often and push regularly to GitHub
- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
- [x] My code is consistently formatted
- [x] My page content is free of typos and grammatical mistakes
- [x] I commit often and push regularly to GitHub

## Resources

Expand Down
75 changes: 48 additions & 27 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,54 @@
<!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>

<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>Developer essentials</h1>
<p>
A quick introduction to READMEs, wireframes, and Git branches.
</p>
</header>
<main>
<article>
<img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frb46gni0wl2759llb6xs.png" alt="readme file" />
<h2>What is a README file?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A README is often what people look at in a project to understand what it is about. It should include a description of the project, instructions on how to use it, and any additional information that may be useful.
</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>
<a href="https://www.makeareadme.com/" target="_blank">Read more</a>
</article>

<article>
<img src="https://live.staticflickr.com/2154/5734993652_d4a2ee8778_b.jpg" alt="wireframe sketch of website layout" />
<h2>What is the purpose of a wireframe?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A wireframe for a website is like a blueprint for a house. It is a visual representation of the layout of the website. It is useful for planning purposes and can save time before building, by helping us spot potential issues early.
</p>
</footer>
</body>
</html>
<a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
</article>

<article>
<img src="https://blog.nobledesktop.com/_next/image?url=%2Fimages%2Fblog%2Fgit-branches%2Fgit-branches-merge.png&w=750&q=75" alt="git branching diagram" />
<h2>What is a branch in Git?</h2>
<p>
A branch in Git is like an alternative version of a project. When several developers work on the same project, separate branches help them avoid overriding each other's work. These branches then can be merged into the main branch through a pull request.
</p>

@cjyuan cjyuan May 30, 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.

Breaking HTML text into multiple lines helps make the code easier to read, edit, and maintain while preserving the same rendered output.

VS Code formatter could be used to keep our code consistently formatted, including breaking long
lines of HTML text into multiple lines for easier editing and maintenance.

As a best practice, consider following this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.

@edinakurdi edinakurdi May 31, 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 updated my VS code to automatically format using prettier and now the text is wrapped.

<a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" target="_blank">Read more</a>
</article>

</main>
<footer>
<p>
This page was built following a provided wireframe design: <a href="https://github.com/edinakurdi/Module-Onboarding/blob/main/Wireframe/README.md">Wireframe</a>
</p>
</footer>
</body>

</html>
24 changes: 19 additions & 5 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--color: white;
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
/* increased font size, since it felt tiny */
--font: 1.15rem/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
Expand All @@ -32,28 +34,40 @@ body {
font: var(--font);
}
a {
padding: var(--space);
padding: 4px 20px;
border: var(--line);
max-width: fit-content;
max-width: fit-content;
text-decoration: none;
font-weight: bold;
}
img,
svg {
img {
width: 100%;
object-fit: cover;
height: 350px;
filter: grayscale(70%) ;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
header {
text-align: center;
}
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
padding: 0 8rem;
}
Comment on lines 63 to 77

@cjyuan cjyuan May 30, 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.

There is another main selector at line 78. Consider merging the properties from both selectors into a single main rule to make them easier to find and maintain.

@edinakurdi edinakurdi May 31, 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 consolidated the two.

footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
footer a {
padding: 2px;
border: none
}
/* ====== 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