Learn HTML by Building a Cat Photo App - Step 14

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t understand how to make a link open in a new tab. Please help. I am new to this and I have little understanding of what goes where.
Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p>See more 
        <a href ="https://freecatphotoapp.com">cat photos<a> in our gallery.</p>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

Your browser information:

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

Challenge: Learn HTML by Building a Cat Photo App - Step 14

Link to the challenge:

2

mistake in closing tag of a. please correct it.

3

Remember to close the anchor tag properly by writing </a>.

Attributes are added with their value to the anchor tag like this:

<a attribute="value" href="example.com">clickableText</a>

What you have to to now is to figure out what the attribute and what the value is in the task description and put it in.

4

its telling me this: Your anchor (a ) element does not have a target attribute. Check that there is a space after the opening tag’s name and/or there are spaces before all attribute names.

5

How do I do this part? Add a target attribute with the value _blank to the anchor (a ) element’s opening tag, so that the link opens in a new tab.

6

Your p and a element should be in one line. Remove space between your p and a element

7

Ok they are in the same line but I’m still stuck on the same problem

8

Welcome to the community!
It appears the code has been altered causing a large amount of space between the connecting text.

 <p>See more 
        <a href ="https://freecatphotoapp.com">cat photos<a> in our gallery.</p>

I suggest resetting Step 14.
Only add the target attribute and its value “_blank” to the presented text.

You can use

Here the src attribute was added along with its value “https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg” have been added to the img element.

for a reference on how to add the attribute and value.

9

please share your code.

10

I reset it

See more cat photos in our gallery.

1 Like
11

The linesbrake does not cause any problems. You just have to add an attribute with a value to the anchor element.

<a attribute="value" href="example.com">clickableText</a>

you have done everythin right, just missed the attribute.

Another hint:
target ist the attribute, _blank its value

12

It should look like the original

See more < a href ="https://freecatphotoapp.com">cat photos in our gallery.

I suggest adding the target with its attribute between the a and the href.
13

Perfect! Great job! It works to open in a new window. I just clicked on it.

14

yea but it wont let me move on to the next lesson
Im still stuck on step 14

15

It says my anchor doesn’t have a target attribute.

1 Like
17

No I haven’t copy and pasted anything. I am just trying to learn this step by step.

1 Like
18

Hi! Please share your updated code so people can check it.

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 (').

20

Thats your fine code :point_down:

<p>See more <a href ="https://freecatphotoapp.com">cat photos<a> in our gallery.</p>

Just make to to close the anchor tag ‘’ and add the attribute :point_down:

<a attribute="value" href ="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

Now you just have to figure out that of the given words in the task is the attribute and whats the value.

21

How do I find the attribute and value?

22

By reading the task :wink:

“Add a target attribute with the value _blank to the anchor”

I have to go back to work since my lunch breake is over. I hope you manage to master this task!

1 Like