Learn CSS Grid by Building a Magazine - Step 6

Tell us what’s happening:
Hey, guys! It asks me to make an img’s width of 400 and says that my code doesn’t pass. Weird for me cuz it works. I placed that styling in different places:

  1. in HTML like in this example

  2. in HTML in the head aka img{width: 400}

  3. in CSS
    Nothing pleased the system though everything works. Would be so grateful if anyone can help.

    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>Magazine</title>
  <link
    href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
    rel="stylesheet"
  />
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
  />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <main>
    <section class="heading">
      <header class="hero">
        <img style="width:400;" 
          src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" 
          alt="freecodecamp logo" 
          loading="lazy" 
          class="hero-img" 
          />           
        <h1 class="hero-title">OUR NEW CURRICULUM</h1>
        <p class="hero-subtitle">
          Our efforts to restructure our curriculum with a more project-based
          focus
        </p>
      </header>
    </section>
  </main>
</body>
</html>
/* 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/103.0.0.0 Safari/537.36

Challenge: Learn CSS Grid by Building a Magazine - Step 6

Link to the challenge:

Hint: The width should be specified like the alt attribute above.

1 Like

Thank you, it works. But now I wonder why! I haven’t found using inline styling like that in the internet.

It’s an old way of setting width image tag, you don’t need the style attribute because on an image the width intrinsically refers to the image width, its been deprecated, you probably shouldn’t use it.
Here’s a link to a resource to read more on it if you want to: HTML Tag: Change The Width Of A Picture In HTML »

Thank you, sir! Yes, it’s interesting. I like digging deep :slight_smile: