Skip to content

Commit a09650e

Browse files
d-odumosud-odumosu
committed
feat: added styling to links and aria-label for accessibility.
1 parent 647f7d0 commit a09650e

4 files changed

Lines changed: 20 additions & 28 deletions

File tree

‎Wireframe/README.md‎

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

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

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
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
10+
- [x ] 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
1313
<!--{{</objectives>}}>-->
1414

1515
## Task

‎Wireframe/branches.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
56
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<meta name="description" content="A blog about, wireframes, git branching and readme files"/>
68
<title>Wireframe</title>
79
<link rel="stylesheet" href="style.css"/>
810
</head>

‎Wireframe/index.html‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
56
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<meta name="description" content="A blog about, wireframes, git branching and readme files"/>
68
<title>Wireframe</title>
79
<link rel="stylesheet" href="style.css"/>
810
</head>
@@ -18,49 +20,42 @@ <h1 class="site-title">The Blog</h1>
1820
<p class="site-tagline">A blog on learning programming</p>
1921
</div>
2022

21-
<nav class="main-navigation">
22-
<ul class="nav-list">
23-
<li class="nav-item">
24-
<a class="nav-link" href="index.html">Home</a>
25-
</li>
26-
</ul>
27-
</nav>
28-
2923
</div>
3024

3125
</header>
3226

33-
3427
<div class="container">
3528
<main>
3629
<article class="article-feature">
37-
<img src="./images/md.png" alt="README example">
30+
<img src="./images/md.png" alt="illustration of a readme.md file">
3831
<h2>What is the purpose of a README file</h2>
3932
<p>
4033
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
4134
voluptates. Quisquam, voluptates.
4235
</p>
43-
<a href="#">Read more</a>
36+
<a class="article-read-more" href="readme.html"
37+
aria-label="read more about what the purpose of a read me file does">Read more</a>
4438
</article>
4539

4640
<article class="article-sec">
47-
<img src="./images/wireframes-01.png.webp" alt="">
41+
<img src="./images/wireframes-01.png.webp" alt="illustration of a man showing a wireframe">
4842
<h2>What is the purpose of a wireframe</h2>
4943
<p>
5044
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
5145
voluptates. Quisquam, voluptates.
5246
</p>
53-
<a href="#">Read more</a>
47+
<a class="article-read-more" href="wireframe.html" aria-label="read more about the purpose of a wireframe">Read
48+
more</a>
5449
</article>
5550

5651
<article class="article-sec">
57-
<img src="./images/branch.webp" alt="">
52+
<img src="./images/branch.webp" alt="illustration of a git tree branching out">
5853
<h2>What is a branch in Git?</h2>
5954
<p>
6055
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
6156
voluptates. Quisquam, voluptates.
6257
</p>
63-
<a href="#">Read more</a>
58+
<a class="article-read-more" href="branches.html" aria-label="read more about branches on git">Read more</a>
6459
</article>
6560

6661
</main>
@@ -72,13 +67,6 @@ <h2>What is a branch in Git?</h2>
7267

7368
<p>&copy; 2026 The Blog. All rights reserved.</p>
7469

75-
<nav class="footer-nav">
76-
<a href="index.html">Home</a>
77-
<a href="readme.html">README</a>
78-
<a href="wireframe.html">Wireframes</a>
79-
<a href="branches.html">Git Branches</a>
80-
</nav>
81-
8270
</div>
8371

8472
</footer>

‎Wireframe/wireframe.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
56
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<meta name="description" content="A blog about, wireframes, git branching and readme files"/>
68
<title>Wireframe</title>
79
<link rel="stylesheet" href="style.css"/>
810
</head>

0 commit comments

Comments
 (0)