Responsive Landing page using CCS Flex-box and BEM Method

Solution retrospective
I learned to use the BEM method for declaring component classes. I used semantic tags based on my own judgment.
I think I should improve my use of CSS units; I believe I could have used percentages instead of rem, but I'm not so sure. I also would have liked to use Astro.
What challenges did you encounter, and how did you overcome them?The biggest challenge was understanding how CSS selectors work. It’s still a bit difficult for me, but I’m starting to like how I’m using them.
What specific areas of your project would you like help with?I’d like some help with using Figma. I have no idea how it works. I’ll try to learn on my own, but it’s complicated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @UmairFaiser
Whats the BEM method?
- @thisisharsh7
Great job on completing the challenge! Using BEM for class naming is a solid choice for maintainability, and your semantic HTML (
<article>
,<h2>
) enhances accessibility.Strengths:
- BEM Usage: Classes like
.qr-component__image
are clear and consistent, improving readability. - Responsive Layout: Flexbox ensures the card is centered and works well across devices.
Some suggestions:
- CSS Units: Using
rem
is actually better than percentages for font sizes and spacing, as it’s relative to the root font size and more predictable. Stick withrem
but ensure consistency (e.g.,1rem
vs.4%
for border-radius). - CSS Selectors: Simplify selectors like
.qr-component > *
to avoid unintended effects; target specific children instead (e.g.,.qr-component__title
). Practice specificity to gain confidence. - Figma Help: For Figma, start with their tutorials (figma.com/resources/learn-design). Import the Frontend Mentor design file, inspect elements for sizes/colors, and use the layout grid for precision.
Solid effort- HAPPY CODING!
- BEM Usage: Classes like
- @Jhonny10101
je vais m'adapter. Je pense que je devrais améliorer mon utilisation des unités CSS particulièrement des unités relatives.
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