Learn CSS Flexbox by Building a Photo Gallery - Step 24

Tell us what’s happening:

Describe your issue in detail here.

What is wrong?
alt attributes naming conventions is problem.
How to correct alt attributes naming conventions?
so, help me.

Your code so far

<!-- file: index.html -->
<!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">

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Charlie">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Ginger">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Millie">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Pepper">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Shadow">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Peanut">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Smokey">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Pumpkin">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" ‌alt="Frankie">

<!-- User Editable Region -->

    </div>
  </body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}

Your browser information:

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

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 24

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Hey.
I think your alt texts should be more descriptive. The names you used can be anything and they do not describe the objects. Remember the alt texts are for visually impaired individuals, they have to be easily accessible. When the screen reader reads out the text, for instance, Charlie the visually impaired individual might think you’re talking of a person while in the real sense, it’s a cat. That’s why you need more descriptive texts.

2 Likes

Your code pass if the hidden character <200c> is removed in the last one. This is a copy and paste of yours representing the hidden character.

      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Charlie">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Ginger">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Millie">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Pepper">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Shadow">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Peanut">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Smokey">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Pumpkin">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" <200c>alt="Frankie">
1 Like

How did you find that hidden character?

1 Like

Read instructions carefully:
To complete the project, add an alt attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.

1 Like

1 Like

Copying the code and pasting in an editor that shows hidden characters, like Vim.

1 Like

Thank You. That was new to me.

2 Likes

If you suspect foul-play by hidden characters and you are in a Unix like system, there is also another way; a command line to find out. Example:

echo '<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" ‌alt="Frankie">
' | od -bc
0000000   074 151 155 147 040 163 162 143 075 042 150 164 164 160 163 072
           <   i   m   g       s   r   c   =   "   h   t   t   p   s   :
0000020   057 057 143 144 156 056 146 162 145 145 143 157 144 145 143 141
           /   /   c   d   n   .   f   r   e   e   c   o   d   e   c   a
0000040   155 160 056 157 162 147 057 143 165 162 162 151 143 165 154 165
           m   p   .   o   r   g   /   c   u   r   r   i   c   u   l   u
0000060   155 057 143 163 163 055 160 150 157 164 157 055 147 141 154 154
           m   /   c   s   s   -   p   h   o   t   o   -   g   a   l   l
0000100   145 162 171 057 071 056 152 160 147 042 040 342 200 214 141 154
           e   r   y   /   9   .   j   p   g   "     342 200 214   a   l
0000120   164 075 042 106 162 141 156 153 151 145 042 076 012 012
           t   =   "   F   r   a   n   k   i   e   "   >  \n  \n
0000136

You can see it, right after jpg

1 Like

Thank you. I can do it because of your help.

1 Like

Thank you. I can do it because of your help

1 Like

Thank you. I can do it because of your help. :grinning: