Responsive page with Html & Css3 Made with Care and Love ❤👌

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Fatoh,

  This is a good solution - well done! I have noticed a few things however I wanted to highlight below when refactoring:

  • The page isn't fully responsive unfortunately - between 980px and 401px you have compression of the image and overflow of the right-hand side content. I'd suggest reviewing this using your dev tools responsive device viewer and changing the direction/layout for these widths
  • Following on from this, avoid setting fixed width values to child or parent elements (either explicit, or as %) as these cause layout and spacing issues and force content to adapt in not ideal situations. You should have a fixed max-width value (in rem) and a width: 100% on your parent container and let the elements in them occupy the space they need naturally
  • You also need to take your <header> outside of your <main> as this is semantically incorrect
  • Your font-size should always be in rem for accessibility reasons. Here's a good article by freeCodeCamp explaining this in further detail Link
  • I wouldn't say it's necessary to have an absolute positioning for the social icons. Since this is in a footer, you could use either flex or grid to align these to the right and they will respond much better as the viewport width changes
  • The icons, used here as Font Awesome classes, should be inside <a> tags as they link to an external site, preferably also within individual <li> elements as part of an unordered list (<ul>)
  • The images should ideally be managed in the <picture> element in your markup instead of using CSS, with paths to the separate files for desktop and mobile and a viewport width of when the respective ones should appear. Here's a link from MDN explaining this in further detail Link
  • Always locally host your Google Fonts for privacy and performance reasons. Here's a good video showing how to do this Link
  • Also, I couldn't see your stylesheet in your GitHub code (I could only see this through the browser console) - may just want to check this on your end so other developers can look through it easier

  Hope this helps!

  Marked as helpful

  1