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 Homepage Vanilla CSS HTML and JavaScript

Lisa Allen 520

@CrypticMango

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


The css grid irked me a little bit on this one but I got it in the end. other than that not too many issues.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hello Shawtii, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

I noticed that in higher resolutions the content is stretching a lot and this is harming the design of the project, to fix this in a simple way we can use a max-width.

@media (min-width: 1440px)
main {
    max-width: 1440px;
}

avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

The remainder is excellent.

I hope it's useful. 👍

Marked as helpful

1

Lisa Allen 520

@CrypticMango

Posted

@AdrianoEscarabote Thank you for your feedback I appreciate it. I will make the changes when I have a moment. Using rem is more responsive and industry standard?

1

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