
Fernando Batista
@FernJBatistaAll comments
- @mandrisic@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!
- P@olaide-hok@FernJBatista
Hey there, great job!
I really like you got it to work to update as the user interacts, so error messages disappear as the user corrects any errors.
You really got it really good even down to the scale of the elements, nice!
There are a few things you could improve to make this better in case you're interested:
- The radio buttons should not be able to be active both at the same time. And also, I couldn't unselect a radio button if I activated it.
- The error messages move the elements, it's not necessarily bad, but usually you should keep the interactive fields static and make only the error messages move or have animation, this way instead of everything calling the attention of the user, only the errors would (because they're the only ones moving, so they're easier to detect).
- When the submit is successful the message at the top has a weird looking text saying "success check". The rest of the message is good, but that just seemed weird.
You did excellent here all around, I just wanted to mention these small tweaks since it's what is commonly used.
Keep up the good work!
- @RohloffmeisterWhat are you most proud of, and what would you do differently next time?
I had a lot of problems with the accessibility because i forgot to include it when i was starting and i wasnt realy able to include it after so i didnt do a lot for it now. Also i had a lot of problems with git.
@FernJBatistaHey there, very good work!
Really good solution, what you mentioned about accessibility is something that tends to happen. I myself remember mid-way through to keep it in mind!
The one thing I noticed maybe you should also keep an eye out is that the cursor doesn't change to pointer when hovering over the elements that are interactive. It's just somethign to keep a look out for too since it helps users have better context and experience when using products!
Keep up the good work!
Marked as helpful - P@NavarroEmiliano@FernJBatista
Hey there, great work here!
One very small thing, the cursor doesn't change when hovering over interactive elements. You might want to make it so just to make it more intuitive and keep up the standard for interactive elements.
Keep it up!
Marked as helpful - P@HelewudWhat challenges did you encounter, and how did you overcome them?
The state management turned out to be quite a chore, cause of targeting different edge, cases but I am glad I found my way around it.
@FernJBatistaGreat job!
The only issue I found is that pressing enter on the inputs shows error messages. Clicking otuside the inputs is what triggers the changes.
Just thought you could look into that for better use.
Nice one, keep up the good work!
- @Atomico333@FernJBatista
Really good, keep up the good work!
- P@Helewud@FernJBatista
Great job on this project, flawless!
- P@carlosad90What specific areas of your project would you like help with?
I could not make the image fit like in the design, any advice about it will come in handy.
@FernJBatistaHey Carlos, nice job!
Your code is well-structured, and I really like the CSS variables you used—I should put them into practice more myself!
I’m not sure how to answer your question specifically, but I just wanted to suggest two small accessibility improvements that might be helpful to keep in mind for future projects:
- Adding aria-label attributes to buttons, especially the share button, can improve screen reader support.
- Making alt text more descriptive (e.g., instead of just "drawers," briefly describing what’s in the image) enhances accessibility and usability.
These small adjustments make your code more inclusive, improve user experience, and even help with SEO and web standards.
Keep up the great work!
Marked as helpful - @yuriinyk@FernJBatista
Hey! Awesome job on this project! The layout looks super clean, and everything is well-organized, which makes it really easy to navigate. I love how everything is structured—it feels really well put together.
One thing that could make it even better is making sure the background container fills the whole screen. Right now, it stops a bit short, which leaves some empty space at the bottom. Extending it would make the design feel more complete and balanced.
An easy fix for this would be adding min-height: 100vh; to the main container so it stretches to fit the full viewport. And if you're using flexbox, setting display: flex; align-items: center; justify-content: center; on the parent container could help center things nicely.
Overall, great work! Excited to see what you create next! 😊
Marked as helpful - P@Mustapha909@FernJBatista
Looks good! The icons are not visible, but other than that masterful work with that grid!
- P@kephaloskWhat are you most proud of, and what would you do differently next time?
Tried Mobile-First-Approach for the first time.
What challenges did you encounter, and how did you overcome them?Used clamp() the first time and it scaled strongly up with given default case clamp(1rem, 0.8rem + 1vw, 3rem);. I scaled it down to clamp(1rem, 0.5rem + 0.5vw, 3rem); to match the ux design.
What specific areas of your project would you like help with?n/a
@FernJBatistaReally good solution! You have very well organized code.
The only observation I've made is that you've put a header element inside the main for the card. I'm not entirely sure about this, but I believe it takes away from the semnatic system a bit. I might be mistaken, but overall it looks really good!
Marked as helpful - @BuraYu@FernJBatista
Hi there!
I think you did great for this project!
The only suggestions I'd have for you is using semantic HTML. For example, you used a div and gave it the class "main-container", but you could just use the <main> tags and that also helps the browser understand where the main information is.
The only other thing I noticed is that you didn't use heading hierarchy, so you used h4 and h5 without using any of the higher hierarchy headings. It's good practice to have an h1 always and then follow the chain of headings. This was weird for me at the beginning, but it's more about the HTML structure than the styling.
Other than that, I think you did really good on this project!
Keep it up, happy coding!
Marked as helpful - @RevadiSundaram@FernJBatista
The end result looks really good!
I would recommend you some things though.
-
Try to use an organized heading structure, you used an h4 here for the title, but it would be better to use an h1 and style it as you need.
-
Look up text size guides, in this case the text could be a bit small (I know, I know, one pixel is a bit too naggy). I think a good starting point is that paragraph texts are usually 16px or 1rem, from there you can also give your headings bigger size depending on their hierarchy.
Other than that you did great!
Happy coding, keep it up!
-