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 with SCSS and JS

@sirbiel100

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


Hello!!

If you saw any issues on my code, please comment! Your feedback is very welcomed

Community feedback

@JUMPSTONIK

Posted

Greate implementation Gabriel. I reviewed your solution and is pretty good, but I see you have a border in your buttons that dont exist in the design. In case you wanna fix this, you can use the "border" css property and set "none" to remove the border.

other tip that i could suggest you is to keep the mobile version untile the minimum width be reach to display the desktop version with enough viewport space. This will make you solution a little bit better, because this challenge doesnt have a table version.

hope this tips be useful for you.

Marked as helpful

1

@sirbiel100

Posted

@JUMPSTONIK Hello Josue! Thank you for your feedback, I add a border in fact, but you're right, I think is better follow the original design, I removed it already! About the minimum width, I believe I fixed it thanks to you!

1
P
visualdennis 8,375

@visualdenniss

Posted

Congrats on completing the challenge successfully! Looks great overall, both on desktop and mobile view.

It looks like between 600px and 1000px there is some overflow of the content. So you might consider adding a breakpoint for screensizes between 600px and 1000px.

Hope you find this feedback helpful!

Marked as helpful

1

@sirbiel100

Posted

@visualdenniss I appreciate your comment Dennis! I already add an overflow-x between these two widths, thank you!

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