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

@KarenMascarenhasLourenco

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


Is my code understandable?

Did I use the semantic HTML tags correctly, should I add more or less?

In what areas of my code can I improve on?

All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!

Community feedback

S MD suleman 3,530

@sulemaan7070

Posted

hey Karen Lourenço😄, great job on completing the challenge...here are a few tips to make your site better..

1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-web3-mobile in the images folder.. you can responsively change the image based on the media-query..

2.Using the picture element for responsively switching between Images is considered as best practice

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

more about picture element here📚

3.This is your code


.menu ul {
    position: absolute;
}

I recommend you to use the position :fixed property so that the user cannot scroll it down..

4.you site is still on the desktop version for the images with large screens..you can co some modifications..

Hope that helps, happy coding✅✅😄

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