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

my first responsive page, using flex,trying to make it look as similar

@josueguido

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


Any suggestion or correction would be very helpful.

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Hi Josue Guido

  • the link to your repository is not working, check that your repository is set to public. Without your code , we cannot give a proper feedback
  • the body element should never have the width set , it should be left on its default state. min-height: 100vh is recommended for making sure that content can fit and provide the vertical scroll when necessary.
  • event listeners should not be used on non-interactive elements such as images. They are associated with elements such as buttons
  • the HTML of your site does need to be changed but will need the proper link to your repository. Responsive images are displayed using elements such as the picture element, using CSS to hide and display images is not best practice. You may have taken this challenge early before getting feedback on the small challenge(if you have done them)
1

@josueguido

Posted

@ChamuMutezva Thank you, I just changed the repository to public.

0
T
Chamu 13,110

@ChamuMutezva

Posted

@josueguido

Getting the HTML will be the first step. I have mentioned some of the recommendation above

  • heading elements should follow an order where the h1 is the first heading element of a page. The h1 can only be followed by an h2 heading element(that is to do with heading elements) - do not skip heading elements.
  • always use semantic html for creating an accessible website. The learn more should be an anchor element - it is a link to another page or section. The hamburger menu should be a button.
  • heading elements act as a summary of the content to follow - hence a number as a heading element does not offer much information to users.
  • for best practice, there is need for separation of concerns in your code. Do not mix your Javascript with your html, the js should be in it's own file.
  • keep your specificity as low as possible by using classes for styling. Do not use Id for styling and avoid nesting of your css where possible.
  • font sizes should not be in px value, rather use rems. See the following article why font sizes should not be in px
  • use fixed heights on elements should be avoided - that can cause content to be cut off if it doesn't fit the container height. Let the contents decide the height
  • styling using the mobile first approach is recommended
1

@josueguido

Posted

@ChamuMutezva Thank you very much for the recommendations, I already solved some points.

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