Basics

Question 1

vs Submit

Answer 1

Submit

Question 2

It is considered best practice to set a for attribute on the label element, with a value…?

Answer 2

…that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element

Question 3

if there are conflicting declarations within class and id in css which one would be applied?

Answer 3

However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

Question 4

when you set padding padding: 10px 20px 10px 20px; (or whatever has 4 parameters) in what order does it work?

Answer 4

clockwise notation. These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.

Question 5

how to apply CSS code to all elements with specific value of a given attribute?

Answer 5

[type=’radio’] {
margin: 20px 0px 20px 0px;
}
don’t forget the quotes!

Question 6

Relative units, such as em or rem, are relative to another length value. Which one?

Answer 6

For example, em is based on the size of an element’s font. If you use it to set the font-size property itself, it’s relative to the parent’s font-size.

Question 7

Overriding CSS. how many levels is there and what are they?

Answer 7

1. html tag style
2. class style
3. last declared class style
4. ID style
5. inline style in the dag itself
6. mark !important in any css block

Question 8

Variables

background: var(–penguin-beak, orange);

Answer 8

reference to the variable and a fallback value of orange

Question 9

How to set a CSS var so it is available throughout the entire document?

Answer 9

When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading. Because of cascading, CSS variables are often defined in the :root element.

Question 10

Can the css var be redefined? How to redefine it for a smaller screen size?

Answer 10

@media (max-width: 350px) {
:root {

  /* add code below */
  --penguin-size:200px;
  --penguin-skin:black;
  /* add code above */

}   }

Question 11

recommended alternative for <i>?</i>

Answer 11

<em></em>

Question 12

recommended alternative for <b>?</b>

Answer 12

<strong></strong>

Question 13

recommended alternative for ?

Answer 13

<del></del>

Question 14

keyword for shadows?

Answer 14

The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Question 15

what pseudo-classes do you know?

Answer 15

hover

Question 16

what’s the range of hue() in css?

Answer 16

hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.

Question 17

call the arguments hsl(240, 100%, 50%)

Answer 17

hue saturation lightness

Question 18

when to use HSL()?

Answer 18

This is useful when you have a base hue you like, but need different variations of it.

Question 19

how to attach something to an element using css?

Answer 19

.heart:after {
background-color: blue;
content: "";
border-radius: 25%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}

Question 20

how to set up animation?

Answer 20

#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}

Question 21

How to make the animation last after it finishes?

Answer 21

animation-fill-mode: forwards;

Question 22

How to make animation play forever?

Answer 22

animation-iteration-count: infinite;

Question 23

animation-timing-function options

Answer 23

ease ;ease-out; ease-in; linear; cubic-bezier(0, 0, 0.58, 1); etc

Question 24

what about setting alt attribute to IMG in HTML5?

Answer 24

Per HTML5 specification, this is now considered mandatory. If IMG is a decoration, alt attribute should be present but can be empty

Question 25

What special there is about H1 tag?

Answer 25

One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.

Question 26

How divs van be replaced?

Answer 26

HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.

Question 27

“Click here”-only links should be…

Answer 27

replaced or extended with more meaningful text

Question 28

accesskey is meant for..

Answer 28

interactive elements such as forms, links, buttons

Question 29

how to stretch an image up to its original width to fit to the resized block?

Answer 29

img {
max-width: 100%;
display: block;
height: auto;
}

Question 30

how to optimize images for retina displays?

Answer 30

The simplest way to make your images appear “retina” (and optimize them for retina displays) is to define their width and height values as only half of what the original file is.

Question 31

grid-template-columns - settings for each column

Answer 31

grid-template-columns:10px 5px 10px auto 50px 10% 2fr 1fr