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

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

Fatoh 100

@fotouh


Design comparison


SolutionDesign

Solution retrospective


This challenge was so easy and nice to Do and website design and color were amazing and excited 🤩 Bs Fatoh Mohamed 01111389125

Community feedback

@asbhogal

Posted

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

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