-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday3.html
41 lines (41 loc) · 2.07 KB
/
day3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Silkscreen&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles3.css">
<title>30DAYSOFCODE</title>
</head>
<body>
<nav>
<h1 class="navLogo">30DAYSOFCODE</h1>
<ul class="navItems">
<a href="index.html"><li><<</li></a>
<a id="toPrevious"><li><</li></a>
<a id="toNext"><li>></li></a>
<a href="day30.html"><li>>></li></a>
</ul>
</nav>
<section class="container">
<h2>Day <span id="pageIdentify">3</span></h2>
<p>Today is day three. I'm realizing that I'd like to take a different approach for the navigation for this project. I originally liked having all thirty buttons, one for each day, present on the page at all times, but after thinking through other UX decisions, most pages wouldn't be structured that way. For example, if going through thirty pages of products on Amazon, you would have an "Advance One" type button, and a "Skip to End" type button.
</p><p>
When I think through the user intent on this site, it's going to be primarily to see two things:</p>
<ol>
<li>To see changes day by day</li>
<li>To see the beginning product (Day 1) and the end product (Day 30)</li>
</ol>
<p>With that being said, I'm going to work on changing the navigation buttons to an advance one, and advance to end, style.
</p>
<p>
I also want to take a second pass on the dark mode selector, and see if I can make that more obvious to the user, and better looking in general.
</p>
</section>
<button class="darkModeButton" onclick="darkModeSwitch()">☽</button>
</body>
<script src="script.js"></script>
</html>