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

CSS Grid & CSS Flexbox

@MedJelidi

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Learned a lot about image positioning

Community feedback

P
Chamu 12,970

@ChamuMutezva

Posted

Greetings Mohammed

  • an alt value has to be descriptive for the benefit of assistive technology users, decorative images should have an empty value
  • use semantic html, an image cannot serve the same purpose as an interactive element such as a button. <img src="./images/icon-hamburger.svg" alt="menu-icon" class="menu-icon" /> - this hamburger menu is not accessible to keyboard users.
  • the navigation elements can be positioned with css to their correct space, creating a separate navigation for desktop is an overkill for this project. Responsive design should allow that transition from one device to another without creating extra duplicate html elements.
  • heading elements must follow a sequential order with an h1 being your first heading. For best practice use only one h1 element per page.
  • images <img alt="orange" class="gallery-orange" /> should have an src attribute
  • the social images in the footer are supposed to be links for social media sites, there are not just images
  • for font-sizes use rems instead of fixed values like px. For users who want to customize their font-sizes , px values remain unchanged

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