Looking to hire developers?
I thought I could finish this in a few hours, so I thought then why not make it IE10 and IE11 compatible and why not not use flexbox and grid. I know it's kinda stupid. But, that's what I did. But it took me more than a day to complete it. So um... there's that. And oh Now I know that I need to be more grateful to flexbox and other modern css thingies. Gosh, without them things would be so damn hard. You have no idea how many hours I spent thinking about how to make the card both horizontally and vertically centered. No joke. However, I learned a lot in the process that I'm glad about. Like:
tabindex to make unfocusable elements focusable.<img>, <br> and <hr>background-position property in css. Thanks @Atharva-Shandilya for that. Hope it's okay that I snooped around your Github repo and profile without permission.top:50% left:50% transform: translate(-50%, -50%) trick works.I don't have a specific question to ask but, any feedback on the project or code would be greatly appreciated 😊.
And yeah there are some animations too!
@adnan-amin
Posted
"And finally I learned How the top:50% left:50% transform: translate(-50%, -50%) trick works."
Yeap! I didn't understand how that works for a long time. I found it very confusing at the beginning to understand. But now, after understanding what is TRANSFORM ORIGIN it seems like it makes sense.
Great animation on document load! Kudos!!
Marked as helpful
@FarisPalayi
Posted
@adnan-amin 😀👍
Whoa, IE10 compatible?! 🤯
Well done! Serious kudos for that 😉
However, there are some minor issues with your code that you should still address:
80k? No. So they shouldn't be headings. They need to be in the same meaningful element as the word that accompanies them and gives them meaning. Try span to control styling instead26 in a before pseudo element. That actually needs to be in the HTML.That's all from me. Still, very impressive that you've taken the time to do all this
@FarisPalayi
Posted
@grace-snow Thanks for your feedback! Appreciate it.
Quite honestly, HTML Semantics always confuses me, So most of the time I just go with whatever pop into my mind at that time. I think it's time for me to get serious about semantics.
And User Accessibility is something that I haven't really started getting into it. So, about tabindexes and pseudo-elements, I never thought it in that way.
I was going to learn BEM, now I think about it, accessibility is more important, So I'm gonna learn that next. Thanks for making me realize that.😀
@Atharva-Shandilya
Posted
I too discovered it from snooping around in someone else code :D
@FarisPalayi
Posted
Thanks anyway 😃
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
