I’m having issues with 20,21,26 and 28. I wrapped the anchor element around the list item , but still getting error. Also each figure element contains a figcaption as the second child. along with each a element has a image . need help
Your code so far
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="width=device-width",
initial-sale=1.0>
<title> Travel Agency Page </title>
</head>
<body>
<h1>
We travel far agency
</h1>
<p>
Several wonderful traveling opportunities to several diferent locations around the word at affordable prices.
</p>
<h2>
Packages
</h2>
<p>
We have various luxurious packages to offer:
</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 travels</a> </li>
</ul>
<h2>
Top Itineraries
</h2>
<figure>
<a href="https://www.freecodecamp.org/learn"target="_blank">
<figcaption> Colosseum in the afternoon </figcaption>
<img src="https://cdn.mos.cms.futurecdn.net/BiNbcY5fXy9Lra47jqHKGK-970-80.jpg.webp" alt="a building in rome that is lite up">
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank">
<figcaption> mountain</figcaption>
<img src="https://images.pexels.com/photos/618833/pexels-photo-618833.jpeg?auto=compress&cs=tinysrgb&w=400" alt="sun setting among the mountains">
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank">
<figcaption>the beach </figcaption>
<img src="https://media.istockphoto.com/id/1366026478/photo/beautiful-caribbean-sea-and-blue-sky-nature-background.jpg?s=612x612&w=0&k=20&c=8DspWXms1fg4kEHVQKqf0a_j05AWclGQbptTf2V_z2k=" alt="the beach"> </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/136.0.0.0 Safari/537.36
Challenge Information:
Build a Travel Agency Page - Build a Travel Agency Page
there are uppercase letters in the text you are given to use, so you can’t make everything lowercase. You need to use lowercase and uppercase letters to match the text you are given to use
One of the things that I would recommend that anytime that FCC (FreeCodeCamp) gives you gray square boxes it’s a “Verbatim” copy and paste.
It goes with the old saying that we has humans would say that these are equal.
“samantha” = “Samantha” - Human says these are the same… however a computer does not.
To a computer, the lowercase letter ‘s’ and the uppercase letter ‘S’ are represented by completely different numerical codes under the hood (like ASCII or Unicode). Because these codes are different, the computer treats the two strings as distinct sequences of characters.
This photo is an example of what I’m talking about is it needs to be “Verbatim”
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="width=device-width",
initial-sale=1.0>
<title> Travel Agency Page </title>
</head>
<body>
<h1>
We travel far agency
</h1>
<p>
Several wonderful traveling opportunities to several diferent locations around the word at affordable prices.
</p>
<h2>
Packages
</h2>
<p>
We have various luxurious packages to offer:
</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</a> </li>
</ul>
<h2>
Top Itineraries
</h2>
<figure>
<a href="https://www.freecodecamp.org/learn"target="_blank"> <img src="https://cdn.mos.cms.futurecdn.net/BiNbcY5fXy9Lra47jqHKGK-970-80.jpg.webp" alt="a building in rome that is lite up"> </a>
<figcaption> colosseum in the afternoon </figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank"><img src="https://images.pexels.com/photos/618833/pexels-photo-618833.jpeg?auto=compress&cs=tinysrgb&w=400" alt="sun setting among the mountains"> </a>
<figcaption> mountains</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank"><img src="https://media.istockphoto.com/id/1366026478/photo/beautiful-caribbean-sea-and-blue-sky-nature-background.jpg?s=612x612&w=0&k=20&c=8DspWXms1fg4kEHVQKqf0a_j05AWclGQbptTf2V_z2k=" alt="the beach"> </a>
<figcaption> the beach </figcaption>
</figure>
</body>
</html>
I had similar issues when working on this project — especially with nesting <li> and <figure> elements. One thing that helped was ensuring the <img> tag comes inside the a tag and before the . The correct structure should look like this:
mod edit - solution removed
Also, double-check that all elements are properly closed and that you’re not placing the anchor tag around <li>, but inside it instead.
I ran into these issues while building a sample layout for a project related to buy a house London — so I know how tricky it can get. Keep tweaking the structure and you’ll pass all tests!
