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

HTML, CSS, JavaScript

Ali Elmala 155

@alielmala

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


could you tell if there is a way to improve the code or the design ? thanks in advance.

Community feedback

Ahmed Faisal 5,095

@afrussel

Posted

Hi, Nice work. There are some section need to improve.

  • If you want you can use a library named http://flexboxgrid.com/ to make you site responsive.
  • There are so many white space. Please try to reduce this.
  • Use main for this section name. Now you are using <section id="menu">
  • Try to use class not id. Using class you can use it many times but id is using for single time

Happy coding. Hope that this will helpful for you.

Marked as helpful

2

Ali Elmala 155

@alielmala

Posted

@afrussel thank you for your feed back. I used flexbox already and for the white space I did it as how it look in the design. take a look at preview site. thank you again :)

1
P
Chamu 13,050

@ChamuMutezva

Posted

Greetings.

  • well done , your site is responsive.
  • You have created a custom hamburger using divs and spans which is awesome but then you have to look into wai-aria attributes to allow people who rely on assistive technology to use your site. And that goes again to the closing menu button
  • Do not use more than one h1 element per page ,it does not cause errors but is considered bad practice, see this article for more information headings
  • Check also the following article on responsive images. The method you used below is not recommended. Read about srcset and picture element
<img src="assets/image-transform.jpg" alt="" width="50%" class="laptop-design-img">
            <img src="assets/mobile/image-transform.jpg" alt="" class="mobile-design-img">

Marked as helpful

1

Ali Elmala 155

@alielmala

Posted

@ChamuMutezva thank you very much but for the img part, I did this because in the design there were some imgs for mobile design which were cropped. thank you again :)

0

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