Skip to content

Manchester | 26-ITP-May | Yee Man Tsang | Sprint 2 | Wireframe to Web Code #1349

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
lintsang wants to merge 4 commits into
base: main
Choose a base branch
from
+83 −37
Open

Manchester | 26-ITP-May | Yee Man Tsang | Sprint 2 | Wireframe to Web Code #1349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2af122a
change the html and css to look same to wireframe
May 24, 2026
7dfbf5b
add questions, answer and images
May 24, 2026
4466770
add links to each article
May 24, 2026
dec48eb
fine tune all interface to wireframe requirenment
May 24, 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
32 changes: 16 additions & 16 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
- [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
- [ ] 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 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
62 changes: 44 additions & 18 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,53 @@
<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>
<div id="wrapper">
Copy link
Copy Markdown

@LonMcGregor LonMcGregor May 30, 2026

Choose a reason for hiding this comment

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

What is the purpose of this wrapper div?

<header>
<h1>Web Development Foundation</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
There are some frequently asked questions for beginner developers.
</p>
<a href="">Read more</a>
</article>
</main>
</header>
<main>
<article>
<div class="image-wrapper">
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="" />
Copy link
Copy Markdown

@LonMcGregor LonMcGregor May 30, 2026

Choose a reason for hiding this comment

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

Should the alt attribute in these images be empty?

</div>
<h2>1. What is the purpose of a README file?</h2>
<p>
README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.
</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>
<div class="image-wrapper">
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="" />
</div>
<h2>2. What is the purpose of a wireframe?</h2>
<p>
Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.
</p>
<a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
</article>
<article>
<div class="image-wrapper">
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="" />
</div>
<h2>3. What is a branch in Git?</h2>
<p>
A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.
</p>
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
</article>
</main>
</div>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<div id="wrapper">
Copy link
Copy Markdown

@LonMcGregor LonMcGregor May 30, 2026

Choose a reason for hiding this comment

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

What is this wrapper div here doing?

<p>
By Lin Tsang. This webpage serves as a test environment. Some images and media displayed on this site are sourced from external websites for demonstrative and educational purposes. All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/
Copy link
Copy Markdown

@LonMcGregor LonMcGregor May 30, 2026

Choose a reason for hiding this comment

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

Are you sure this footer is fixed to the bottom of the viewport?


</p>
</div>
</footer>
</body>
</html>
26 changes: 23 additions & 3 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,14 @@ As well as useful links to learn more */
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {

body {
background: var(--paper);
color: var(--ink);
font: var(--font);
text-align: center;
display: grid;

}
a {
padding: var(--space);
Expand All @@ -41,6 +45,20 @@ svg {
width: 100%;
object-fit: cover;
}
p {
padding: 0 0 30px 0;
}
.image-wrapper img {
width: 100%;
/* aspect ratio for image */
aspect-ratio: 16 / 9;
}
#wrapper{
/* wrapper to make the content to 80% width */
width:80%;
margin: 0 auto;
}

/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
Expand All @@ -50,9 +68,11 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background-color: #eee;
font-size: 0.8rem;
padding: 60px 0 60px 0;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down
Loading