<form id="get-in-contact" action="http://localhost:3000/#contents" method="get" name="contact-form" target="_self">
												<fieldset>
													<legend>message me:</legend>
													<label for="name">name: </label>
													<input type="text" name="name" required><br>
											
													<label for="email">email: </label>
													<input type="email" name="email" required><br>
											
													<label for="subject">subject: </label>
													<input type="text" name="subject" required><br>
											
													<label for="comment">comment: </label>
													<textarea rows="1" cols="20" name="comment" required dirname="comment.dir" placeholder="Add comment here..."></textarea><br>
													<input type="submit" value="send">
												</fieldset>
											</form>
											<br>
											<label for="second-comment">second comment: </label>
											<textarea rows="1" cols="20" name="second-comment" form="get-in-contact" placeholder="Enter text here..."></textarea>
										
									
								

									
																					<table>
												<caption>table 2x2</caption>
												<thead>
													<tr>
														<th>Title 1</th>
														<th>Title 2</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>c1 r1</td>
														<td>c2 r2</td>
													</tr>
													<tr>
														<td>c1 r2</td>
														<td>c1 r2</td>
													</tr>
												</tbody>
											</table>
										
									
								

									
																					<table>
												<caption>table - colspan</caption>
												<thead>
													<tr>
														<th>Title 1</th>
														<th>Title 2</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>c1 r1</td>
														<td>c2 r2</td>
													</tr>
													<tr>
														<td>c1 r2</td>
														<td>c1 r2</td>
													</tr>
													<tr>
														<td colspan="2">c1 r3</td>
													</tr>
												</tbody>
											</table>
										
									
								

									
																					<table>
												<caption>table - rowspan</caption>
												<thead>
													<tr>
														<th>Title 1</th>
														<th>Title 2</th>
														<th>Title 3</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>c1 r1</td>
														<td>c2 r2</td>
														<td rowspan="2">c3 r1</td>
													</tr>
													<tr>
														<td>c1 r2</td>
														<td>c1 r2</td>
													</tr>
												</tbody>
											</table>
										
									
								

									
																					<iframe title="open maps view" width="300" height="300"
												src="https://www.openstreetmap.org/export/embed.html?bbox=26.10...">
											</iframe><br>
											<small>
													<a href="https://www.openstreetmap.org/?mlat=44.43926&mlon=26.10926#map=19/44.43926/26.10926">View Larger Map</a>
											</small><br>
											<iframe src="https://www.w3schools.com">
												<p>I can't display this!</p>
											</iframe>
										
									
								

SVG as image

									
																					<svg width="100" height="100">
												<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
											</svg>
											<p>SVG as image</p>
											<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon_62532.svg"><br>
										
									
								

									
																					<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
												Your browser does not support the HTML5 canvas tag.
											</canvas>
											<script>
												const c = window.document.querySelector("#myCanvas");
												const ctx = c.getContext("2d");
												// Create gradient
												const grd = ctx.createLinearGradient(0, 0, 200, 0);
												grd.addColorStop(0, "red");
												grd.addColorStop(1, "white");
												// Fill with gradient
												ctx.fillStyle = grd;
												ctx.fillRect(10, 10, 150, 80);
											</script>
										
									
								

• How to git - basics (with github)
• CSS - Introduction
• Homework

									
																					☐ have the entire homework on codepen (create an account there too)
											☐ contact page - add these fields (mandatory):
												☐ sex (use radio buttons): three values: male, female, unspecified
												☐ eye color (drop-down): amber, blue, brown, gray, green
												☐ stats (checkboxes) with: over 1.5m height, over 80 kg,
												☐ add a date input

											☐ make github account (optional)
												☐ install or check to see if you have git instaled inside WSL (git --version to check)
												☐ create a public repo on github named: "web-training"
												☐ link your account using ssh keys