Skip to content

Commit c06f400

Browse files
author
lintsang
committed
fixed footer issue and undo checkbox in readme.md
1 parent 21d7708 commit c06f400

3 files changed

Lines changed: 71 additions & 61 deletions

File tree

‎Wireframe/README.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
<!--{{<objectives>}}>-->
66

7-
- [x] Use semantic HTML tags to structure the webpage
8-
- [x] Create three articles, each including an image, title, summary, and a link
9-
- [x] Check a webpage against a wireframe layout
7+
- [ ] Use semantic HTML tags to structure the webpage
8+
- [ ] Create three articles, each including an image, title, summary, and a link
9+
- [ ] Check a webpage against a wireframe layout
1010
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
11-
- [x] Use version control by committing often and pushing regularly to GitHub
12-
- [x] Develop the habit of writing clean, well-structured, and error-free code
11+
- [ ] Use version control by committing often and pushing regularly to GitHub
12+
- [ ] Develop the habit of writing clean, well-structured, and error-free code
1313
<!--{{</objectives>}}>-->
1414

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

2828
## Acceptance Criteria
2929

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

3838
### Developers must adhere to professional standards.
3939

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

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

5050
## Resources
5151

‎Wireframe/index.html‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,50 @@
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10-
<header>
11-
<h1>Web Development Foundation</h1>
12-
<p>
13-
There are some frequently asked questions for beginner developers.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<div class="image-wrapper">
19-
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="illustration of a readme file" />
20-
</div>
21-
<h2>1. What is the purpose of a README file?</h2>
10+
<div id="container">
11+
<header>
12+
<h1>Web Development Foundation</h1>
2213
<p>
23-
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.
14+
There are some frequently asked questions for beginner developers.
2415
</p>
25-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
26-
</article>
27-
<article>
28-
<div class="image-wrapper">
29-
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="illustator of a wireframe icon" />
30-
</div>
31-
<h2>2. What is the purpose of a wireframe?</h2>
32-
<p>
33-
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.
34-
</p>
35-
<a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
36-
</article>
37-
<article>
38-
<div class="image-wrapper">
39-
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="illustrator of github icon" />
40-
</div>
41-
<h2>3. What is a branch in Git?</h2>
42-
<p>
43-
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.
44-
</p>
45-
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
46-
</article>
47-
</main>
48-
49-
<footer>
50-
<p>
51-
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/
52-
</p>
53-
</footer>
16+
</header>
17+
<main>
18+
<article>
19+
<div class="image-wrapper">
20+
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="illustration of a readme file" />
21+
</div>
22+
<h2>1. What is the purpose of a README file?</h2>
23+
<p>
24+
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.
25+
</p>
26+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
27+
</article>
28+
<article>
29+
<div class="image-wrapper">
30+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="illustator of a wireframe icon" />
31+
</div>
32+
<h2>2. What is the purpose of a wireframe?</h2>
33+
<p>
34+
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.
35+
</p>
36+
<a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
37+
</article>
38+
<article>
39+
<div class="image-wrapper">
40+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="illustrator of github icon" />
41+
</div>
42+
<h2>3. What is a branch in Git?</h2>
43+
<p>
44+
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.
45+
</p>
46+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
47+
</article>
48+
</main>
49+
<footer>
50+
<p>
51+
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.<br>All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/
52+
</p>
53+
</footer>
54+
</div>
5455
</body>
5556
</html>

‎Wireframe/style.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,12 @@ p {
6161
Setting the overall rules for page regions
6262
https://www.w3.org/WAI/tutorials/page-structure/regions/
6363
*/
64+
#container {
65+
display:flex;
66+
flex-direction:column;
67+
min-height: 100vh;
68+
}
69+
6470
header, main {
6571
width: 80%;
6672
margin-inline: auto;
@@ -72,12 +78,15 @@ main {
7278
}
7379

7480
footer {
81+
margin-top:auto;
7582
width: 100%;
76-
position: relative;
83+
margin-inline: auto;
7784
text-align: center;
7885
background-color: #eee;
79-
font-size: 0.8rem;
80-
padding: 60px 120px;
86+
padding: 60px 0;
87+
overflow: hidden;
88+
white-space: nowrap;
89+
text-overflow: ellipsis;
8190
}
8291

8392
/* ====== Articles Grid Layout ====

0 commit comments

Comments
 (0)