Build a Travel Agency Page - Build a Travel Agency Page

HTML-CSS
1

Tell us what’s happening:

I’m having trouble with my code but I’m not sure where I’m going wrong.
Numbers: 8, 17, 28, and 32.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content="width=device-width">
  <meta charset="UTF-8"
  <title>TravelAire</title>
  </head>
  <body>
    <h1>Destinations</h1>
    <p>Jamaica</p>
    <p>Bahamas</p>
    <p>Prague</p>
    <h2>Packages</h2>
    <p></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://www.google.com/url?sa=i&url=https%3A%2F%2Fabcnews.go.com%2FBusiness%2Fpassenger-electric-planes-become-reality-decade%2Fstory%3Fid%3D106223258&psig=AOvVaw0OHbh7MdA0Ud4PXJwAXA8p&ust=1747439657717000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCPiGyeDWpo0DFQAAAAAdAAAAABAE"alt="plane in the sky">
        </a>
        <figcaption>Take Off</figcaption>
      </figure>
      <figure>
        <a href="https://www.freecodecamp.org/learn"><target="_blank">
    <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fabcnews.go.com%2FBusiness%2Fpassenger-electric-planes-become-reality-decade%2Fstory%3Fid%3D106223258&psig=AOvVaw0OHbh7MdA0Ud4PXJwAXA8p&ust=1747439657717000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCPiGyeDWpo0DFQAAAAAdAAAAABAE"alt="plane in the sky">
        </a>
        <figcaption>Take Off</figcaption>
      </figure>
      <figure>
        <a href="https://www.freecodecamp.org/learn"><target="_blank">
             <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fabcnews.go.com%2FBusiness%2Fpassenger-electric-planes-become-reality-decade%2Fstory%3Fid%3D106223258&psig=AOvVaw0OHbh7MdA0Ud4PXJwAXA8p&ust=1747439657717000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCPiGyeDWpo0DFQAAAAAdAAAAABAE"alt="plane in the sky">
        </a>
        <figcaption>Take Off</figcaption>
      </figure>
    </body>
  
  </html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Travel Agency Page - Build a Travel Agency Page

2

Welcome to the forum :wave:

Try to work on one problem at a time. Can you share the feedback of the first test that’s failing and show how your code fulfills the requirement?

3

Yes! My code title has my travel agency name- line 6. I tried adding spaces between the name and the attributes but it still fails.

TravelAire
4

Adding more info.
What is failing:
8. Your title element should have your travel agency name.
17. You should have an unordered list element below your second p element.
28. Each of the a elements that are children of your figure elements should contain an image.
32. Each a element should have a target attribute with the value of _blank . Don’t forget the links in the list items.

Number 8: I’ve tried different names, adding a space between the name and the attributes but it still fails.
Number 17: I’ve tried redoing it but I still end up with the same code and it fails to see an unordered list.
Number 28: I’ve tried changing to have each figure element have a different image but it still fails.
Number 32: I’ve added the links and the target attributes but it still fails.

5

Look at the code you’ve posted above. It’s color coded to help read it.

Opening and closing tags are all orange. Check out your title tag.

6

I see it in the code. Now I’m thinking title is misspelled I’ve looked at it so many times.

7

It’s spelled correctly.

Sometimes there is a problem because of the previous element.

1 Like
8

For the next problem, review these user stories and make sure there isn’t anything extra. Put only what is specified here, nothing else.

  • You should have a paragraph below the h1 element introducing the travel opportunities.
  • You should have an h2 element with the text Packages.
  • You should have a p element introducing briefly the various packages.
1 Like
9

Don’t you wish we would get this feedback using the browser editor? In the OP’s defense lol…- Unless we actively look at the preview when we post on the FreeCodeCamps forum, the online web editor doesn’t color code our posts for us, nor do they have a VSCode Extension we could use to interact with their platform. If we were using VS Code as an IDE, it would autocomplete these tags for us, making this error most likely not a problem.

Until this happens, I am always telling people if they type an opening tag - make sure they immediately close them or they will forget or wrap it around something they shouldn’t..etc and watch out for void elements! Lol!

10

WHat are you talking about? The browser editor has syntax highlighting
you can see the same mismatch:

image
image327×127 7.92 KB

the autocomplete is deactivated so that people practice writing all the syntax

11

So this is what I’m talking about where at on here with this image do you see any kind of color coating to say that you’ve missed closed a tag or you have a mismatch and an opening and closing tag? I mean, I see it on the forum. When we embed the code. But please tell me where you see it in the screenshot that the tag is indicating that you have a mismatch? If it’s there, I do apologize.

IMG_5286
IMG_52861290×2796 212 KB

12

the mobile editor uses a different syntax highlighting it seems, you can try reporting it, it may be changed

But the full stack curriculum is not available there afaik

13

Promise I’m not trying to cause trouble but - I’m still not seeing even in the full stack web browser. Maybe i’m color blind?

image
image1242×632 43 KB

14

this is the code for this post in light mode

image
image432×419 22.9 KB

there is a difference in color still

and this is the code you wrote:

image
image221×131 2.82 KB

also going to the same step

image
image259×234 6.28 KB

do you have browser extensions that affect the colors of the page?

I see the color difference also on the app actually, iOS app

15

Can you open a new topic on this and specify the device/browser version that you’re using? (Don’t want to derail this thread)

Screenshot 2025-05-16 162808
Screenshot 2025-05-16 162808715×432 51.5 KB

16

I figured out 32- I’m sure some of you were looking at it like come on it’s right there! 8, 17, and 32 are still failing. I tried watching Youtube videos and I redid the whole code but I still end up in the same place.

Here is my updated code:

<meta charset="UTF-8" Travel Agency Page

Destinations

Jamaica

Bahamas

Prague

Packages

Travelling with a group? Check out our packages 

  <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="plane in the sky"></a>
    <figcaption>Take Off</figcaption>
  </figure>
  <figure>
    <a href="https://www.freecodecamp.org/learn" target="_blank"
<img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="beach resort"></a>
    <figcaption>Relax</figcaption>
  </figure>
  <figure>
    <a href="https://www.freecodecamp.org/learn" target="_blank">
         <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="sandy beach with drink"></a>
    <figcaption>Have A Drink</figcaption>
  </figure>
</body>
1 Like
17

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

18

Please refer to my previous comment. Troubleshoot one error at a time. Start with test 8.

19

Okay! I went back and realized the issue for number 8 was the previous line so now I’ll do the same with 17 and 28.

1 Like