-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlabs.html
226 lines (200 loc) · 8.05 KB
/
labs.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Labs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
</style>
</head>
<body >
<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title" style="text-align: center;">Where would you like to go?</h1>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<a href="index.html" class="active" style="text-decoration: none; color: ghostwhite;"><h2>Home</h2></a>
<a href="ExtraProjects.html" style="text-decoration: none; color: ghostwhite;"><h2>Projects</h2></a>
<a href="review.html" style="text-decoration: none; color: ghostwhite;"><h2>Review</h2></a>
<a href="labs.html" style="text-decoration: none; color: ghostwhite;"><h2>Lab</h2></a>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<div class="container-fluid mt-3">
<button class="btn text-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo"><h2> ☰ Menu</h2>
</button>
</div>
</div>
</nav>
<br>
<div style="text-align: center;">
<h1 >Labs</h1>
<h3>
Here are the Labs that were completed over the time period. This is when we learn and explored HTML.
</h3>
</div>
<br>
<!-- <div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ExtraProjects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="labs.html">Labs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="review.html">Review</a>
</li>
</ul>
</div>
</nav>
</div> -->
<div>
<div id="accordion">
<!--Collapsable One-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseOne">
Lab 1 - Introduction to HTML
</a>
</div>
<div id="collapseOne" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
In this project we created our first website. We were taught the heading tags, the html tag, head tag, body tag, title tag and what they do. I was told to create a heading and write a paragragph. I was to write about myself and why I join the Web and App Development Program.
<br>
<br>
<a href="https://lab-1-intro-to-html-jauneldeans.wdp7-8.repl.co/" target="_blank">Intro To HTML</a>
<br>
<br>
Below is the code for used to create the card.
</div>
</div>
</div>
<!--Collapsable Two-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseTwo">
Lab 2 - Images
</a>
</div>
<div id="collapseTwo" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
In this Project we were taught how to embed an image into a website and how to center the text in the webpage. We learn how to italicize and bold text using HTML Tags, b and i. We were also exposed to the attributes width and height. We used the same paragraph from Lab 1 and inputed images of ourselves and our favorite animals.
<br>
<br>
<a href="https://lab-2-images-jauneldeans.wdp7-8.repl.co/" target="_blank">Images</a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
<!--Collapsable Three-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseThree">
Lab 3 - Hyperlinks
</a>
</div>
<div id="collapseThree" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
In Lab 3, we learnt how to create hyperlinks. The link can be access through words and images. So we linked websites given to image and the name of the site.
<br>
<br>
<a href="https://lab-3-hyperlinks-jauneldeans.wdp7-8.repl.co/" target="_blank">HyperLinks</a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
<!--Collapsable Four-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseFour">
Lab 4 - Table and Colors
</a>
</div>
<div id="collapseFour" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
In Lab 4, we were introduced to the table tags: th, td, tr and table. We were also taught about inline css using the attribute style and the property background color. This was an introduction to rgb values. We had to create a table with different colors.
<br>
<br>
<a href="https://lab-4-table-and-colors-jauneldeans.wdp7-8.repl.co/" target="_blank">Tables and Colors</a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
<!--Collapsable Five-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseFive">
Lab 5 - Lists Inside Tables
</a>
</div>
<div id="collapseFive" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
Lab 5 taught us how to create unordered (Bullet Points) and ordered (Numbered) lists. We explored the table header and footer tags.
<br>
<br>
<a href="https://lab-5-lists-inside-tables-jauneldeans.wdp7-8.repl.co/" target="_blank">List</a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
<!--Collapsable Six-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseSix">
Lab 6 - Favicon and Banner
</a>
</div>
<div id="collapseSix" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
Lab 6 was mostly an art project. We were to create a pixel image to become the logo for our wesite and input it in the head tag using the link tag. Also we created a banner for own website.
<br>
<br>
<a href="https://lab-6-favicon-and-styling-your-page-jauneldeans.wdp7-8.repl.co/" target="_blank">Favicon and Banner</a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
<!--Collapsable Seven-->
<div class="card ">
<div class="card-header">
<a class="collapsed btn bg-warning" data-bs-toggle="collapse" href="#collapseSeven">
Lab 7 - Homepage
</a>
</div>
<div id="collapseSeven" class="collapse bg-warning" data-bs-parent="#accordion">
<div class="card-body">
In Lab 7, we created a website. We have a group website, named Mushroom Squad and the group page, is the home page. Here we will have a banner, a heading with our name, a picture of the group members, and a paragraph introducing the group member. On the home page, there will be something that will give the viewer access to our pages, which introduces the pairing members more in-depth. The individual pages will tell the viewer about our journey as web developers.
<br>
<br>
<a href="https://lab-7-lab-homepage-wdp7-8-5.wdp7-8.repl.co/" target="_blank"> Homepage </a>
<br>
<br>
Below is the code used to make the project:
</div>
</div>
</div>
</div>
</div>
</body>
</html>