Checkpoint:
- If you haven't installed Visual Studio Code please install it now.
- You can also perform this exercise here.
Automatic code formatting is available in Visual Studio Code through the following shortcuts:
- On Windows: Shift + Alt + F
- On Mac: Shift + Option + F
- On Ubuntu: Ctrl + Shift + I
Let's Start coding!
Please fix this very ugly code!
Create a new file called indentation.html in Visual Studio Code and copy and paste the code below, from there you will beautify the code by adding proper identation:
<!DOCTYPE html>
<html>
<head>
<title>
Basic I
</title>
</head>
<body>
<h1>
What language do you love?
</h1>
<p>
I love HTML!
</p>
</body>
</html>Please note that most of the tags in the code below have not been discussed yet. But at this point, you already know what opening and closing tags look like. Without knowing the HTML tags, determine what the parents, children, and siblings are by properly indenting the code below:
<!DOCTYPE html>
<html>
<head>
<title>
Basic II
</title>
</head>
<body>
<table>
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Password</th></tr>
</thead>
<tbody>
<tr>
<td>
Brendan
</td>
<td>
Stanton
</td>
<td>
[email protected]
</td><td> FakePassword123 </td></tr>
</tbody>
</table>
<h1>Here is a list of my favorite things:</h1>
<ul><li>Food</li>
<li>Bandwidth</li>
<li>Coffee</li>
<li>Beach
</li>
</ul>
</body>
</html>