CSS

Question 1

How do you make sure an element is in front of another element on a website?

Answer 1

Make the z-index higher and make sure the position isn’t static. Z-index doesn’t affect static elements. Also make sure there is a height and width set. Set a background color to make sure it is in front.

Question 2

How do you make your website elements generally fluid with responsive design?

Answer 2

Make the width 100% instead of using vw or px or anything. Use percentages to make them grow or shrink with the viewport width. Can also use vw for text sizes so they shrink and grow too.

Question 3

If you want a grid element to have 3 columns and 2 rows with a 1rem gap, what would you do?

Answer 3

Something like:

grid-template-columns: 30% 30% 30%;
grid-template-rows: 45% 45%;
grid-gap: 1rem;

Note: If you use “auto” to automatically set the percentages, you can’t use justify-content: center. This will make everything bunch together, and you’ll need to use percentages to separate them into columns.

Question 4

How would you center an h1 text?

Answer 4

text-align: center;
header and paragraph elements take the width of the parent, so you don’t need to make a wrapper div or anything. Just align the text to the center.

Question 5

When inputting the padding for all 4 sides of an element, what order does it go in?

Answer 5

padding: 1rem 1rem 1rem 1rem

first: top
second: right
third: bottom
fourth: left

So it start at the top and goes clockwise around.

Question 6

How do you add a border to the element? What are the different styles you can use?

Answer 6

border: 1px solid black;

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Question 7

How do you add a keyframe and a css animation to an element?

Answer 7

Keyframes have beginning, middle, and/or ending states based off percentages you give. 0% is the start, 100% is the end, and other percentages are anything in the middle. An example looks like this:

@keyframes page-load {
0% {
transform: translateY(-20%);
opacity: 0%;
}

100% {
transform: translateY(0%);
opacity: 100%;
}
}

This one starts with the element 20% below where it usually is and transparent. At the end of the animation, the item is where it should be and completely opaque. So the item appears to move up and appear. Would use this as a scroll animation.

To include this animation in a css class:

animation-name: page-load;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;

Or on a single line:

animation: page-load 5s ease-in 2s infinite alternate

You don’t need all these components, but they show what’s possible to specify.