(New) Responsive Web Design

HTML-CSS
1

I/m brand new to coding
What is wrong with this? Code will not pass. Trying to nest the 3 child elements below “”

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

Link to the challenge:

2

The <ul> is just an example!
In this challenge you just need to add two space at the beginning of the lines:

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

alright, but what about the “li”

4

You don’t add the <li>s either. You should add no new HTML at all. The only thing you want to do is push the three child elements of main in two more spaces.

2 Likes
5

Respectfully, I did that. Take a look.

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

I guess I didn’t understand your previous question. You asked about the li. I answered that there shouldn’t be any. The code you just posted doesn’t have any. Are you still having problems passing this step? If so, please paste in the entire HTML.

1 Like
7

Yes im still having troubles. For better reference I am on step 6 of the (New) Responsive Web design course first lesson. Here is the HTML

CatPhotoApp

Cat Photos

Click here to view more cat photos.

8

god it wont let me just paste the actual html

9

You just need to wrap your code in triple back ticks. Type three back ticks on a line by themselves, then paste your code underneath, then on a line below your code three more triple back ticks.

12

would the 3 black tiks just be like 3 apostrophes, i know it sounds dumb but dude I am so so so new to this if it wasn’t obvious already. so i really appreciate your help

13

On my keyboard, the back tick is in the upper left above the Tab key and below Esc.

14 
<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>
15

holy crap lol finally

16

The <h1> and <main> should be at the same indentation level because they are “siblings”, so they should both be four spaces in. Then adjust the three children inside of <main> to six spaces in and you should pass.

17 
<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>

Still not passing… hmm

18

Congratulations, you discovered a bug in the tests. You have accidentally added a bunch of spaces after the opening <main> tag and that is causing the test to fail. It probably shouldn’t, but one thing you should know is that these tests are very picky about unnecessary changes that they aren’t expecting because it is often very hard to make a test that can account for every type of change, especially when you are dealing with spacing and formatting issues.

So get rid of the spaces after the opening <main> tag and for future sanity only make changes where specifically asked to :slight_smile:

19

I opened a github issue about this so other people don’t get bit by it.

Issue #46492: Cat Photo App - Step 6: Extra spaces after opening main tag causing test to fail

1 Like
21

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.