Solution with Mobile-first workflow, SASS, BEM and CSS transitions

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted over 2 years ago

  Nice !

  I have some suggestions:

  • You should put the content in a container which is centered so you keep a good consistency accross all screen size.
  • The background image at ~1300px width does not take all the height.
  • at ~660px content overflow the screen.
  • For the nice scale animation transition, dont forget that if you want in and out effect, transition must be applied to the element not only when it is hovered.

  This part only allow the in effect not the out if you know what i mean.

  .section__button:hover {
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    transition: -webkit-transform 200ms ease;
    transition: transform 200ms ease;
    transition: transform 200ms ease, -webkit-transform 200ms ease;
  }
  

  If you want the out effect, put transition in .section__button

  • Transition all is not recommended, instead you can have multiple keywords for transition: color 150ms, background-color 150ms, transform 150ms or

  transition-property: color, background-color, transform;
  transition-duration: 150ms;
  

  Marked as helpful

  0

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @ChaosDynamix Thanks for your suggestions! They are really helpful :).

  I did this solution in a really messy way, and I wouldn't do such a bad solution these days, but I cloned the repo and started improving it. It was hard to make it better for larger screens because I designed my markup poorly, but I did what I could to improve it a bit. The transitions are fixed and I remember this was one of the first projects I tried to add transitions in, so yeah. I'll definitely be using transition-property: more often as it's better for performance and code readability.

  Thanks again for your tips! Have a great day!.

  0

  

  John Mirage•1,590

  @john-miragePosted over 2 years ago

  @GrzywN i had the feeling that was one of your first,

  Its hard to maintain consistency across all the project when we learn, I have a new workflow now, i work on my current project, and if i have a lack of motivation, i go back on my old projects and update them, so every projects get the same level of "what i know".

  I always have that fear of someone looking to hire me and look on a old project to define my skills...

  0

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @ChaosDynamix Yeah, that's right. I'll probably start doing the same thing once I finish all newbie challenges.

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  hay! Karol Binkowski Nice work

  0