Skip to content

Commit e11f7b6

Browse files
lauracs24lauracs24
committed
Fix HTML validation and wireframe layout
1 parent b42debc commit e11f7b6

2 files changed

Lines changed: 67 additions & 58 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 52 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,59 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
93

10-
<body>
11-
<header>
12-
<h1>Wireframe Exercise</h1>
13-
<p>
14-
This page explains README files, wireframes, and Git branches.
15-
</p>
16-
</header>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
1710

18-
<main>
19-
<section class="articles">
20-
<article>
21-
<img src="placeholder.svg" alt="" />
22-
<h2>What is a README file?</h2>
23-
<p>
24-
A README file explains what a project is, how it works, and how to use it.
25-
It is usually the first thing CYF students read in a repository.
26-
</p>
27-
<a
28-
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
29-
>Read more</a
30-
>
31-
</article>
11+
<body>
12+
<header>
13+
<h1>Wireframe Exercise</h1>
14+
<p>This page explains README files, wireframes, and Git branches.</p>
15+
</header>
3216

33-
<article>
34-
<img src="placeholder.svg" alt="" />
35-
<h2>What is a wireframe?</h2>
36-
<p>
37-
A wireframe is a simple visual layout that shows the structure of a webpage
38-
before any design or styling is added.
39-
</p>
40-
<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/"
41-
>Read more</a
42-
>
43-
</article>
17+
<main>
18+
<section class="articles">
19+
<article>
20+
<img src="placeholder.svg" alt="" />
21+
<h2>What is a README file?</h2>
22+
<p>
23+
A README file explains what a project is, how it works, and how to use it.
24+
It is usually the first thing CYF students read in a repository.
25+
</p>
26+
<a
27+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
28+
more</a>
29+
</article>
4430

45-
<article>
46-
<img src="placeholder.svg" alt="" />
47-
<h2>What is a Git branch?</h2>
48-
<p>
49-
A Git branch lets you work on new changes safely without changing the main
50-
project. You can make updates, and only add them to the main code when they
51-
are ready.
52-
</p>
53-
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
54-
</a>
55-
</article>
56-
</section>
57-
</main>
31+
<article>
32+
<img src="placeholder.svg" alt="" />
33+
<h2>What is a wireframe?</h2>
34+
<p>
35+
A wireframe is a simple visual layout that shows the structure of a webpage
36+
before any design or styling is added.
37+
</p>
38+
<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/">Read more</a>
39+
</article>
5840

59-
<footer>
60-
<p>Footer</p>
61-
</footer>
62-
</body>
63-
</html>
41+
<article>
42+
<img src="placeholder.svg" alt="" />
43+
<h2>What is a Git branch?</h2>
44+
<p>
45+
A Git branch lets you work on new changes safely without changing the main
46+
project. You can make updates, and only add them to the main code when they
47+
are ready.
48+
</p>
49+
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
50+
</article>
51+
</section>
52+
</main>
53+
54+
<footer>
55+
<p>Footer</p>
56+
</footer>
57+
</body>
58+
59+
</html>

‎Wireframe/style.css‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,16 @@ header {
1616

1717
.articles {
1818
display: grid;
19-
grid-template-columns: 1fr;
19+
grid-template-columns: 1fr 1fr;
2020
gap: 20px;
2121
padding: 20px;
2222
}
2323

24+
/* First article spans full width */
25+
.articles article:first-child {
26+
grid-column: 1 / -1;
27+
}
28+
2429
article {
2530
border: 1px solid #ccc;
2631
padding: 15px;
@@ -31,6 +36,14 @@ article img {
3136
height: auto;
3237
}
3338

39+
/* Border around links */
40+
article a {
41+
display: inline-block;
42+
border: 1px solid #ccc;
43+
padding: 6px 10px;
44+
text-decoration: none;
45+
}
46+
3447
footer {
3548
position: fixed;
3649
bottom: 0;
@@ -39,4 +52,4 @@ footer {
3952
border-top: 1px solid #ccc;
4053
background-color: #fff;
4154
padding: 10px;
42-
}
55+
}

0 commit comments

Comments
 (0)