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

React, CSS flexbox, CSS grid, Sass

@Abduwaasi

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I really enjoyed building this project and I learned a lot from it, but here is some of the problem I encountered: firstly I'm still struggling with my judgment on this like padding, margin, font size especially how to make all these properties adapt to various screen sizes, currently, I did a lot of trial and error to come up with this result, I will appreciate any explanation and I also welcome any useful article to read on this topic. secondly, I couldn't make my image in the hero section slide to the section after it, I will be glad to receive a response on how I can go about it.

lastly, so far I enjoyed using sass to style my react app because of functions like partials, mixins and automatic vendor prefixes that comes with it, but i recently see people using styled component for styling their app, what are the advantages that comes with using styled component and does it worth adding to my skill set

Community feedback

T
Chamu 13,130

@ChamuMutezva

Posted

  • your main logo is somehow partially cut off on my mobile
  • the h1 element is considered important in a website, it should not be missing.
  • alt values must be descriptive to aid assistive technology users to visualize the message that is being put across. The idea is to announce the content of the message to the user.
  • css nesting, for easy debugging nest pseudo elements. There is no need to have a css like the following nav-center .nav-menu .nav-link{} when you can just write it as .nav-link {}

Good work

Marked as helpful

0

@Abduwaasi

Posted

@ChamuMutezva Hello Chamu, it's really a pleasure hearing a feedback from a pro like you. • I also noticed the logo was cut off after I have hosted the website. I will make changes to it ASAP. I will like to hear from you if there is a way to simulate the behavior or website in mobile phone before hosting. I think the result gotten from the developer console is not always the same with what we have on actual mobile phone. • Thanks for mentioning about h1 I never know it's compulsory to have it before.

• on the css nesting issue, I used SASS to write my css code, all those redundant higher order classes are not included in my code. It's SASS that dynamically added those class in my CSS.

After going through the projects you've done on frontend mentor, I'm convinced that I will learn a lot from you. I will be glad if you can share my a contact too reach out to you anytime I'm having issue. Thanks again for the time you took to review my code.

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