Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...

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;

.container::after, .row::after {
content: "";
clear: both;
display: table;

#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>
<meta charset="UTF-8">
<link href="ca5.css" rel="stylesheet">


<div class=".header"><h1>Robots!</h1></div>

<div class=".sidebar">
   <p>Amazing Robots</p>
   <iframe width="100%" height="auto" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
   <iframe width="10px" height="auto" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
   <iframe width="100%" height="auto" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<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 class="foot"><p>Copyright 2018 | My Robots Page</p></div>


Please tell me all the 20 code's error please and list them.

Homework Answers

Answer #1


  • In Image tag , "src = " missing .
  • Before the line div class="foot" ,closing tag of div element should be like "</div> in html
  • Last Paragraph <p> in html should have its closing tag. "</p>
  • Need not to mention (" ." , i.e dot in div class content ,div class sidebar and div class header)
  • <H3> Opening tag in last line of last para in html Undeclared
  • In Css the footer is an class (.footer) and not an id of html div element
  • <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

Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question