×
Course: Welcome

Looking for Mistakes [7/14]

Let’s get to know some of the most frequent mistakes in order to avoid them in future.

HTML allows to insert tags into one another, and one of the most common mistakes is incorrect insertion, for example:

<p>Text <strong>is formatted</p> bold</strong>

In this example tag <p> is closed before tag <strong>, this is a mistake.

Another type of mistakes happens because of annoying typos and inattention, when spaces between attributes are forgotten or attributes names are spelled wrong.

Thus, coach Muffin decided to update his CV late at night. He wanted to make it neater, to play with the formatting. But his inattention let him down. However, you can practice looking for mistakes and correcting them.

If you get totally lost, there is a hint below. But don’t peek right away!

Hint

1. Pay attention to the tags closing order.

2. Are there enough spaces?

3. Check the attributes’ spelling. There aren’t many of them.


Do it
HTML
<!DOCTYPE html> <html> <head> <title>Looking for Mistakes</title> </head> <body> <h1>Coach Muffin [v.2]</h1> <!-- This block has the first mistake --> <div class="error1"> <p><em>Coach Muffin will be helping you with HTML and CSS intricacies</p> in further courses.</em> </div> <!-- Search here for the second mistake --> <div class="error2"> <imgsrc="/assets/course1/keks-macho.jpg" class="photocard"> </div> <!-- And here is the third one --> <div class="error3"> <blockquote clas="nice-cite"> <p>Hey y’all! My name is Muffin and I am you future coach. I am a web developer. I live in Saint Petersburg.</p> <p>See you soon!</p> </blockquote> </div> </body> </html>
CSS
body { font-family: Georgia, serif; } .photocard { display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #E7471E; } .nice-cite { margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background: #f5f5f5; border-left: 5px solid #E7471E; }
HTML Academy

Help coach Muffin to correct his mistakes in HTML code of his new CV.

  1. an extra empty line,
  2. the lost image,
  3. the lost quotation formatting.
Theory Check Next