Build a Travel Agency Page - Build a Travel Agency Page

HTML-CSS
1

Tell us what’s happening:

please guys I need help on this question i can not pass through it?

26:Each figure element should contain a figcaption element as its second child.
28:Each of the a elements that are children of your figure elements should contain an image

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="Explore amazing travel destinations and packages around the world." </meta>
    <meta charset="utf-8" </meta>
    <title>Travel With Easy Agency</title>
  </head>
  <body> 
    <h1>Explore Amazing Travel Destinations</h1>
    <p> Discover exciting places and choose from a variety of travel packages designed just for you.</p>
    <h2>Packages</h2>
    <p>We offer a range of travel packages to suit every traveler’s needs.</p>
    <ul>
      <li> <a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
      <li> <a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</li>
    </ul><h2>Top Itineraries</h2>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"/>
      <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="The Colosseum in Rome">
      </a>
      <figcaption>Explore the historic Colosseum in Rome.</figcaption>
    </figure>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"/>
      <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="Snowy Alps mountains"> 
      </a>
      <figcaption>Enjoy breathtaking views of the Alps.</figcaption>
    </figure>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"/>
      <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="Beautiful sea landscape">
      </a>
      <figcaption>Relax by the serene sea.</figcaption> 
    </figure>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0

Challenge Information:

Build a Travel Agency Page - Build a Travel Agency Page

2

Check over you anchor tags. Figcaption should also be the second child not the third

3

Hi @ugo82,

You have added a closing “/” at the end of your opening anchor tags, effectively closing them.

Regular HTML elements have an opening tag that may contain attributes <a href="someURL"> and a closing tag </a>. There is never a “/” in the opening tag.

The syntax of your meta element is also incorrect. This is a void element that does not require a closing tag, but you have included one and have no closing bracket on your opening tag.

Happy coding!

4

i have removed the />, still it not working.

5

can you explain it more. i still dont understand your expaination?

6

Please post your updated code.

7 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta name="description" content="Explore amazing travel destinations and packages around the world." </meta>

    <meta charset="utf-8">

    <title>Travel With Easy Agency</title>

  </head>

  <body> 

    <h1>Explore Amazing Travel Destinations</h1>

    <p> Discover exciting places and choose from a variety of travel packages designed just for you.</p>

    <h2>Packages</h2>

    <p>We offer a range of travel packages to suit every traveler's needs.</p>

    <ul>

      <li> <a href="https://www.freecodecamp.org/learn" target="\_blank">Group Travels</a></li>

      <li> <a href="https://www.freecodecamp.org/learn" target="\_blank">Private Tours</li>

    </ul><h2>Top Itineraries</h2>

    <figure>

      <a href="https://www.freecodecamp.org/learn" target="\_blank">

      <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="The Colosseum in Rome">

      </a>

      <figcaption> Explore the historic Colosseum in Rome.<figcaption>

    </figure>

    <figure>

      <a href="https://www.freecodecamp.org/learn" target="\_blank">

      <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="Snowy Alps mountains"> 

      </a>

      <figcaption> Enjoy breathtaking views of the Alps.<figcaption>

    </figure>

    <figure>

      <a href="https://www.freecodecamp.org/learn" target="\_blank">

      <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="Beautiful sea landscape">

      </a>

      <figcaption> Relax by the serene sea.<figcaption>

      </figure>

  </body>

</html>
8

Why did you change your figcaption elements? They are not closed properly.

9

it was before and i changed it to find where the problem is coming from.

10

Tell us what’s happening: I still can not get through these two parts

  1. Each figure element should contain a figcaption element as its second child.
    28 Each of the a elements that children of your figure elements should contain an image

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="Explore amazing travel destinations and packages around the world." </meta>
    <meta charset="utf-8">
    <title>Travel With Easy Agency</title>
  </head>
  <body> 
    <h1>Explore Amazing Travel Destinations</h1>
    <p> Discover exciting places and choose from a variety of travel packages designed just for you.</p>
    <h2>Packages</h2>
    <p>We offer a range of travel packages to suit every traveler’s needs.</p>
    <ul>
      <li> <a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
      <li> <a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</li>
    </ul><h2>Top Itineraries</h2>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"> <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="The Colosseum in Rome">
      </a>
      <figcaption> Explore the historic Colosseum in Rome.</figcaption>
    </figure>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"> <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="Snowy Alps mountains"> 
      </a>
      <figcaption> Enjoy breathtaking views of the Alps.</figcaption>
    </figure>
    <figure>
      <a href="https://www.freecodecamp.org/learn" target="_blank"> <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="Beautiful sea landscape">
      </a>
      <figcaption> Relax by the serene sea.</figcaption>
      </figure>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0

Challenge Information:

Build a Travel Agency Page - Build a Travel Agency Page

11

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

12

Try checking your code with this HTML Validator. If you click the “source” checkbox at the top of the screen before you click the “Check” button, you can see the errors highlighted in your code at the bottom of the screen.

13

is this a different site

14

Again check your anchor tags and what that part is asking. Figcaption should be second child. Your order right now is . Anchor, img, then figcaption, and you closed the anchoir tag after img.

15

can you give me an example of what i am missing. i am still stuck.

16

When people talk about the order of children, their talking about anything inside an elements opening and closing tag.

This is just an example to help you think through the instructions, not the answer.

<div>
  <p>example</p>
  <img src="example.png" alt="example image">
</div>

In a lot of tasks the order is important. If the instruction is to have a div with an image as the first child, the example above would be incorrect since the image is the second element not the first.

<div>
  <p>example</p>
</div>
<img src="example.png" alt="example image">

If I move the image outside of the opening and closing div tags, this would mean the image is now a sibling of the div, not a child. So that would also be incorrect

Its much easier to see the level of each element (sibling, parent, child) if you format your code with indentation.
When you tinker with your code the formatting can become messy making it harder to see mistakes where theres more elements

Very hard to read example:

<div>
    <h1>example</h1>
<img src="example.png" alt="example image"><p>example text
</p>
</div>
  <div>
<img src="example.png" alt="example image">
<p>example</p>
  </div>
<div><h1>example header</h1></div>

Tided up example:
Here you can see there are 3 div elements that are siblings, the first has three children, the second two the third one.

<div>
  <h1>example</h1>
  <img src="example.png" alt="example image">
  <p>example text</p>
</div>
<div>
  <img src="example.png" alt="example image">
  <p>example</p>
</div>
<div>
  <h1>example header</h1>
</div>

Take a moment to tide up your code and read through each task checking everything is in the right place. then post again if you still cant find why its not passing

Extra note: the link dhess gave is another site, you copy past your code into it, then press check. It will go through and let you know if theres anything wrong with your code.
This is a tool used to make sure code is ready for publishing. So I recommend you give it a try just to get used to it.

17

i have done all that but still it is not fixing.

18

Post your latest attempt