Challenge 5
Read ALL of the instructions carefully before starting the exercise!
Dear Colleague,
Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics.
I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code provided in the ZIP file). Someone told me that there are exactly 10 errors in the HTML and 10 errors in the CSS. Yes, 20 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.
Update both the ca5.html and ca5.css files.
Also create a MS Word file describing the errors. More
specifically, create a bulleted list describing your improvements
and be sure to include the line numbers. Save the MS Word file as
challenge5_notes_LastName.docx into the
ca5-broken folder, rename the folder
challenge5-fixed, then compress (ZIP) and submit to the
Challenge 5 dropbox in D2L.
Code in CSS...
@charset "UTF-8";
/* CSS Document for CA3 */
body {
background-color: antiquewhite;
}
#h1 {
font-family: "Impact", "Haettenschweiler" , "Franklin
Gothic Bold", "Arial Black", "sans-serif";
color: #92C818;
text-align: center;
font-size: 6em;
margin: 0px;
}
#intro {
background-color: bisque;
border: greenyellow;
text-align: justify;
font-size: 1.5em;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
padding:0 10px;
}
.column {
float: left;
width: 30%;
margin-bottom: 20px;
padding: 0 8px;
}
.row {
width: 100%;
}
#card {
background-color: ghostwhite;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-right: auto;
margin-left: auto;
}
/* Some left and right padding inside the container */
.container {
padding: 0 10px;
}
/* IGNORE THIS THERE ARE NO ERRORS IN LINE 55-59 Clear floats
*/
.container::after, .row::after {
content: "";
clear: both;
display: table;
} /* IGNORE THE ABOVE THERE ARE NO ERRORS IN LINE 55-59 */
#title {
color: greenyellow;
}
#img {
max-width: 100%;
}
#footer {
margin-top: 20px;
margin-bottom: 20px;
font-family: "Impact", "Haettenschweiler", "Franklin
Gothic Bold", "Arial Black", "sans-serif";
font-size: 2em;
text-align: center;
}
Code in Html...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Robots!</title>
<link href="ca5.css" rel="stylesheet">
</head>
<body>
<div class=".header"><h1>Robots!</h1></div>
<div class=".sidebar">
<p>Amazing Robots</p>
<iframe width="100%" height="auto"
src="https://www.youtube.com/embed/kgaO45SyaO4?rel=0"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>
<iframe width="10px" height="auto"
src="https://www.youtube.com/embed/Is4JZqhAy-M?rel=0"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>
<iframe width="100%" height="auto"
src="https://www.youtube.com/embed/QdQL11uWWcI?rel=0"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>
</div>
<div class=".content">
<h3>Robots <div class="strike
out">probably will</div>rule the world!</h3>
<p>Human relationships will never go out of
style. But as robotics technology and artificial intelligence (AI)
advance, and robots gain greater "social" abilities, we humans will
form relationships with our robot helpers. We may even come to feel
as though they are our friends.</p>
<p>Is that really something we want? It's hard
to imagine that having a robot as a friend is a future many of us
would desire. But human nature may pave the way for these
relationships. And it may be inevitable.</p>
<p>A big reason is practical: People are living
longer and there's an expanding demographic bulge of people over
65, many of whom will need some form of care as they age.
Elder-care experts foresee a shortage of human caregivers to meet
ever-growing demand. Robots of some form will be necessary to fill
the gaps. (Should you have the misfortune of being bedridden, a
robotic bear might lift you to give your human aide's back a break,
for example.)</p>
<img class="content-image" src"images/pepper.jpg"
alt="Pepper">
<p>A number of initiatives around the world are
underway to create robots that act as health care aides or personal
"butlers." It's not just that technology is advancing and it's now
possible to create cool ,socially adept robot helpers. In the years
ahead, there will be a real demand for them.</p>
<p>What will this robot helper be like? Perhaps
like the Care-O-bot being developed in Germany, a funky looking
wheeled robot with arms and a round screen as a head. It might be a
bit more human-like, as with the Pepper personal robot from
Softbank Robotics, with its cartoonish head and a screen on its
chest. Pepper's claim to fame is its ability to "perceive
emotions." ("Pepper is the first humanoid robot capable of
recognizing the principal human emotions and adapting his behavior
to the mood of his interlocutor," according to the company's
website.)</p>
<p>Or maybe it will be more like Zenbo, the
smaller household robot that its maker, Asus, describes as "Your
smart little companion," who can turn on the TV and read recipe
instructions while you cook, but can't actually make a meal or load
the dishwasher.</h3>
<//div>
<div class="foot"><p>Copyright 2018 | My Robots Page</p></div>
</body>
</html>
Please tell me all the 20 code's error please and list them.
HTML CODE ERROS:-
<iframe width="10px"> mentioned in the div class="sidebar" in html file , it should be " 100%" inplace of "10px"
There is no id="first" mentioned in any of the div class tags
id=img in css file does not belong to any of the file in html or may be no id mention for title tag
id=card in css file not mentioned in any of the html div tags
Get Answers For Free
Most questions answered within 1 hours.