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

incomplete solution,insure landing page

Vinitβ€’ 90

@vinitrai

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Dear All, This is an incomplete project,I struggled with the background patterns and trying out DRY principles,the code got messes up and so I decided to try again with a fresh mind. The code is so much repeated and I really wanna keep my code DRY. I will try to do better in the next challenge.

Thank you

Community feedback

Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Hello there,

I feel your pain! If you wish to learn DRY like I did Points..

  • learn Sass.
  • learn how to make utility classes.
  • learn partials in Sass and how to use variables and mixin and function in Sass

If you can tolerate someone's code then review my code... I know you think it's not worth it but I believe you will learn because I fully use DRY using Sass

You may watch Sass tutorial on freecodecamp yt channel

Hope it helps πŸ™‚

0

Vinitβ€’ 90

@vinitrai

Posted

Thanks for the suggestions @RocTanweer .I will definitely try to follow your steps.

0
P
Daveβ€’ 5,245

@dwhenson

Posted

Hey @vinitrai don't worry - we are all learning here. Good on you for giving this one a go! I just finished it too and really struggled with those pesky background images too. I always save them until last to deal with, but I'm thinking that might be a mistake...

Once thing that has really helped me move towards DRYer code is the use of 'utility classes' in my CSS. This is not at all scary and is really just a class that you can then add to every element you want it to have the same effect on.

A really useful one for example is the container or wrapper. You just create a .container declaration with padding-left and padding-right and then add it to every element you want a little padding around.

If you combine this with slightly more complex things like .flow > * + * (maybe google that one) you'll find yourself writing much less code, being able to fiddle with spacing much easier and be able to enjoy seeing HTML and CSS play nicely together!

Keep up the good work.... Cheers!

0

Vinitβ€’ 90

@vinitrai

Posted

@dwhenson Hey @dwhenson thanks for the support,yes I thought of adding those background patterns at last and I struggled.I will learn about implementing 'utility classes' and combinators and better selectors. .flow > * + * ,here you mean to say that all the direct children of some container with class of 'flow' those have previous siblings that are again direct children of the container. I m not sure what I understood from this style declaration but yes I will try to explore the things and learn . Thanks again.Cheers

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