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

Desktop first landing page and develop with Bootstrap 5 & SCSS

@developedBySwan

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


-Issue I tried a lot. But page is not responsive all of the device. But I tried but to better UI at normal & large desktops and normal phone screen size. Some of the radio have more space have existed or some images is not looking good at some kind of device size.

  • Openly welcome all of your feedback and suggestion.

-Thanks.................

Community feedback

@AbNassif

Posted

1- In the Egg Image section, you can actually just add a width of 50% without a height property. These images are specifically designed to take up the spaces in the design. So giving it a width of 50%, would mean "assign the height of the image meanwhile respect the width of 50% of the image",.

2- Really loved the initiative you took with the fixed nav header, but the background should activate faster as the link text is overlapping with the main header.

3- The background of the footer is grey instead of the greenish color displayed in the design, and it's not your fault as it wasn't displayed in the "Style-Guide", but in these cases (and real-world as well), you could just use a website like "https://imagecolorpicker.com/en" to get the color displayed in the design.

4-You forgot to add a hover effect to the button in the nav using :hover in css and including a transition for it to smoothly change.

5-The nav bar is opening on it's own when the viewport get's small enough.

Remark: You should practice responsive units to reduce code, and get comfortable with flexbox and css grid offered by CSS. Learning a Css framework without mastering it first will really frustrate you and prolong the journey ( Don't ask me how I know that).

Last but not least, great job! You did quite well, don't forget to keep on practicing and hit me up if you have any questions(Would love to have a coding buddy!).

Marked as helpful

1

@developedBySwan

Posted

@AbNassif Thank those help me a lot. without your comment I can't know what need to learn. Thank for interesting my work and giving suggestion. see you again in another challenge buddy.

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