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

used flexbox

@ThinYuShwe

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

Tharun Raj 1,250

@Code-Beaker

Posted

Hi there, congratulations on completing this amazing Junior project. You've done a great work with this one! 🎉

I would like to share some of my thoughts regarding your solution that might help you improve it.

  • The navigation links should be wrapped inside an anchor tag(a). This gives a better meaning and also serves the purpose of a link. Same thing for the mobile navigation.
  • Use the correct order for the usage of heading(h) tags. Headings should only decrease by one level.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
...
  • To use different images for the desktop and mobile views as suggested by the challenge, you can use srcset. Currently, you're using CSS to toggle the image files for different screen sizes.
<picture>
<source srcset="folder/desktopImageFile.png" media=("min-width: 50rem")/>
<img src="folder/mobileImageFile.png"/>
</picture>

Here's a detailed tutorial from Envato Tuts+ on this topic.

  • I encourage using more classes for your elements to make styling easier and faster.

Overall, you've done a great job and it works as expected.

I hope this helps you. 😊

Marked as helpful

0

@ThinYuShwe

Posted

@Code-Beaker Thank you for your suggestion! I will try to fix them!

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