Submitted about 3 years ago

Mobile-first solution using Flexbox and BEM

Alphonzo Escolar• 120

@phonzdev

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey guys and gals! I'd very much appreciate if you would take the time to review my code :) please tell me how I can improve! I want to learn more about best practices and I would want my foundations to be solid. Thanks!!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hey, Alphonzo Escolar! 👋

Just wanted to say, good work on this challenge! 👍 Everything looks pretty great and the card component responds nicely! 🙌

You can style the focused state of the link using the :focus selector, but there's actually already an outline that appears when the link is focused, so I think it's fine (unless you want to style the outline differently or something). 😉

Keep coding (and happy coding, too)! 😁

Szymon Rojek• 4,540

@SzymonRojek

Posted about 3 years ago

@ApplePieGiraffe

Yep you have right. I thought that the outline was styled but it wasn't. Thanks Apple! :D

question => what's about your project, how often you are you adding a focus to a link?

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@SzymonRojek

Haha, cool! 👍

I used to not be very aware of the importance of adding focused states to elements, but nowadays I think I try to add a focus state to anything interactive (including links) so that it's easy to tell when a user tabs on to an element using their keyboard. 😉

Szymon Rojek• 4,540

@SzymonRojek

Posted about 3 years ago

Hi phonzdev,

Well done :D

I have checked mainly your HTML, a few tips below:**

instead of div class="container" you can take the main tag;
in my opinion we don't have to use ul>li in the second box: h2 and two paragraphs will be ok;
add focus to a link;
check a project in your browser by using the inspector on different devices (especially mobiles) => there is a problem with the link;

Ps. Don't forget to upvote any comments on here that you find helpful.

Greetings :D

Alphonzo Escolar• 120

@phonzdev

Posted about 3 years ago

Thanks @SzymonRojek for your feedback! :) With regards to adding focus to a link, do you mean the pseudo selector?

Szymon Rojek• 4,540

@SzymonRojek

Posted about 3 years ago

@phonzdev

@ApplePieGiraffe already mentioned, you do not have to add it because the outline already appears when the link is focused.

Anyway, I can recommend this article => A Complete Guide to Links and Buttons

Happy coding :D

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