Interactive rating component using vanilla Front-end tech stack

Hi Lucas, well done for your first challenge! To shift the numbers, maybe you can try adding a padding-top: 1px (or whatever value works for you) to your .ratings__rating selector.

Regarding BEM, it feels like people all do things a little differently depending on what suits them best. For me, I normally try to keep things short and readable, and I try to avoid repetition just for better readability. For instance, since there's only one component here, I'd probably just use component instead of rating-component, and then the children would be component__icon, component__title, component__ratings, etc. For the ratings, I might either use component__ratings-num or ratings__num. What helped me when I first started learning BEM was videos/tutorials from Kevin Powell and Gary Simon. Even though I've been using other systems, I still use BEM for naming, and I think the more you use the system, you'll be able to adjust accordingly.

Once again, good job, and welcome to Frontend Mentor!

Good job on completing the project. Quite honestly I don't know if I should give you advice or not because you have done better than me in terms of accessibility and html issues.

Well I am not perfect in BEM and I have been struggling with it, but reading this BEM documentation should help. Now this is around 10 -30 minutes read depending on how fast you digest content (Link: https://en.bem.info/methodology/html/). After reading the documentation you will have a very solid understanding of BEM.

The link I sent is for BEM regarding HTML; however, there is BEM regarding JS, there is file structuring, etc. Basically this website will help you organize your projects, hence give them a read as well if you wish.

Bonus tip: Use BEM with Sass / Scss and you will see how quick and organized are your styling flies.

-> When it comes to circles and centering content in them: 1) I create a square. Meaning make sure the width and height are the same size. 2) Border radius the square to its max. Meaning make sure the border radius of the square is a huge number. There is a certain threshold for border radius that if you pass the border radius will stop been bothered. The bigger the number that more sure you will be about passing that threshold. 3) Flex the square (circle after step 2), justify the content to center, and align the items center. Everything inside that circle will be vertically and horizontally aligned.

Anyways congrats on completing the project.

Hello Lucas,

I would say this is a great beginning for Frontend Mentor. As you have noticed there are plenty of new challenges to be soluted. Regarding that, I would say that this place is great to create one of your portfolio projects.

If I was in your place, after I've done javascript, I would focus on the style of the app, or even before javascript. You can follow the style guide that is given to you.

If you see this feedback as helpful, please leave a mark down there.

Regards, Ermin.

Excellent job on this challenge!

Hope it helps:)...don't forget to mark it as helpful 👍