In: Computer Science
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems amazing, but it never did what it should do – make my website look better. Also, my page should have a blue theme that was provided in the CSS folder. This also didn’t work. My website is supposed to look like what is shown in Figure 1 (see below). Someone told me that there are exactly 10 errors on index.html, 10 errors on contact.html, and 10 errors on events.html. Yes, 30 errors total! Can you help me find all of the errors? Hint: You should not add ANY LINES to the code. There will never be more than one error per line number.
events.html ( HELP FIND the 10 ERRORS IN THIS CODE )
<!doctype html>
<html>
<head>
<title>Try Boro Kids Race Series</title>
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark
bg-danger">
<a class="navbar-brand" href="#">
<img src="" width="auto" height="30" alt="Running Man
Logo">
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="events.html">Placeholder Text
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Placeholder
Text</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"
href="http://www.tryborokidstri.org/" target="_blank">Try
Boro</a></li>
<li class="nav-item"><a class="nav-link"
href="https://www.facebook. com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png"
class="iconsocial" alt="Facebook" width="auto"
height="30"></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-1"><h2>Try Boro Events</h2>
</div>
</div>
<div class="rows">
<div class="col-md-6">
<img src="images/Tri_Left_KidBikeBlur.jpg" class="img-fluid
rounded-circle" alt="Placeholder image">
<h3>Biking is a blur </h3>
<p>Triathlete rushing to get started in the transition. Kids
get the whole experience of swimming, biking, and
running.</p>
</div>
<div class="col-md-6">
<img src="images/Tri_Mid_TransDrink.jpg" class="img-fluid
rounded-circle" alt="Placeholder image">
<h3>A triathlon can be exhausting</h3>
<p>When returning to transition, this participant gets some
much deserved water before hitting the run.</p>
</div>
<div class="col-md-6">
<img src="images/Tri_Right_trans.jpg" class="img-fluid
rounded-circle" alt="Placeholder image">
<h3>Time to get changed </h3>
<p>It not easy to get out of the pool, run down to
transition, and get ready for the bike - all while soaking
wet!</p>
</div>
</div>
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<footer class="footer bg-primary text-center
text-white"></footer>
</div>
</body>
</html>
Error details :
Error 1:
Error 2 :
Error 3 :
Error 4 :
Error 5 :
Error 6 :
Error 7 :
******************************************
Code after making corrections :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>Try Boro Kids Race Series</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<a class="navbar-brand" href="#">
<img src="abc.jpg" width="50" height="30" >
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="events.html">Placeholder Text <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Placeholder Text</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="http://www.tryborokidstri.org/" target="_blank">Try
Boro</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.face1book.com/TryBoroKids/"
target="_blank"><img src="images/IconFacebook.png" class="iconsocial"
width="50" height="30"></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-1">
<h2>Try Boro Events</h2>
</div>
</div>
<div class="rows">
<div class="col-md-6">
<img src="images/Tri_Left_KidBikeBlur.jpg" class="img-fluid rounded-circle" >
<h3>Biking is a blur </h3>
<p>Triathlete rushing to get started in the transition. Kids get the whole experience of swimming,
biking, and running.</p>
</div>
<div class="col-md-6">
<img src="images/Tri_Mid_TransDrink.jpg" class="img-fluid rounded-circle" >
<h3>A triathlon can be exhausting</h3>
<p>When returning to transition, this participant gets some much deserved water before hitting the run.
</p>
</div>
<div class="col-md-6">
<img src="images/Tri_Right_trans.jpg" class="img-fluid rounded-circle" >
<h3>Time to get changed </h3>
<p>It not easy to get out of the pool, run down to transition, and get ready for the bike - all while
soaking wet!</p>
</div>
</div>
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<footer class="footer bg-primary text-center text-white"></footer>
</div>
</body>
</html>
============================================
Screen when html is validated :