Submitted over 2 years ago

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

#accessibility#bem#sass/scss

Ken• 4,915

@kens-visuals

Preview site View code

This is a solution for...

Project tracking intro component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

In the Blogr Landing Page, there were sections similar to this project. The image was slightly out of the screen and when I was first implementing it, the part was a bit frustrating for me. However, that experience helped me to build this project a lot faster and a lot cleaner. This was the last small project of this level, the rest are whole landing pages. And I've got only 5 projects left to finish this level completely. I'm going to finish them by the end of the year.

Leave your thoughts in the comments' section 👨🏻‍💻 Cheers 👾

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted over 2 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

Ken• 4,915

@kens-visuals

Posted over 2 years ago

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

David Turner• 4,110

@brodiewebdt

Posted over 2 years ago

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

Ken• 935

@kenreibman

Posted over 2 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?

Ken• 4,915

@kens-visuals

Posted over 2 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 👾

David Turner• 4,110

@brodiewebdt

Posted over 2 years ago

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

David Turner• 4,110

@brodiewebdt

Posted over 2 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.

Ken• 4,915

@kens-visuals

Posted over 2 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.

Please log in to post a comment

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