Learn HTML by Building a Cat Photo App - Step 6

Tell us what’s happening:
Describe your issue in detail here.
I can’t understand the instruction about align text in front of

i tried to move 6 spaces like the instructions but i always received errors. I don’t know what;'s wrong

Your code so far

<html>
  <body>

<!-- User Editable Region -->

  <main>
    <h1>CatPhotoApp</h1>
    <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      
    <p style="text-align;right"> See more cat photos in our gallery.</p>
  </main>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

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

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

Link to the challenge:

You are doing much more than the instructions asked. I would restart the step to get the original HTML and formatting back. Then, the only thing you want to do is:

“Use the space bar on your keyboard to add two more spaces in front of the p element”

If you find yourself doing any more than adding these two spaces then you are doing something the instructions aren’t asking you to do.

I tried to do that before, but it still didn’t work

You’ll need to show us your HTML when you try it so we can see exactly what you did. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like

<```>

CatphotoApp

Cat Photos

    <p> See more cat photos in our gallery.</p>
</```>
Here is the code that I wrote. I used the space bar, placed it in front of

and moved 2 spaces, but it didn't work. The hints said I should moved it 6 spaces, which I did but still received errors

You didn’t quite get pasting the code in here correct so we can’t see what you have done. Please reread my directions carefully and give it another try.

I’m new to this, so I just don’t know how to copy and paste. Can you show me how to do it correctly.

You almost had it correct the first time. You did add the three back ticks before and after your HTML but you wrapped them in < and > which you should not do.

It is literally just three back ticks by themselves on one line. Then go to the line below that and paste in your HTML. Then make another line after your HTML and type just three back ticks.

CatPhotoApp

Cat Photos

See more cat photos in our gallery.

maybe this is better. I'm not familiar with the back ticks, so I wouldn't ry it
     <h1>CatPhotoApp</h1>
     ```
     <h2>Cat Photos</h2>
     ```
     <!-- TODO: Add link to cat photos -->
     ```
     <p>See more cat photos in our gallery.</p>
     ```
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    ```
    <a href="https://freecatphotoapp.com">Click here for the cat's picture</a>
I don't know what di I do wrong in this part, but I have 2 link texts, and the text that wrote a cute cat lying on its back doesn't show. I also received an error about not placing the <a> properly. Not sure what did i do wrong

You almost had it here. But you don’t need to add triple back ticks after each line. You just add them once before you begin your HTML, then paste all of your HTML below those back ticks, and then on a line below all of your HTML add three more back ticks.

Also, please copy/paste all of your HTML in here.

This HTML doesn’t seem to have anything to do with step 6. Are you on a new step now? If so, please use the Ask for Help icon in the step to create a post here. When you do this it will automatically include your HTML for you.

Hi @nguyen123 ,
Step 6 is saying something called indentation. It’s about re-arranging the code lines to be more readable for us.

For example,
without indentation, the code may look like this.

<html>
<header>
<some_element>
</some_element>
</header>

<body>
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
...
...
</main>
</body>
</html>

when the number of lines gets bigger, the readability of the code becomes poor.

So, with indentation, the code may look like this.

<html>
    <header>
        <some_element>
        </some_element>
    </header>
    <body>
        <main>
           <h1>CatPhotoApp</h1>
           <h2>Cat Photos</h2>
           ...
           ...
       </main>
  </body>
</html>

Get an idea of how indentation is used between opening and closing tags.

In step 6, you are asked to put two spaces (press the space bar twice in front of the <p> tag), so <h1>, <h2>, and <p> are arranged in one line.

<main>
    <h1>...</h1>
    <h2>...</h2>
    <p>...</p>
</main>