In this blog post, you will find the HackerRank CSS Skill test certification Solutions. The answers to questions are:-
HackerRank CSS Skill Test Certification Solution :-
Q1 :- CSS Animation
❌ .greyBall:hover {transform: scale(2); animate: 500ms;}
✔️ .greyBall:hover {transform: scale(2); transition: 500ms transform;}
✔️ .greyBall:hover {transform: scale(2); transition: 0.5s;}
❌ .greyBall:focus {transform: scale(2); transition: 0.5s;}
Q2 :- CSS Ellipsis
❌ ‘object-fit: contain;’ does not preserve the aspect ratio of the image; it stretches the image to civer the entry width and height of the container.
✔️ ‘object-fit: contain;’ preserve the aspect ratio of the image and makes sure no clipping happens to the whole image.
✔️ ‘object-fit: cover;’ avoids the image getting squeezed, but it could end up clipping the image.
❌ ‘object-fit: cover;’ avoids clipping the image by sacrificing the aspect ratio.
Q3 :- CSS Object-Fit
❌ {white-space: pre-wrap; overflow: ellipsis; }
❌ {text-overflow: ellipsis; white-space: wrap; visibility: hidden;}
✔️ {white-space: nowrap; overflow: hidden; text-overflow:ellipsis}
❌ None of the above
Q4 :- CSS Text-Coloring
❌ :root{–test-color: red;} p{color:–test-color;}
❌ :root{–test-color: red;} p{color:var(–test-color);}
✔️ #tagId {color: red;}p{color:blue;}
✔️ p{colorLred !important;} #tagId{color:blue;}
Q5 :- CSS Selection
❌ p{cursor-event: none;}
❌ p{pointer-events: none;}
✔️ p{user-select: none;}
❌ None of the above
Q6 :- CSS Input-Placeholder
❌ input::placeholder{visibility:clip;}
✔️ input::placeholder{color: transparent;}
❌ input::placeholder{display: none;}
❌ input::placeholder{visibility:hidden};
Q7 :- CSS Centering
❌ .parent{display: flex; justify-content: center; align-items: center;}
❌ .parent{display: flex; justify-content: center; align-self: center;}
❌ .parent{position: relative;}.child{position: absolute; top: 50%; ;left: 50%;}
✔️ .parent{position: relative;}.child{position: absolute; top: 50%; ;left: 50%; transform-translate(-50%, -50%);}
Q8 :- CSS Vertical-Align
❌ .heroWord{vertical-align: 25px;} moves the word “Hack” to the bottom, 25px lower then <p> tag.
❌ .heroWord{vertical-align: 25px;} moves the word “Hack” to the top, 25px higher then <p> tag.
✔️ p img{vertical-align: text-bottom;} moves the image to the bottom with respect to the <p> tag.
❌ p img{vertical-align: text-bottom;} has no effect on the <img> tag.
Hope this blog post was helpful to you and you have got the answer to your question. Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Till then check out our more blog posts.