MyPortfolio/instructionaldesign.html at main · NereidaRondon/MyPortfolio · GitHub

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
<!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">
    <meta name="author" content="Nereida Rondon">
    <meta name="description" content="Projects by Nereida Rondon Frontend Developer Portfolio">

    <title>Instructional Design</title>

		<link rel="icon" type="image" href="/images/My logo.svg">
	  <link rel="stylesheet" href="source/styles.css">
	  <link rel="stylesheet" href="source/projects.css">

<!-- Font Awesome Icons -->
	<link href="/fontAwesome/css/all.css" rel="stylesheet">

	<!--Googlefont info-->
	<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=Barlow+Condensed&family=Zilla+Slab&display=swap" rel="stylesheet">

<body class="courses-bg">

	<!-----------------HEADER--------------------->
	<header class="banner-container" role="banner">

    <div class="item1">
			<a class= "home-link" href="index.html"><img class="signature" src="images/My logo.svg" width="75" alt="Nereida Rondon Home link"></a>
		</div>

		<div class="item2"></div>

		<div class="item3">
			<ul>
				<li><a class='icon-link' href="mailto:Nereida.Rondon5@gmail.com" aria-label="Email icon"><abbr title="Email"><i role="img" class="fa-regular fa-envelope fa-beat"></i></abbr></a></li>

				<li><a class='icon-link' href="https://www.linkedin.com/in/nereida-rondon-65403a22b/" aria-label="Linked In icon" target="_blank"><abbr title="Linked in" ><i role="img" class="fa-brands fa-linkedin-in fa-beat"></i></abbr></a></li>

				<li><a class='icon-link' href="https://github.com/NereidaRondon" aria-label="Github icon" target="_blank"><abbr title="Github"><i role="img" class="fa-brands fa-github fa-beat"></i></abbr></a></li>
   	  </ul>
		</div>
	</header>
	<!----------------COLORFUL BAR------------------>
	<div class="banner-div"></div>
	<!-----------------NAV MENU-------------------->
		<nav role="navigation">
			<ul>
				<a class="disabeled" aria-disabled="true" href="index.html"><li>Home</li></a>
				<a class='link' href="projects.html"><li>Projects</li></a>
				<a class='link' href="about.html"><li>About</li></a>
				<a class='link' href="contact.html"><li>Contact</li></a>
			</ul>
		</nav>
	<br>

		<!----------Adobe Captivate--------------->
	  <h1 class="course-title">Adobe Captivate Courses</h1>
		<div class="course-list-div">
			<ul class="course-list">
				<li><strong class="topics">Tools:</strong> Adobe Captivate and GitHub </li>
				<li><strong class="topics">Skills: </strong>Research, storyboarding, technical writing, and graphic design</li>
			</ul>
		</div>
		<div class="id-container">
			<div class="id-box course">
					<iframe class="frame" src="https://nereidarondon.github.io/Sam-Model/" style="border:1px #060b36 solid;" name="Sam-Model Course"  frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="400px" allowfullscreen></iframe>

					<div class="view"><a href="https://nereidarondon.github.io/Sam-Model/">View Course</a></div>
			</div>
		</div>

		    <!------------------------------------------------------->
    <h1 class="course-title">Articulate 360 Courses</h1>
		<div class="course-list-div">
			<ul class="course-list">
				<li><strong class="topics">Tools:</strong> Articualte StoryLine, Canva, and GitHub </li>
				<li><strong class="topics">Skills: </strong>Research, storyboarding, technical writing, and graphic design</li>
			</ul>
		</div>


  <div class="id-container">
		<div class="id-box course">
            <iframe class="frame" src="https://nereidarondon.github.io/ADDIE/" name="Adult Learning"  style="border:1px #060b36 solid;" frameborder="1" height="400px" width="400px"></iframe>

            <div class="view"><a href="https://nereidarondon.github.io/ADDIE/">View Course</a>
			</div>
		</div>

		<div class="id-box course">
            <iframe class="frame" src="https://nereidarondon.github.io/Adult-Learning-Theory/" style="border:1px #060b36 solid;" name="Adult Learning"  frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="400px" allowfullscreen></iframe>

            <div class="view"><a href="https://nereidarondon.github.io/Adult-Learning-Theory/">View Course</a></div>
		</div>

		<div class="id-box course">
          	<iframe class="frame" src="https://nereidarondon.github.io/Parallel-Lines/" style="border:1px #060b36 solid;" name="Parallel Lines Activity"  height="400px" width="400px"></iframe>

            <div class="view"><a href="https://nereidarondon.github.io/Parallel-Lines/">View Course</a></div>
		</div>

		<div class="id-box course">
            <iframe class="frame" src="https://nereidarondon.github.io/Phishing/" style="border:1px #060b36 solid;" name="Phishing Corporate Training"  frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="400px" allowfullscreen></iframe>

            <div class="view"><a href="https://nereidarondon.github.io/Phishing/">View Course</a></div>
		</div>

		<div class="id-box course">
            <iframe class="frame" src="https://nereidarondon.github.io/360InteractiveMap/" style="border:1px #060b36 solid;" name="360 degree Interactive Map"  frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="400px" allowfullscreen></iframe>

            <div class="view"><a href="https://nereidarondon.github.io/360InteractiveMap/">View Interactive Map</a></div>
		</div>
	</div>

	<!-------------------VIDEOS--------------------->

	<h1 class="course-title">Video Tutorials</h1>
	<section class="video-section">

		<div class="video-container">
			<iframe class="video" width="450" height="300" src="https://www.youtube.com/embed/aBe0dyqJVPw" title="YouTube video player" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

			<div class="video-info">
				<ul class="info">
					<li><b class="topics">Topic:</b> Screencast showing how to create sign in to GitHub on VS code with an access token and with the browser. Shows how to generate an access token in GitHub. </li>
					<li><b class="topics">Tools:</b>  Camtasia, Canva, VS Code, GitHub and YouTube</li>
					<br>
					<br>
					<li><b class="topics">Skills: </b>Video and audio editing, and graphic design</li>
				</ul>
				<div class="view guide"><a href="/doc files/Zoom.pdf" target="_blank">Technical Guide</a></div>
			</div>
		</div>

		<div class="video-container">
			<iframe class="video" width="450" height="300" src="https://www.youtube.com/embed/wA9rmMTNssA" title="YouTube video player" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

				<div class="video-info">
					<ul class="info">

						<li><strong class="topics">Topic:</strong> Screencast showing how to create a recurring Zoom meeting.</li>
						<li><strong class="topics">Tools:</strong>  Snagit, Canva, Zoom, and YouTube</li>
						<li><strong class="topics">Skills: </strong>Video editing, technical writing, and graphic design</li>

					</ul>
					<div class="view guide"><a href="/doc files/Zoom.pdf" target="_blank">Technical Guide</a></div>
				</div>
    </div>

		<div class="video-container">
			<div class="video-container">
				<iframe class="video" src="https://youtube.com/embed/-HlqCOQSOS4" frameborder="1" height="300px" width="450px"></iframe>
					<div class="video-info">
						<ul class="info">
							<li><b class="topics">Topic:</b> Screencast showing how to create a repo and push files to GitHub.</li>
							<br>
							<li><b class="topics">Tools:</b>  Camtasia, Canva, VS Code, GitHub and YouTube</li>
							<li><b class="topics">Skills: </b>Video editing, audio editing, and graphic design</li>
						</ul>
					</div>
			</div>
		</div>

	</section>


	<!-------------------GRAPHICS--------------------->
	<h1 class="course-title">Infographics</h1>

		<div class="course-list-div">
			<ul class="course-list">
				<li><b class="topics">Tools:</b> Canva </li>
				<li><b class="topics">Skills: </b>Research, technical writing, and graphic design</li>
			</ul>
		</div>


    <div class="id-container">

			<div class="graphic-div">
				<embed class="graphic" src="images/Blooms.png" height="1000px" width="400px"/>
				<br><a href="images/Blooms.png" target="_blank">View</a>
			</div>
			<div class="graphic-div">
				<embed class="graphic" src="images/ADDIEModel.png" height="1000px" width="400px"/>
				<br><a href="images/ADDIEModel.png" target="_blank">View</a>
			</div>
		</div>
		<br>
		<br>

	<!--------------------------------------->
		<div class="footer-div">
			<a href="#top" class="scrolly"><button><img class="to-top" src="./images/angles-up-solid.svg" alt="back to top" width="20"></button></a>
			<div class="footer">
				<footer>Created by Nereida Rondon ©️2022</footer>
			</div>
		</div>
	<!----------------------------------------->
</body>
</html>