@mandrisic
Latest solutions
Bookmark Landing Page - HTML5, SCSS, Flexbox, Grid, Responsive.
#sass/scssSubmitted about 1 month ago
Latest comments
- @FernJBatista
Great work!
- @dinixtusWhat are you most proud of, and what would you do differently next time?
I made a lot of transitions, those look awesome.
@FernJBatistaGood work here!
Your layout looks perfect!
Some things you might want to look into is adding properties to your transitions. They do go in and out, but if you add an opacity transition to the text too it will look more natural. The other one is just a preference, but I think the buttons look a bit too big and stretched. I would set them to 1/1 aspect ratio and make them a tiny bit smaller, but that's up to me.
Other than that, nice one on this project.
Keep doing cool stuff!
Marked as helpful - P@JairRaid@FernJBatista
Great work!
- P@toshirokubotaWhat challenges did you encounter, and how did you overcome them?
I applied BEM methodology on my style. This was my first time to use BEM and I am not certain if I did it correctly.
What specific areas of your project would you like help with?I appreciate any feedbacks on the design and style. In particular, I would like to know if I used BEM properly.
@FernJBatista🚀 Great job on this NFT preview card component! Your layout looks fantastic, and you've done an excellent job with styling. Here are a few areas where you nailed it and a couple of suggestions for improvement:
✅ What you did well: Solid layout & spacing – Everything is well-aligned and spaced properly, making the card visually appealing. Hover effects – Love the subtle hover effect on the NFT image and the text; it adds a nice interactive touch. BEM Naming – Most of your class names follow the BEM methodology, keeping your code modular and readable. 🔍 Suggestions for improvement: 1️⃣ BEM Consistency – Some class names, like .content__detail--cyan, are being used for an element rather than modifying the whole block. It would be better to use .content__detail-item--cyan to follow proper BEM conventions.
2️⃣ Semantic HTML – Instead of using a <div> for .hero, consider using a <figure> element since it represents an image with potential captions.
3️⃣ Global Class Names – The .body and .main classes are a bit generic. Renaming .main to something like .nft-card would make the structure clearer and avoid potential conflicts in larger projects.
I would say your solution is great! You're doing great with the BEM class structure and semantic elements, these are just some suggestions to make it more maintainable and scalable. Nice one!
Marked as helpful - @mike15395What are you most proud of, and what would you do differently next time?
I was lot of work and took me 4days to complete the challenge.
What challenges did you encounter, and how did you overcome them?lightbox was quite challenging and lengthy.Menu sidebar for mobile and tablet was quite tough. I overcome those challenges by studying those CSS properties well and applied it.
What specific areas of your project would you like help with?Menu-sidebar for mobile and tablet CSS part and header nav elements hover orange border on bottom. Code got too long specially CSS part,help me optimize it. Any other improvements are highly appreciated.
@FernJBatistaReally good work, there are a few improvements you could do to the project though.
- Increase and decrease buttons shouldn't have the hover effect changing the background color.
- The header/nav doesn't flow with the rest of the content on different viewport widths.
- The cart popup is showing a bit weird behind the main image in some viewport widths.
- Very small, but I don't think you've used the fonts set for this project.
- @abdulrrahmannWhat are you most proud of, and what would you do differently next time?
I align all items using grid and flexbox.
What specific areas of your project would you like help with?Feel Free To Write Anything That May Help Me Improve My Skills.
@FernJBatistaReally good job here!
