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

Responsive news homepage

Mihail 160

@mihail-soltan

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


Aligning all the containers perfectly got a bit challenging. Any suggestions are welcome

Community feedback

Kyrie 70

@KyrieeWen

Posted

Hey MIHAIL, I reviewed your code, and think would be helpful to give you some feedback

App.js,

  1. You can store those dummy data to another file called data.js for example to leave the functional component space cleaner..
  2. Good job to use nav to improve accessibility 3.navItems.map can be refactored to change i to item to make it more readable
  3. Consider to use BEM css name convention to name classes, nice to have 5.I would suggest to import image as xxx, then src={xxx}, in your case, each time when it re rendered, it needs to require those two images again 6.Change art to article to be more descriptive
  4. remove empty space on line 95, 97

App.scss

  1. Good to use config file and store css variables to reuse
  2. would be good to seperate css and scss file, and store compiled css file to other folder
  3. Good to use vw and rem

Let me know if there any specific question you want to ask me , happy to answer!.

Hope it would be helpful

Marked as helpful

0

Mihail 160

@mihail-soltan

Posted

@KyrieeWen Hi Kyrie! Thank you so much for the feedback and suggestions! I'll make sure to apply the changes asap :)

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