Skip to content

Ruslan-Shevyrev/HackerRankCSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 

Repository files navigation

1️⃣

<style>
div{
	height:50px;
	width:50px;
	background:red;
	border-radius:50%;
}
</style>
<div class="grayBall"></div>

❌ .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;}

2️⃣ CSS object-fit

Which of the following are true about CSS property 'object-fit'?

❌ '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.

3️⃣ CSS Ellipsis

If an element extends beyond the allocated width, how do you truncate the sentence with an ellipsis (...) using CSS?

For example, "Hello! I am an element, and my width is larger than the container..."

❌ {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

4️⃣ CSS Text Coloring

WHich of the following renders the text red?

<p id="tagID">Please color me red</p>

❌ :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;}

5️⃣ CSS selection

How do you prevent the user from selecting the text rendered insidethe following element?

<p> should not be selectable</p>

❌ p{cursor-event: none;}
❌ p{pointer-events: none;}
✔️ p{user-select: none;}
❌ None of the above

6️⃣ CSS input Placeholder

How do you hide the "placeholder" text of an field?

❌ input::placeholder{visibility:clip;}
✔️ input::placeholder{color: transparent;}
❌ input::placeholder{display: none;}
❌ input::placeholder{visibility:hidden};

7️⃣ CSS Centering

Which of the following options can position the div with the class name "child" exactly at the center of the page?

<div class="parent" style="width: 100vw; height: 100vh;">
	<div class="child" style="height: 100px; width: 100px; background: black"></div>
</div>

❌ .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%);}

8️⃣ CSS Vertical-align

Which of the following are true about the CSS property 'vertical-align'?

<p>
	Let's
	<span class="heroWord">Hack</span>
	<img src=""/>
</p>

❌ .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.

About

Answer on HackerRank CSS Certificate

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •