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

Responsive desktop/Mobile site using HTML/CSS/JS

P

@alanjheffernan

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


Had a couple of problems,

  1. Changing colours of SVG images

  2. Getting the background image in the header to overflow and look good when changing screen size

  3. Placing the footer "Request invite" div content to the end of the div

Any help/feedback would be appreciated, Thanks!

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge, Alan!

Just a quick heads up, the vh units are what's throwing off the solution screenshot at the moment. As a rule, I would recommend only using vh units in very rare and very specific instances. This is because you're sizing the element based on the viewport instead of the height of the content inside, which can lead to unintended UI issues. As an example, if you look at your preview, keep the width of the browser at full-width but start reducing the height you'll see that some of the content disappears because the section isn't tall enough. Instead, don't set an explicit height on the parent and then just use padding and margin to space out the content within it. This way the height of the parent will be flexible based on the height of the content.

Here are some pointers with regard to your issues:

  1. You can embed SVG code in the HTML. Then you can treat it like a regular element. So you can change things like the fill color.
  2. If you use background-size: 100%; you'll see it shrinks slightly as the screen gets smaller.
  3. I'm not 100% sure what you mean here. Looks fine to me!

Don't forget to use alt attributes in your img tags to make them accessible to screen reader users.

Let me know if you have any questions. Keep up the good work!

1

P

@alanjheffernan

Posted

Hi Matt,

If I'm not wrong you are the creator of this wonderful website so it has definitely made my day knowing you took the time to look at my solution and give such detailed feedback.

As a back end developer self-teaching myself the front-end languages the this is the type of feedback I get when I commit my code for review to the senior developers. Little things like knowing to only to use VH units as best practice are much harder to pick up as I don't have the same feedback loop as I do in work. This feedback is invaluable!

Looking forward to the launch of the subscription model and to see how this community grows over time!

Thanks again! I will be sure to keep your comments in mind for future challenges!

1
T
Matt Studdert 13,611

@mattstuddert

Posted

@alanjheffernan I am indeed! 🙂

I'm happy my feedback helped. Yeah, I'm excited to launch the subscriptions. There will be loads of great features that it will enable us to add in the future as well.

Hopefully, the community will continue to grow and help developers improve their skills!

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