Learn CSS Flexbox by Building a Photo Gallery - Step 24

Curriculum Help
1

I wanna helppp
Plaesa
**i do it thanks for evreyone i do it thanks to you **

<!-- 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="" >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="" >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="" >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="" ">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="" >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="" >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"  >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"  >
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">   

<!-- 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 (Linux; Android 12; SAMSUNG SM-T860) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/23.0 Chrome/115.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 24

2

hello ! you missing the alt atribute.

<img src="http://linkexample.com" alt="example">

<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="niceCat" >

you have to put 5 character in each alt atribute of the example for every <img> tag

3

You give it a good trail.

But kindly put some value by your own.

We do so if our img doesn’t load then we will be able to see some text

Hope you understand. :innocent:

4

Screenshot_20231115_214119_Samsung Internet
Screenshot_20231115_214119_Samsung Internet1920×898 149 KB

How like it ı dont understand sorry

5

Im sorry but ı dont understand
I do something but not skip

6

The idea of alt is to improve accessibility. Some people with vision issues use screen readers, which read the text of the page aloud. When a screen reader sees an image, the alt attribute tells the screen reader what to say.

In this challenge, each image needs its own alt attribute for the screen reader to see. Try setting each image’s alt attribute to a short, unique description for each image. Starting with alt="onecat", alt="twocat", etc. isn’t bad, but you need do something like that for each image. (And in the real world, you’d want to make a more precise description than onecat, maybe A sleepy cat or something.)

7

Screenshot_20231115_222012_Samsung Internet
Screenshot_20231115_222012_Samsung Internet1920×1092 183 KB

I hope I’m not bothering do it but not work I haven’t written code for a long time so I got a little forgetful

8

Good progress! You’ll need to add an alt attribute to each image though. Then the tests should pass.

11

Well try buddy :partying_face:

But here kindly give all of your nine img a alt value

As described by @shy_away and @Gray.n.Grey

Hope you understand. :v:

12

Screenshot_20231203_201331_Samsung Internet
Screenshot_20231203_201331_Samsung Internet1569×1123 180 KB

Im so sorry but i do it like that why dont be true

13

Please post your actual code instead of a screenshot. Thanks

14

I do itt finally thanks for evreyone