Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News site using grid layout

shaunfrosethโ€ข 60

@shaunfroseth

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Im assuming the Javascript was supposed to be added for the hover effects, but I just used CSS selectors instead because it seemed much easier.

Still unsure how to optimize CSS/HTML to be responsive, probably wont work well with the grid I set up

Community feedback

Ayobami Ikuewumiโ€ข 850

@Ikuewumi

Posted

Hi Shaun ๐Ÿ‘‹. Good solution. About your question on grid issues, here is my suggestion:

In this situation, mobile-first CSS comes in handy because on mobile-screens, there isn't a lot to do layout-wise, then you add on the complexity on desktop screens. In this case, I think you could incorporate that with something like this:

main-grid {
	display: grid;
}

@media (min-width) {
	main-grid {
		grid-template-areas: "...."
	}
}

Anyways, I hope this helps. Feel free to ask any questions, and keep coding๐Ÿ‘, Ayobami

0

Please log in to post a comment

Log in with GitHub
Discord logo

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