-
Notifications
You must be signed in to change notification settings - Fork 0
/
education.html
244 lines (219 loc) · 9.62 KB
/
education.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- FontAwesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Education - Nikki Peel</title>
</head>
<body>
<!-- Mobile Nav -->
<nav class="navbar sticky-top d-lg-none navbar-dark bg-dark">
<div class="navbar-brand d-flex-column">Nikki Peel</div>
<button
class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span id="icon" class="navbar-toggler-icon fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarText">
<ul class="navbar-nav mx-auto mb-4">
<li class="nav-item">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="education.html"
>Education<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="works.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<img src="img/selfie.jpg" alt="" />
<h1 class="pt-4">Nikki Peel</h1>
<p>Front End Developer</p>
<p id="resume-mobile">
<a href="nikkipeel.pdf"><i class="fas fa-download"></i> Download Resume</a>
</p>
<ul class="nav row p-0 mt-4" id="social-mobile">
<li class="col-sm-6 nav-item">
<a class="nav-link" href="mailto:nikkipeel.dev@gmail.com"
><i class="fas fa-envelope"></i> Email Me
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/nikkipeel"
><i class="fab fa-linkedin"></i> LinkedIn
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.github.com/nikkipeel"
><i class="fab fa-github"></i> Github
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.codepen.io/nikki-peel"
><i class="fab fa-codepen"></i> Codepen
</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-lg-3 d-none d-lg-block p-0 sidebar text-white">
<div class="sidebar-sticky">
<div class="nav-header text-center">
<img id="sidebar-img" src="img/selfie.jpg" alt="" />
<h1>Nikki Peel</h1>
<p>Front End Developer</p>
<p id="resume">
<a href="nikkipeel.pdf"><i class="fas fa-download"></i> Download Resume</a>
</p>
</div>
<ul class="nav flex-column mx-auto pb-4 text-center">
<li class="nav-item">
<a class="nav-link" href="index.html">About </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="education.html">Education </a>
</li>
<li class="nav-item">
<a class="nav-link" href="works.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
<p class="text-center p-4">Thank you for visiting my portfolio!</p>
<ul class="nav" id="social">
<li class="nav-item">
<a class="nav-link" href="mailto:nikkipeel.dev@gmail.com"
><i class="fas fa-envelope"></i> Email Me
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/nikkipeel"
><i class="fab fa-linkedin"></i> LinkedIn
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.github.com/nikkipeel"
><i class="fab fa-github"></i> Github
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.codepen.io/nikki-peel"
><i class="fab fa-codepen"></i> Codepen
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-8 m-auto p-4" id="education">
<div>
<h1 class="mt-4 mx-4 text-right">Education</h1>
<p class="mx-4 pb-4 text-right">
I have a passion for education and have utilized great programs online such as Udemy, FreeCodeCamp, Codecademy, and Udacity to learn web development. I've completed several bootcamps and have earned certifications for Responsive Design, Front End Frameworks, and ReactJS. I'm currently studying WCAG (Web Content Accessibility Guidelines) and testing methodologies to ensure my projects are compliant and built using inclusive design.
Prior to my journey into web development, I studied Graphic Communications and Business at Baker College. The courses I engaged in focused on the use of graphic design in marketing and campaigns, business communication, and advertising.
</p>
<div class="row text-left mb-4">
<div class="card col-lg border-gradient m-2">
<div class="card-body">
<h5 class="card-title">Deque University</h5>
<h6 class="card-subtitle mb-2 text-muted">Web Accessibility</h6>
<em>Jun 2020 - Present</em>
<p class="card-text pt-2">
Curriculum features inclusive design concepts, legal requirements, and WCAG (Web Content Accessibility Guidelines) to earn Web Accessibility Specialist certification.
</p>
</div>
</div>
<div class="card col-lg border-gradient m-2">
<div class="card-body">
<h5 class="card-title">Udemy, FreeCodeCamp, Codecademy</h5>
<h6 class="card-subtitle mb-2 text-muted">Web Development, Programming</h6>
<em>Sept 2016 - Present</em>
<p class="card-text pt-2">
Engaged in several courses from these programs including Web Development, Front End Frameworks, Advanced CSS and Sass, Javascript, jQuery, React, NodeJS, and more.
</p>
</div>
</div>
<div class="card col-lg border-gradient m-2">
<div class="card-body">
<h5 class="card-title">Baker College</h5>
<h6 class="card-subtitle mb-2 text-muted">Graphic Communications, Marketing</h6>
<em>Jan 2007 - Mar 2008</em>
<p class="card-text pt-2">
Completed courses in Business, Marketing, Advertising, Communications, and Graphic Design
</p>
</div>
</div>
</div>
<p class="m-4 text-center">Check out some of my recent certifications: </p>
<div id="certs" class="row d-flex mt-4 mb-4 text-center">
<div class="col p-2">
<img src="https://i.imgur.com/9jJ3l8r.jpg" alt="">
</div>
<div class="col p-2">
<img src="https://i.imgur.com/04Mqx2E.jpg" alt="">
</div>
<div class="col p-2"><img src="https://i.imgur.com/RS0DkPr.jpg" alt=""></div>
<div class="col p-2"><img src="https://i.imgur.com/0ZTlfG1.jpg" alt=""></div>
<div class="col p-2"><img src="https://i.imgur.com/HgQLKWJ.png" alt=""></div>
<div class="col p-2"><img src="https://i.imgur.com/KZkSiwu.png" alt=""></div>
</div>
<a href="#education" class="text-center d-lg-none" id="to-top"
><i class="fa fa-arrow-up" aria-hidden="true"></i> Back To Top</a
>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
<script>
let icon = document.getElementById('icon');
icon.addEventListener('click', function(){
icon.classList.toggle('fa-times');
icon.classList.toggle('fa-bars');
});
</script>
</body>
</html>