Responsive Landing page using flexbox

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hello, Nathasha! 👋

  I'm very impressed with the effort that you put into writing that article on how you completed this challenge! It's incredibly detailed and informative! 🙌

  I noticed, however, that you shared the design files for this challenge in the article, which is against our usage policy (since those design files are premium files for PRO members only). We kindly ask that you take those down and only share the screenshots of the design (such as the JPGs provided in the starter files). 🙂

  Otherwise, you've done a great job on the challenge itself, as well! A few suggestions I have are,

  • Adding favicon to the site. There should be one in the free starter files for this challenge that you can use.
  • Adding min-height: 100vh to the body to ensure that the page is always at least as high as the viewport (and there is no empty space beneath the content of the page).
  • Setting the `alt` text for the image to an empty string so that it will be ignored by assistive technologies (since it isn't very important to the content of the page and doesn't need to be read by screen readers).
  • Adding some screen reader-only text to the social media links or adding an `aria-label` attribute to them instead to make sure they can be identified by screen readers.
  • Specifying values such as `margin`, `padding`, `font-size`, and more in a responsive unit such as `em` or `rem` (not `px`, which is a fixed unit), to ensure that changing the font-size of the document causes the rest of the site to scale up/down (which is important for accessibility reasons). To learn more about `em` and `rem`, see this.

  Hope you find these suggestions helpful. 😊

  Keep coding (and happy coding, too)! 😁

  1
• 

  Nick Williams•320

  @nickfwilliamsPosted over 2 years ago

  Hi Nathasha! This looks great, very similar to the final design. The major thing I noticed that looked out of place is your background image. It's currently too small for larger screens - the issue here seems to be that you've applied the url to the container div, rather than the background. Try swapping it over and see what happens. All the best!

  0