Submitted over 1 year ago

News homepage

Arunkumar•210

@apy1412

Preview site View code

This is a solution for...News homepage

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Community feedback

Andrés Gutiérrez Ramírez•2,470

@AGutierrezRPosted over 1 year ago

Hello there 👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

HTML:

You could change the structure to something like this:

<body>
	<header> ... </header>
	<main> ... </main>
	<footer> ... </footer>
</body>

This will solve the Accessibility report issues.

Use the .container class inside the <header> and the <main>.

Instead of trying to put everything in one grid container, use two grid containers

<main>
	<div>
		grid container 3 columns for the image, big title, and NEW..
  </div> 
	<div>
		grid container 3 columns for the 3 articles
	</div> 
</main>

If you use the same gap for the two, they will align perfectly.

CSS:

Try not to set a max-height for the .container class
If you decided to create two grid containers, you will be able to remove the grid-template-rows

You could create grid-template-areas like this for the first grid container:

.container {
  grid-template-areas:
    "thumbnail thumbnail sidebar"
    "title content sidebar"
}

The names is up to you or you could set everything by tracks and lines.

Marked as helpful

Arunkumar•210

@apy1412Posted over 1 year ago

thanks. it was helpful @AGutierrezR

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord