HTML Academy
Challenge: Look for errors in the HTML
Introduction to HTML and CSS4/4
Back to the list of challenges
  • 1. Setting the Classes
  • 2. The Classes Strike Back
  • 3. Challenge: Look for errors in the HTML
  • 4. Challenge: Look for errors in the CSS
List of tasks
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Challenge: Look for errors in the CSS

When the webpage layout was almost complete, the instructor Muffin flew to the computer in a blur of fur and decided to play with styles to make the webpage “nicer”. It turned out pretty well, but Muffin was half-awake when he made the changes and made some annoying typos that broke some of the styles.

Well, that’s actually a fantastic opportunity! Now we have some material that we can use to learn how to find errors in CSS!

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Instructor Muffin</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header class="site-header"> <h1>Instructor Muffin</h1> <p>Training for beginner kittens</p> <img src="img/muffin.png" width="359" height="159" alt="Muffin photo"> </header> <section class="features"> <h2>Why choose me?</h2> <p class="feature-kitten">I myself was once a kitten. But look at me now.</p> <p class="feature-train">I have got the master fully trained.</p> <p class="feature-cat">I have been a full-time professional cat for more than 5 years now.</p> </section> <section class="skills"> <h2>What will you learn, you may ask?</h2> <ul class="skills-list"> <li class="skills-item">How to snatch food from the master’s plate;</li> <li class="skills-item standard">How to give furniture a vintage look;</li> <li class="skills-item standard">How to open the door and not go in;</li> <li class="skills-item vip">How to wake the master up at night;</li> <li class="skills-item vip">How to scatter fur around the apartment.</li> </ul> </section> <footer class="site-footer"> <p>© Muffin, 2019</p> <p>I don’t have any contact information, but I can find you myself.</p> </footer> </div> </body> </html>
CSS
body { padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 18px; color: #000000; backround: #ffffff url("img/muffin-background.jpg") no-repeat 50% 0; } h1 { width: 260px; font-family: "Georgia", serif; font-size: 36px; line-height: 36px; } h2 { padding-bottom: 12px; border-bottom: 1px solid #cccccc; } .site-header { margin-bottom: 30px; } .skills-item { margin-bottom: 15px padding-left: 20px; border-left: 10px solid #c4c4c4; color: #999999; } .standard { border-color: #ffc5b3; color: #666666; } .vip { border-color: #ff5a26; color: #000000; } .container { width: 480px; margin: 0 auto; } .site-header img { display: block; margin: 0 auto; } .features { margin-bottom: 30px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; text-align: center; background-repeat: no-repet; background-position: center top; } .feature-kitten { padding-top: 60px; background-image: url("img/bottle.svg"); } .feature-cat { padding-top: 60px; background-image: url("img/cat.svg"); } .feature-train { padding-top: 60px; background-image: url("img/whistle.svg"); } .skills-list { padding: 0; list-style: none; } .site-footer { display: flex; justify-content: space-between; color: #999999; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    Help Muffin correct the following errors in the webpage styles:

    1. The first error is that the background is missing for the entire webpage.
    2. The second error is that the styles for all of the skills have been lost.
    3. The third error is the messed-up background for the benefits page.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.