Help on new responsive web design

HTML-CSS
1

I need help on step 6 of building a cat photo App:

Question: Add two spaces in front of the three child elements of main so your HTML is more readable.

My Answer:

<main>
    <h2>Cat Photos</h2>
    <ul>
      <li> Child Element 1 </li>
      <li> Child Element 2 </li>
      <li> Child Element 3 </li>
    </ul>
    <!-- TODO: Add link to cat photos -->
    <p>Click here to view more cat photos.</p>
    </main>
2

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.

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

3

There isn’t a link so I can’t check it, but I don’t think those were the original child elements - I think those are the ones from the example.

4 
Step 6
In the previous step, you nested the h2 element, comment, and p element within the main element. A nested element is a child of its parent element. It should be indented two more spaces than its parent element to improve readability, like this:

<ul> 
  <li> Child Element 1 </li>
  <li> Child Element 2 </li>
</ul>
Add two spaces in front of the three child elements of main so your HTML is more readable.



<main>

      <ul>

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

    </ul>
    
    </main>

I have also tried this:

  • Child Element 1
  • Child Element 2
  • Child Element 3
``` Best Regards, Solomon O.
5

Hi, please link to the lesson in future, it makes it far easier to help.

However being familiar with this lesson, and what people tend to get stuck on with it.

  1. The lesson doesn’t want you to add any ul/li list elements. I’d advise resetting the lesson.

  2. The child elements mentioned are not the list. Any element inside an element is a child element. In the code below, the h2 is the child of the main element.

<main>
  <h2>hello</h2>
</main>
  1. The lesson wants you to indent the code I.e. add two spaces in front of the correct elements to show the codes parent child relationship. Here is an example of indented code.
<body>
  <h1>Hello world</h1>
  <main>
    <h2>Welcome</h2>
    <p>I am a paragraph</p>
  </main>
</body>

Apply this to your own code, hope this helps!

6

Thank you so much.
This really help.

1 Like
7

Good day to you!
Sometimes I am having hard time when explaining to people about triple backticks.
How can I provide this video-instruction like you just did in your post?

8

There is a “Canned Replies” option in the settings for a message. I don’t know if that shows up for everyone or just for mods.

9

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