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

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 1 year ago

  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

  ---

  

  Josue Guido•50

  @josueguidoPosted about 1 year ago

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

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 1 year ago

  @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

  

  Josue Guido•50

  @josueguidoPosted about 1 year ago

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

  0