Learn CSS Flexbox by Building a Photo Gallery - Step 5

Tell us what’s happening:

Describe your issue in detail here.
I do not see where I have the error.

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
      <div class="gallery"></div>
      <gallery>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        <img></img>
        </gallery>
  </body>
</html>

<!-- User Editable Region -->

/* file: styles.css */

Your browser information:

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

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 5

You counted correctly :clap:!
The issue lies with the syntax:
Image elements have no content between the tags so they are self closing and do not need a </image> closing tag.
Ex:

<img src="" alt="">

Hope this helps!

2 Likes

Theres another issue then just the img element. There no thing as a <gallery> element in html. Look at the directions again

, create a new div element and assign it a class of gallery
Inside that .gallery element, create nine img elements.

It means inside the div you created

3 Likes

" Inside that .gallery element, create nine img elements." – this language led me to believe that there was a “gallery” element… I removed the element and put 9 img elements in the div element and it did not work as suggested

Its better to show code on what you actually tried so we can see for ourselves

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

1 Like

I’ve tried it with and without the closing … doesn’t make a difference once I’ve already typed them but I do understand your point that is self closing. — “Do NOT mess up the count” cuz they mess you up if you do!!

I had to move the to the end of the elements… got it!!! much appreciated for the help

2 Likes

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