Skip to content

Commit cc67c48

Browse files
shafiekwalker7861shafiekwalker7861
committed
Complete wireframe task
1 parent a7b8a25 commit cc67c48

7 files changed

Lines changed: 73 additions & 44 deletions

File tree

‎Wireframe/README.md‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
11
# Wireframe
22

3-
## Learning Objectives
4-
5-
<!--{{<objectives>}}>-->
6-
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
10-
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
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
13-
<!--{{</objectives>}}>-->
14-
15-
## Task
163
![Wireframe](./wireframe.png)
174

185
Using the provided wireframe and resources, write a new webpage explaining:
@@ -21,35 +8,33 @@ Using the provided wireframe and resources, write a new webpage explaining:
218
1. What is the purpose of a wireframe?
229
1. What is a branch in Git?
2310

24-
The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted.
25-
2611
There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work.
2712

28-
## Acceptance Criteria
13+
## Learning Objectives
2914

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.
15+
<!--{{<objectives>}}>-->
3716

38-
### Developers must adhere to professional standards.
17+
- [ ] Use semantic HTML tags to structure the webpage
18+
- [ ] Create three articles, each including an image, title, summary, and a link
19+
- [ ] Check a webpage against a wireframe layout
20+
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
21+
- [ ] Use version control by committing often and pushing regularly to GitHub
22+
<!--{{</objectives>}}>-->
23+
24+
## Acceptance Criteria
3925

40-
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
26+
- [✅] Semantic HTML tags are used to structure the webpage.
27+
- [✅] The page scores 100 for Accessibility in the Lighthouse audit.
28+
- [✅] The page header includes a title and description.
29+
- [✅] The articles section has three unique articles, each including an image, title, summary, and a link.
30+
- [✅] The page footer is fixed to the bottom of the viewport.
31+
- [✅] The webpage is styled using a linked .css file.
32+
- [✅] The webpage is properly committed and pushed to a branch on GitHub.
4133

42-
These practices reflect the level of quality expected in professional work.
43-
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
4434

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
4935

5036
## Resources
5137

5238
- [Wireframe](https://www.productplan.com/glossary/wireframe/)
5339
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
5440
- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
55-
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Wireframe/images/img_1.png‎

440 KB
Loading

‎Wireframe/images/img_2.png‎

420 KB
Loading

‎Wireframe/images/img_3.png‎

677 KB
Loading

‎Wireframe/index.html‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,49 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<title>Developer Fundamentals</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>Developer Fundamentals</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
Learn the essentials of building and managing projects in tech — from wireframes for planning designs, to Git branches for version control, and README files for clear project documentation.
1414
</p>
1515
</header>
1616
<main>
1717
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
18+
<img src="images/img_1.png" alt="" />
19+
<h2>What is a Wireframe?</h2>
2020
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
21+
A wireframe is a simple visual guide used to plan the layout of a webpage or app. It focuses on structure rather than design, showing where elements like headers, navigation, content, and images will be placed. Wireframes help developers and designers understand how a page will work before adding colors, images, or styling.
2322
</p>
24-
<a href="">Read more</a>
23+
<a class="button" href="https://www.w3schools.com/css/css_website_layout.asp" target="_blank" rel="noreferrer">Read more</a>
24+
</article>
25+
26+
<article>
27+
<img src="images/img_2.png" alt="" />
28+
<h2>What is a Readme.md file</h2>
29+
<p>
30+
A README.md file is the main documentation file in a project. It explains what the project is about, how it works, and how to use it. Written in Markdown, it helps developers and users quickly understand the purpose of the project and how to get started.
31+
</p>
32+
33+
<a class="button" href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/" target="_blank" rel="noreferrer">Read more</a>
34+
35+
</article>
36+
37+
<article>
38+
<img src="images/img_3.png" alt="" />
39+
<h2>What is a branch in GIT?</h2>
40+
<p>
41+
A branch in Git is a separate version of your code that allows you to work on new features or fixes without affecting the main project. It helps developers collaborate safely by keeping changes isolated until they are ready to be merged into the main branch.
42+
</p>
43+
<a class="button" href="https://www.w3schools.com/git/git_branch.asp" target="_blank" rel="noreferrer">Read more</a>
2544
</article>
2645
</main>
2746
<footer>
2847
<p>
29-
This is the default, provided code and no changes have been made yet.
48+
Shafiek Walker | ITP MAY 2026
3049
</p>
3150
</footer>
3251
</body>

‎Wireframe/style.css‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
3334
}
3435
a {
3536
padding: var(--space);
@@ -45,14 +46,20 @@ svg {
4546
Setting the overall rules for page regions
4647
https://www.w3.org/WAI/tutorials/page-structure/regions/
4748
*/
49+
50+
header {
51+
text-align: center;
52+
max-width: var(--container);
53+
margin: 0 auto calc(var(--space) * 4) auto;
54+
}
4855
main {
4956
max-width: var(--container);
5057
margin: 0 auto calc(var(--space) * 4) auto;
5158
}
5259
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
60+
display: flex;
61+
justify-content: center; /* Centers horizontally */
62+
align-items: center;
5663
}
5764
/* ====== Articles Grid Layout ====
5865
Setting the rules for how articles are placed in the main element.
@@ -87,3 +94,21 @@ article {
8794
grid-column: span 3;
8895
}
8996
}
97+
98+
button,
99+
.button {
100+
display: inline-block;
101+
background-color: rgb(247, 247, 247);
102+
color: rgb(0, 0, 0);
103+
padding: 10px 20px;
104+
105+
cursor: pointer;
106+
text-decoration: none;
107+
transition: 0.3s;
108+
}
109+
110+
button:hover,
111+
.button:hover {
112+
background-color: rgb(163, 163, 179);
113+
transform: scale(1.05);
114+
}

‎Wireframe/wireframel Lighthouse score.jpg‎

166 KB
Loading

0 commit comments

Comments
 (0)