-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmodule4.html
94 lines (68 loc) · 3.39 KB
/
module4.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<title>Robinson's Showcase Site</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
<script src="buttons.js">
</script>
</head>
<body>
<span onclick="openNav()" style="font-size:30px;cursor:pointer;float: right; padding: 10px;">☰</span>
<!-- Header -->
<header>
<h1>Danielle Robinson's Showcase Site</h1>
<h3>Module 4</h3>
<hr style="width:50%">
<p>In this learning plan we discover how media queries work in order to have responsive design. In other words, what
size of devices do you have to work with in order for the website to work correctly?</p>
</header>
<!-- Navigation Bar -->
<nav class="sidenav" id="mySidenav">
<a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="module1.html">Module 1</a>
<a href="module2.html">Module 2</a>
<a href="module3.html">Module 3</a>
<a href="module4.html">Module 4</a>
</nav>
<main>
<br>
<br>
<!-- Module 1 Content -->
<article class="grid-container">
<section class="grid-item item1">
<h3>Responsive Website Design</h3>
<p>Responsive design has three general catagories that needs to be addressed: Mobile Phone, Tablet, and
Computer. These three are critical for responsive design.</p>
<a class="button" href="https://practice.robinsonsdesigns.com/m4/m4index.html">Open to view the responsive
buffalo!</a>
<h3>Reflection</h3>
<hr style="width:50%">
<p>The big three are mobile phone, tablet, and computer for responsive design. They are critical to learn and a
must for any websites today. You wouldn't want a website to be unworkable on desktop when its 100% functional
on a mobile device? That makes me think of Snapchat trying to become a computer and tablet webapp when it
fails to have a responsive design even on tablet.</p>
</section>
<section class="grid-container item2">
<h3>Final Reflection</h3>
<hr style="width:50%">
<p style="text-indent: 5%;">Mobile Devices, Tablets, and Computers are becoming a must have for todays tech world. In order to make sure
that people are getting the best user experience, it is critical to understand the importance of responsive
website design. I had a wonderful time implementing ways on how to make a design work on the smallest screen,
a smartwatch. I have friends with smartwatches and would like to give them a few more options on where to
check out my website at.</p>
<p>They won't be left out anytime soon, since smartwatches are becoming more
user-friendly and can support more software than ever before. I personally don't have one, but responsive
design making efforts to include the smartwatch is what gets developers excited for the upcoming years. This
module was challenging starting out but learning how responsive design is almost as important as
accessibility, the hard work is never done, I learned that.</p>
</section>
</article>
</main>
<footer>
Thanks for visiting my site!
</footer>
</body>
</html>