Submitted over 4 years ago

CSS Grid, Flexbox and Bulma

Victor Villacis• 105

@Victor-Villacis

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Hey Victor, awesome work on this solution! As @gretagr mentioned, your codebase is really clean and well structured. Bulma is a really nice UI framework.

I've got a couple of tiny pointers after taking a look at your code:

You're using multiple h1 elements on the page. Although this is technically valid HTML, I would recommend against it for accessibility reasons. Screen readers will typically use the h1 as the main page title, so having multiple can confuse the content hierarchy. I would stick to a single h1 on any page and then use other heading levels to create a well-structured content hierarchy.
The alt text for all of your images is currently just the word "Image". It's a good idea to get into the habit of writing meaningful alt text for people using screen reader software to access your content.

I hope you find these tips useful. Let me know if you have any questions. Keep up the great work! 🙂

Victor Villacis• 105

@Victor-Villacis

Posted over 4 years ago

@mattstuddert thanks for looking it over and pointing out my errors. I will def update and redeploy. Much appreciated. I def will be more aware of screen readers

Greta• 340

@gretagr

Posted over 4 years ago

Such a clean, beautiful solution! It makes me wanna try Bulma! Did you try it for the first time in this project?

Greta• 340

@gretagr

Posted over 4 years ago

@Victor-Villacis I'm glad it helped :) Actually I'm always in doubt when it comes to adding images as backgrounds. I don't feel like it's the best idea when the picture is not meant to be a background. But sometimes it's just that or not so perfect scaling...

I would like that very much! I'm actually looking for opportunities to work on a project with a team :)

Greta• 340

@gretagr

Posted over 4 years ago

@Victor-Villacis well, I think the result is amazing whatsoever.

I did my project with flex-box only, but I think your code is way cleaner. I'm not very comfortable with frameworks yet. I'm currently learning Bootstrap, but I'm going to try Bulma after that, that's for sure :)

Victor Villacis• 105

@Victor-Villacis

Posted over 4 years ago

@gretagr Thank you so much - Bulma seems to be so much more cleaner, however I am sensing it is not as powerful as bootstrap. Perhaps I just need to learn my way around more Bulma. I tried tackling the next project (Base-Apparel) with it and got hung up. I actually looked at your code for some help and realized I was not setting my image to background. So thanks for that lol :)

Let me know if you have some time, perhaps we can code up the next project together using Bulma.

Victor Villacis• 105

@Victor-Villacis

Posted over 4 years ago

@gretagr Hey, thanks! Yes this is the first time I used Bulma, I did however run into a problem with there column classes. That is why I used Grid and Flex. What was your approach?

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