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

New Homepage Main Responsive

rayzii-ghβ€’ 160

@rayzii-gh

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

salma fadl azzamβ€’ 330

@salmafadlabdulrahman

Posted

Hello there, You did a great a job on this projectπŸ‘, I have a few tips for you that might help. I hope it's alright.

you have put the 3 cards/articles in a footer tag. it would be better if you put in a section tag, or a div tag. the footer tag actually contains information about the author of the section, copyright data or links to related documents.

also make sure to add a margin top to the cards/articles section so it doesn't overlap, and add max width to the the main section so the contents won't clash and overlap.

use max width on the images, so when the page size gets smaller the image would shrink but what's inside of the image should be the same.

There's a course named Responsive web design on Scrimba.com, there's multiple units about grid, and flexbox, I took the course and I found it very helpful and learned new stuff.

Great job working on this project!!πŸ‘πŸ‘

Marked as helpful

0

rayzii-ghβ€’ 160

@rayzii-gh

Posted

Thanks, in paragraph 4 you mean the default of the image size?

1
salma fadl azzamβ€’ 330

@salmafadlabdulrahman

Posted

@rayzii-gh yes, say you have a container and there's an image in it, you need to determine the width / the max width that the image should consume in that container, this is a part of making your website responsible. πŸ‘

Marked as helpful

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