@solvedbiscuit71
Posted
Hi Athira, Good work on your first angular project in frontendmentor!
I have some tips to improve your code,
- wrap everything inside the body with a
<main>tag to avoid accessibility issue. - use
<div>tag instead of<span>for element with class "detail","eth","time" - use
display: flexwithalign-items: centerin "eth","time" and footer to vertically center the image and text. - add the hover state for
<span class="name">element. - add
min-height: 100vh;in<main>tag to vertically center the card.
Addressing the use <div> instead of <span>, we generally use <span> as a "leaf node" means that it doesn't have other childNode except the textNode. it's a best practice
Hopefully you find these suggestion helpful 😊
@athirasarman
Posted
@solvedbiscuit71 Hi, Thanks for the response. There is no accessibility issue as everything is wrapped inside <main> tag. Whatever HTML issues I am getting issues because of ng-content which is getting added by angular. How to get rid of that?
@solvedbiscuit71
Posted
@athirasarman you are right i didn't notice it in the first glance but, getting the accessibility issue for not wrapping everything in main tag is a common thing that people do.
Anyways, about the HTML issue idk because i haven't tried Angular myself try reaching out the slack community for further help.
Marked as helpful
@athirasarman
Posted
@solvedbiscuit71 Sure. Thanks
