Project Tracking Intro Component with SCSS, CSS Animations, and BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, another really nice solution from yours. The desktop layout looks really great, site is responsive and the mobile state looks really great.

  Extra props for manually adding those animations for each of the rect. It suits really well on this layout.

  Others already gave their feedback on this one, just going to add some suggestions:

  • On the header, the hamburger-button should be the one using the display: none and not the img inside it because it will still allow the button to be traversed. Even though at desktop, you can tab on it.
  • Inside the main tag, your markup should be making the h1 as the first text content of the main. Right now, the first text-content is the new word. So when navigating using landmark, my screen-reader will announce new instead of the h1. You should swap the h1 with the div wrapper of the 2 p tag. Then you could just use grid on the .main__content so that you could place each item properly like on the design.

  Just those only. Again, this is really nice and great job again on this one.

  Marked as helpful

  1

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted almost 3 years ago

  Hey @pikapikamart thanks for the nice words and suggestions 👌🏻

  1

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @martpika I'm saving all these tips you've been giving out in a text file for future reference. Thanks.

  0
• 

  Ken•935

  @kenreibmanPosted almost 3 years ago

  Looks so clean! Great job.

  What did you discover to keep images from spilling out of the screen that you implemented on this project?

  1

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted almost 3 years ago

  Thank you @lmaoken 😇

  What it did is, instead of using a container and giving it a width and max-width I gave a padding to the header and gave the same padding, but only to the left side of the text, so they always have the same distance. Since there was no container, the width of the viewport was 100%, so all I did was increasing the size of the image and gave overflow-x: hidden to its parent div, so it doesn't have any side scrolling.

  I hope this was helpful 👨🏻‍💻 and thanks again for your continuous support. Cheers 👾

  1

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @kens-visuals That is a great tip. I struggled a little with that. I will have to try that in the future.

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  This is excellent. I love the animations on the screen. I just did that one a while ago. I couldn't the page to fill up the screen the way I wanted. Yours looks so much better.

  1

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted almost 3 years ago

  Hey @brodiewebdt 👋🏻

  Thanks for the compliment, although the layout looks fairly simple, it took me a while to figure out how set it up the way I want it to be, so that it is easily maintainable and responsive.

  1