Challenge 6- HTML

HTML-CSS
1

On my challenge 6 it says I should add 6 spaces from the top, I did all I could but it’s still not working.

  **Your code so far**


<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
  <h2>Cat Photos</h2>
  <!-- TODO: Add link to cat photos -->
  <p>Click here to view more cat photos.</p>
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 15_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1

Challenge: Step 6

Link to the challenge:

2

Hi @xris !

It looks like your main, h2, comment, and p all have the same indentation (=the number of spaces at the start of the line)

But in this step, you want to indent (=add more spaces to) the following 3 things:

  • h2 element
  • comment
  • p element

so that these 3 things look like the children of the main element.

2 Likes
3

I have tried in every way I can, don’t seem to get it. :pensive:

4

happened the same to me. you have to select all, h2,comment and p and before h2 double tap

5

Thanks so much for the reply aspirine, but what do you mean double tap after highlighting?

6

i found the solution from another comment.
here it is ‘’ I would recommend you to click Restart Step and add two spaces for the h2, comment and the p OR select the h2, comment and p and press the tab key once.

1 Like
7

About adding spaces, here’s what I have been doing, I put the cursor just before the opening tag and pushed the enter button twice, is that it or I have been doing the wrong thing?

8

You have been doing it correct. With this lesson the hint has been confusing a lot of people. What the hint is trying to say is from the start of the line the elements should be indented a total of 6 spaces.

I suggest you click Restart Step and either individually indent h2, comment, and p two spaces using the spacebar OR as @aspirine quoted, you can also use the tab key which on freeCodeCamp will apply a two space indent for each press of the tab key. the goal is to have it look something like this:

  <main>
    <p></p>
    <p></p>
    <p></p>
  </main>
2 Likes
9

Thanks a lot Alabstor, I just tried this but it’s not working. I don’t wanna get tired of this. Or do I have to

image
image1920×2560 646 KB

10

In the future please provide your code by wrapping it using three backticks (```) instead of taking a picture of your screen. However, you are close! you just need to indent the h2 element from the looks of it.

11

here’s my latest edit.

    <main>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more cat photos.</p>
    </main>
12

You used apostrophe’s and not backticks. Notice the difference (```) backticks compared to (’’’) apostrophes.

It however looks like you placed your (a) element above the (p) element when it is supposed to go inside the (p) element.

13

what you mean (a) element ? you talking about the comment by any chance ?

14

I’ve edited your post for readability. 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.

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

You have to make sure the h2, the comment and p are exactly six spaces from the start of the line. I would recommend you to click Restart Step and add two spaces for the h2, comment and the p OR select the h2, comment and p and press the tab key once.

15

The a element is the anchor element, Im not sure whether you know about it, but you will learn it soon

There is no <a> element in this step?

16

I looked at the wrong lesson when replying to this post and for that reason I provided the wrong information. This message can be ignored entirely.

1 Like
17

Hi @xris !
the main challenge here is to make sure the indentation.

So, under the main tag, move the h2, comment and p tag just 1 tab to the right.
That would be the answer to the challenge.
Thank you.

1 Like
18

Thanks so much for the help my friend, it worked.

1 Like
19

please guys i’ve got another issue on step 12, replacing the texts in the paragraph with an anchor tag, cat photos is to be the link in the sentence did it the best way i could but it’s not working still.

  <h2>Cat Photos</h2>

  <!-- TODO: Add link to cat photos -->

  <p>Click here to view more<a href="https://freecatphotoapp.com"> cat photos.</a>

  </p>

  <p>cat photos</p>
20

create another separate issue for this problem.
and also, link the problem. message me with the new post link.