CSS Concepts

Question 1

What does “content” mean in &::before { content: ‘ ‘ } declaration

Answer 1

Content refers to the content created dynamically on the element that wraps the &::before and &::after selector. In this case, an empty content element is dynamically created in the browser. This is useful for borders in front of DOM elements.

Question 2

What css property should you use to move elements to the right, or left

Answer 2

float e.g. .menu-btm {
float: right;
}

Question 3

How would you write a media query adjust the DOM if the window is less than a certain size?

Answer 3

@media (min-width:600px) {

}

Question 4

What css property should you use to set font?

Answer 4

font-family: ‘Montserrat’;

Question 5

How do you keep elements from aligning to the edge of a window if you use float: left;?

Answer 5

.btn {
float: left;
padding: 2em;
}

Question 6

What is the minimum list of elements for a simple overlay window that obscures the rest of the DOM beneath it?

Answer 6

.overlay {
  position: absolute;
  background: black;
  padding: 2em;
  width: calc(100%-4em);
  height: calc(100%-4em);
}

Question 7

The following will have a scrollbar, what should the width be to avoid a situation where the scrollbar is 104%?
.overlay {
  position: absolute;
  background: black;
  padding: 2em;
  width: 100%
  height: 100%
}

Answer 7

.overlay {
  ...
  padding: 2em;
  width: calc(100%-4em);
  height: calc(100%-4em);
}

Deduct the padding from the element using the calc method.

Question 8

How do you access a nav element in javascript? What HTML attribute is used?