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 frontend solution by Mukumbu K. Victor

@VictorMukumbu

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


Normal css or bootstrap? How do you make your images responsive? How to best do a mobile first approach

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hello Mukumbu K. Victor, how are you? Welcome to the community of front-end mentors! I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

to solve this problem do this:

<a href="/">Read more</a>

The remainder is excellent.

I hope it's useful. 👍

Marked as helpful

1

@VictorMukumbu

Posted

@AdrianoEscarabote Hi I have found this quite helpful. Ill be sure to correct this moving forward. thank you for reviewing and advising.

Blessings

0
Melody 120

@IndigoStar88

Posted

Hi! To do a mobile first approach, start by laying out your html, css and previewing your design on a mobile size width viewport. Then, start to increase the viewport size and add media queries to accommodate the larger screen sizes (as opposed to designing on a larger screen first and adding media queries for the smaller screens).

Marked as helpful

0

@VictorMukumbu

Posted

@IndigoStar88 Hi I have found this quite helpful. thank you for reviewing and advising.

Blessings

0
Tawakalt 120

@Lahitan

Posted

Hi

In my little suggestion.

  • Insert the two images(desktop and mobile images) in the html

  • The mobile image with a class should be hidden when writing the CSS ( .image class { display: hidden;}

  • Then can use media query @ a particular media screen you You hide the desktop imge and then make the mobile view visible using ( display: block;)

You did a good job👍 Keep practicing

Marked as helpful

0

@VictorMukumbu

Posted

@Lahitan Hi I have found this quite helpful.Thank you for reviewing and advising. Blessings

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