Yeison Hernandez• 10
@Yeison2017
Submitted
I wanted to implement the BEM methodology, but I'm not sure if I applied it correctly?
Is there a better way or methodology in naming the variables I use in :root?
Imran Khan
@astr0n0mer
All comments
- Imran Khan• 370
@astr0n0mer
Posted
Hi @Yeison2017, you're off to a great start
Some corrections as you're using BEM
- The
<div>withclass="cardQR__content"is a block and should have its own name, maybe "content" - And then the children will be
"content__title"and"content__info"
You can consider these resources for expanding your knowledge on BEM:
Good luck. Happy coding 😁😀
Marked as helpful
0 - The
- Babatunde• 20
@n-uzumaki
Submitted
Hello and welcome to my attempt at the qr-code challenge. I used bootstrap cards to complete this challenge. I would greatly appreciate feedback on things I could improve! Thank you!
Imran Khan• 370@astr0n0mer
Posted
Hey @n-uzumaki, you're off to a great start
HTML:
- You can replace the
<h5>with an<h1>for better accessibility - Do the styling in CSS
CSS:
- You can explore CSS naming conventions, namely BEM. This will make your code more readable for yourself and for others. Don't get me wrong, your code is readable even now, but BEM or any other convention for that matter, will definitely be helpful
Happy coding. Good luck 😁😀
Marked as helpful
0 - You can replace the
- Hồ Đắc Minh Quân• 110
@tetinhxuan
Submitted
The first project I make with API.
Imran Khan• 370@astr0n0mer
Posted
Hi @tetinhxuan, that's a fantastic solution
Just a small suggestion, you can set the witdh of your
<main>element aswidth: min(90%, 600px);. Reference tomin()This way, it will get you rid of the media query and will provide more responsiveness to your page
Happy coding 😁😀
Marked as helpful
0 - Axel Quintana• 120
@Leracius
Submitted
Imran Khan• 370@astr0n0mer
Posted
Hello @Leracius, nice work on your solution.
Here are some areas that you might want to improve upon
HTML:
- While it would make sense wrapping the component in a
<section>in a bigger project, but for this challenge, you can replace the<section>tag with<main>tag
CSS:
- Rather than using
widthdirectly, you can set#container'swidth:min(95%, 570px);. This way, it will always be 95% of the parent's width, and will take 570px as the maximum width. - In general, try to avoid giving width to block level elements
- This course by Kevin Powell would be helpful in clearing out some responsive layout problems
Well done, it's a great solution 😁😀
Marked as helpful
0 - While it would make sense wrapping the component in a
