Build a Video Compilation Page - Build a Video Compilation Page

HTML-CSS
1

Tell us what’s happening:

I cant get it to recognized that the element is the child of the element. Everything shows it is correct but the main/body relationship. I have tried duplicating the code on other editors and used to A.I to confirm. I made sure my spacing is correct as well. Any other ideas or suggesting I can try?

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Video Compilation Page</title>
</head>
<body>
    <main>
        <h1>Learn to tie sneakers</h1>
        <p>Learn to tie your sneakers in stylish and creative ways to elevate your look. From trendy knots to unique lacing patterns, step up your sneaker game with our easy tutorials.</p>

        <section>
            <h2>Air force 1s</h2>
            <p>Master the art of tying your Air Force 1s with style! Whether you prefer a clean classic look or a trendy loose fit, our guide will help you lace up your kicks like a pro.</p>
            <iframe
                src="https://www.youtube.com/embed/watch?v=0zB5ptWxLyk&t=3s"
                title="Air force 1s"
                height="320"
                width="540">
            </iframe>
        </section>

        <section>
            <h2>Converse All Stars</h2>
            <p>Discover creative ways to lace up your Converse All Stars. From classic criss-cross to unique patterns, make your sneakers stand out.</p>
            <iframe
                src="https://www.youtube.com/embed/watch?v=dQw4w9WgXcQ"
                title="Converse All Stars"
                height="320"
                width="540">
            </iframe>
        </section>

        <section>
            <h2>Vans Old Skool</h2>
            <p>Learn how to tie your Vans Old Skool sneakers in various styles. From the classic look to more creative lacing techniques, make your Vans stand out.</p>
            <iframe
                src="https://www.youtube.com/embed/watch?v=example"
                title="Vans Old Skool"
                height="320"
                width="540">
            </iframe>
        </section>
    </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/131.0.0.0 Safari/537.36

Challenge Information:

Build a Video Compilation Page - Build a Video Compilation Page

2

Welcome to the forum @hmccrae14

Your code passes.
Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding

3

I am also having an issue with this lab on the following steps:

    1. Each section element should contain a p element to introduce the video content as its second child.
    1. Each section element should contain an iframe element as its third child.

I believe based on OP’s code that mine should pass as well. I have attempted all the recommended steps:

  1. Resetting the exercise.
  2. Using a different browser.
  3. Restarting my computer.
  4. Disabling dark mode.
    I do not have an adblocker, I am using Firefox/Chromium as alternate.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Video Compilation Page</title>
</head>

<body>
    <main>
        <h1>Best Roguelikes</h1>
        <p>The top three best roguelike games are:</p>

        <section>
            <h2>FTL: Faster than Light</h2>
            <p>Released in such and such year, FTL is a cornerstone of the roguelike genre.</p>
            <iframe
            src="https://www.youtube.com/embed/watch?v=WszdP2Jubjg"
            title="FTL"
            height="315"
            width="560">
            </iframe>
        </section>
            
        <section>
            <h2>Hades<h2>
                <p>Hades is an isometric hack-and-slash roguelike with fantastic story elements.</p>
                <iframe
            src="https://www.youtube.com/embed/watch?v=NDMXQo_LalQ"
            title="Hades"
            height="315"
            width="560">
            </iframe>
        </section>
      
        <section>
            <h2>Slice and Dice</h2>
                <p>Originally released on itch.io, this indie game is a cult classic among fans of roguelikes.</p>
                <iframe
            src="https://www.youtube.com/embed/watch?v=C_W4P-y5nv4"
            title="SliceDice"
            height="315"
            width="560">
            </iframe>
        </section>
        
    </main>
</body>

</html>
4

Make sure you have closed all your elements correctly. One of your h2 elements is not closed correctly.

1 Like
5

Wow, thanks! That pushed it through! That would probably have come up as a syntax error if I were using an IDE… Maybe it’s time to get one of those.

6

Probably not the IDE, you don’t really get the same type of syntax error feedback in HTML as you do with code like JS.

The code syntax highlighter can break, so you can often tell something isn’t right. A formatter like Prettier will give an error when trying to format it, which can give useful line numbers in the error log. Also, an HTML validator would give an error.

HTML is very lenient, browsers parse broken HTML and just give you the best it can. It is almost impossible to break HTML to the point of it not “running” in the browser.

1 Like
7

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like