-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmodule3.html
165 lines (118 loc) · 6.12 KB
/
module3.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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 3</h3>
<hr style="width:50%">
<p>For this module, we have looked at the CSS layout properties,
specifically the flexbox layouts and grids!</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>Flexbox Basic Layout Samples</h3>
<p>These are basic layout samples that I did using flexbox. Not only it
makes the page look good, its a good way to improve the sites
responsive design in order for it to work successfully on users
device.</p>
<a class="button" href="http://practice.robinsonsdesigns.com/apps/cattymusic/">Open to view
the Cat Music App.</a> <a class="button" href="http://practice.robinsonsdesigns.com/apps/flexbox/">Open to
view the
Sample of Flexbox.</a>
<h3>Reflection</h3>
<hr style="width:50%">
<p>What I found easy? Once you get the overall basics down with
Flexbox, its pretty easy to figure out. The properties may seem
intimidating at times but they are simple once you figure out how to
make them all actually work. The only trouble I had was remembering to
size the flex area. The boxes that separate the flexing elements. It
was fun once I figure everything out. Just took too much time.</p>
</section>
<section class="grid-item item2">
<h3>Conversions</h3>
<hr style="width:50%">
<a class="button" href="http://practice.robinsonsdesigns.com/lp3part3/grid.html">Grid
Layout</a> <a class="button" href="http://practice.robinsonsdesigns.com/lp3part3/flex.html">Flexbox
Layout</a>
<p>Our objective was to convert a basic CSS design to a grid and
flexbox layout. The results are above. The layouts that are on the
bottom are the normal links that don't have either flexbox or grid
associated with them.</p>
<a class="button" href="http://practice.robinsonsdesigns.com/lp1part1/practice1.html">Basic
Layout without Grid</a> <a class="button"
href="http://practice.robinsonsdesigns.com/lp3part3/flex.html">Flexbox
Layout before being converted to Grid</a>
<h3>Reflection</h3>
<hr style="width:50%">
<p>Concerting flex to grid and grid to flex was harder than I realized
it. Why? Because you aren't just trying to keep everything tiding and
correct, you are also working with the responsiveness of the layout in
order to make it look like it never changed. A website may look like it
has grid but it may just have flexible boxes instead. Sometimes you may
even find yourself having to combine grid and flexbox together in order
to make everything work out. There's no shame for doing that!</p>
</section>
<section class="grid-item item2">
<h3>Five Grid Layout Projects</h3>
<hr style="width:50%">
<a class="button" href="http://practice.robinsonsdesigns.com/debugging/grid-layout/project1.html">Grid
Layout Project 1</a> <a class="button"
href="http://practice.robinsonsdesigns.com/debugging/grid-layout/project2.html">
Grid Layout Project 2</a> <a class="button"
href="http://practice.robinsonsdesigns.com/debugging/grid-layout/project3.html">
Grid Layout Project 3</a> <a class="button"
href="http://practice.robinsonsdesigns.com/debugging/grid-layout/project4.html">
Grid Layout Project 4</a> <a class="button"
href="http://practice.robinsonsdesigns.com/debugging/grid-layout/project5.html">
Grid Layout Project 5</a>
<p>In this part, we had to work with the CSS Layout property: Grid. Our
objective is to learn exactly how to use the grid layout to become
responsive.</p>
<h3>Reflection</h3>
<hr style="width:50%">
<p>Okay, despite it being in the debugging folder of the site, it was
sort of both learning and debugging along the way. Regardless of what
name they are under, I still learned all about grids and how they
differ between flexbox. For example, grid layouts are used to make
webpages without having to use floats or other positioning elements.
Flexbox is a one dimensional layout and is able to be used with all
kinds of devices and screen sizes.</p>
<h3>Final Reflection</h3>
<hr style="width:50%">
<p>Flexbox and Grid CSS layouts were challenging and fun at the same
time. They really sound easy to do when you get a chance to work with
them and only them. Focusing on those two layout properties and no
other properties was the easiest. You learn easier that way and that
what made me more comfortable with these two. Its not about the
projects that got me the most, its the results that inspire me to grow
in what challenges me the most and what I need to improve on.</p>
</section>
</article>
</main>
<footer>
Thanks for visiting my site!
</footer>
</body>
</html>