Design a Newspaper Layout - Design a Newspaper Layout

HTML-CSS
1

Tell us what’s happening:

Please guys take a second look at my code, it didn’t pass. These are the error messages I got:
12. The display property of the .newspaper-layout element should be set to grid.

  • Failed:13. Your .newspaper-layout element should have a grid-template-areas property with title spanning all three columns of the first row.

  • Failed:14. The second row of the grid template should contain a feature-article spanning two columns and a cover-image.

  • Failed:15. The third row of the grid template should contain a secondary-article spanning two columns and a cover-image.

  • Failed:16. The fourth row of the grid template should contain small-article1, small-article2, and small-article3.

  • Failed:17. Your .newspaper-layout selector should use the grid-template-columns property to divide the space into three equal parts. Remember you can use either the repeat function or manually define each fractional unit.

  • Failed:18. Your .newspaper-layout selector should have a grid-template-rows property set to auto 1fr 1fr 1fr.

  • Failed:19. You should add a gap between grid items.

  • Failed:20. .title should have a grid-area of title.

  • Failed:21. .feature-article should have a grid-area of feature-article.

  • Failed:22. .cover-image should have a grid-area of cover-image.

  • Failed:23. .secondary-article should have a grid-area of secondary-article.

  • Failed:24. .small-article1 should have a grid-area of small-article1.

  • Failed:25. .small-article2 should have a grid-area of small-article2.

  • Failed:26. .small-article3 should have a grid-area of small-article3.

  • Failed:27. The img inside .cover-image should have a max-width of 100%.

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>CSS Grid Newspaper</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <main class="newspaper-layout">
    <header class="title">
      <h1>The Daily Grid Times</h1>
    </header>

    <article class="feature-article">
      <h2>Breaking News: CSS Grid Shapes the Future</h2>
      <p>CSS Grid is revolutionizing web layouts, making it easier to design
         complex, responsive structures without messy hacks.</p>
    </article>

    <figure class="cover-image">
      <img src="https://via.placeholder.com/300x300" alt="Cover image"/>
    </figure>

    <article class="secondary-article">
      <h2>Developers Celebrate Grid Layout</h2>
      <p>Web developers worldwide are adopting CSS Grid to streamline 
         their workflow and create more dynamic, user-friendly designs.</p>
    </article>

    <article class="small-article1">
      <h3>Sub Article One</h3>
      <p>A quick look at how grid-template-areas simplifies layouts.</p>
    </article>

    <article class="small-article2">
      <h3>Sub Article Two</h3>
      <p>Tips and tricks for mastering CSS Grid in no time.</p>
    </article>

    <article class="small-article3">
      <h3>Sub Article Three</h3>
      <p>Why grids are better than floats and flexbox in certain cases.</p>
    </article>
  </main>
</body>
</html>


/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

.newspaper-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-template-areas: "title title title"
    "feature-article feature-article cover-image"
    "secondary-article secondary-article cover-image"
    "small-article1 small-article2 small-article3";
  gap: 20px;
}

.title {
  grid-area: title;
  text-align: center;
}

.feature-article {
  grid-area: feature-article;
}

.cover-image {
  grid-area: cover-image;
}

.secondary-article {
  grid-area: secondary-article;
}

.small-article1 {
  grid-area: small-article1;
}

.small-article2 {
  grid-area: small-article2;
}

.small-article3 {
  grid-area: small-article3;
}

.cover-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

Your browser information:

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

Challenge Information:

Design a Newspaper Layout - Design a Newspaper Layout

https://www.freecodecamp.org/learn/full-stack-developer/lab-newspaper-layout/design-a-newspaper-layout

2

are you sure you have added this code correctly?

3

yes, I added the code correctly. At least to the best of my knowledge

4

so why none of your CSS is applied?

how do you link the CSS to the HTML?

5

I linked it in the head section of my HTML

6

check the file name that is written above the editor

7

it is styles.css, thanks for the help. It passed

8

Look at your linked css file. It says “style.css”. It should be “styles.css. With that css will be applied.