# TEST for NAVEEN DUDAM

1. What is the specifity of this selector: "div#element.type"?

A. 0,0,1,1
B. 0,1,1,1
c. 0,0,2,1

response: B

---

2. What selector do you use to target the attribute "text" type on the input element?

A. input[type="text"]
B. input[type-text]
C. input[text=type]

response: A

---

3. What type selectors is ":after" and ":before"?

A. class
B. pseudo-class
C. pseudo-element

response: C

---

4. Select naming type "Kebab Case" from list selector below:

A. .class-element
B. .class_element
C. .classElement

response: B

---

5. Select media query for tablet device below:

A. @media (min-width: 767px)
B. @media (min-width: 979px)
C. @media (min-width: 1200px)

response: A

---

6. In the flex display context, what are the differences between the underlying property?

align-items, align-content and align-self.

A. the first two properties are for the container and the last one is for the children.
B. the first property is for the children and the last two are for container.
C. the first property is for the container and the last two are for children.

response: C

---

7. Which line defines the "less preprocessor" variable following?

A. $variable = 'text';
B. @variable: text;
C. variable: 'text';

response: A

---

8. Which output produce this less lines below?

    @variable: white;
    
    .class-@{variable} {
        color: @variable;
    }

    A. .class-variable{color: white;}
    B. .class-white{color: white;}
    C. .color-white{color: variable;}

response: B

---

9. Which output produce this less lines below?

    #library() {
      .colors() {
        @primary: blue;
        @secondary: green;
      }
      .size() {
        @default: 80%;
      }
    }
    
    .element {
        width: #library.size()[];
        &-box {
            color: #library.colors()[@primary];
            background-color: #library.colors()[@secondary];
        }
    }

 

    A. .element {
          width: 80%;
        }
        .element-box {
          color: blue;
          background-color: green;
        }
        
    B. .element {
          width: 80%;
        }
        .box {
          color: blue;
          background-color: green;
        }
        
    C. .element-box {
          width: 80%;
          color: blue;
          background-color: green;
        }

response: C

---

10. Which output produce this less lines below?

 

    @colors: #FFF, #689, #000;

 

    .class {
        border: 1px solid extract(@colors, 2);
    }

 

    .element {
        &:extend(.class);
        color: extract(@colors, 1);
    }
    
    A.  .class,
        .element {
          border: 1px solid #689;
        }
    
    B.  .class,
        .element {
          border: 1px solid #689;
        }
        .element {
          color: #FFF;
        }
        
    C.  .class {
          border: 1px solid #689;
        }
        .element {
          color: #FFF;
        }
        

response: B

---

11. In the field of responsive behavior development, what is the first device you take into consideration?

---Desktop, Tab then Mobile

12. Write the css classes to target the elements in this structure using SCSS:

<article class="component">
	<header class="component-header">
		<h1 class="component-title">
			Title lorem ipsum dolor si amet.
		</h1>
		<div class="component-meta">
			<span class="component-date">12/12/2020</span>
			<span class="component-sep"> - </span>
			<span class="component-time">12:30</span>
		</div>
  </header>
  <h1 class="component-title">
		Title lorem ipsum dolor si amet.
	</h1>
	<p class="component-content">Lorem ipsum dolor sit amet</p>
</article>

---.component{
.component-header{
h1{

}
.component-meta{
span{

&.component-time{

}
}
}
}
.component-title{
&>p{

}
}
}

13. You have two simple component and a shared css pattern in three different scss files. Let me know two way to apply this pattern to these two components. (below) One via html and one via scss

// 

// component-1.scss
.component-1 {}
// component-2.scss
.component-2 {}

---<link href="component-2.scss"/>
@extend 'shared-pattern'

# GIT

14. In shared repository with your colleagues, what is the best practice to follow if you need to apply some changes to some files and commit it later?

**A**. Make the required changes, commit and then push the changes.
**B**. Make the required changes and then directly push the changes.
**C**. Pull in order to have all the files updated, perform the required changes and then pull the changes.
**D**. Pull in order to have all the files updated, make the required changes, commit and then push the changes.

response: A

---

15. In shared repository, one of your collegue had created a new branch but you don't still see it. What is the commonad to run to updated you repo?

**A**. git pull
**B**. git fetch
**C**. git update
**D**. git merge

response:

--- A

# HTML, CSS e JS

16. In a html 5 structure how many headings tag (H1, H2, H3...) are admitted inside the costruction of a page?

**A**. Only one
**B**. One for each type of H
**C**. There are no limits
**D**. They are no longer needed

---C

17. In the less coding, using the mediaqueires, what would be the writing order if the various breakpoint in the stylesheet?

**A**. In ascending order
**B**. In descending order
**C**. It doesn't matter, the breakpoint values refer
**D**. It depends on whether min-width or max-width values are used

---

18. In html structure, which point is preferable to insert the js scripts?

**A**. in the tag HEADER
**B**. in the tag HEAD
**C**. before of the closing of the tag body
**D**. before of the closing of the tag html

---C

19. The javascript propery .style what inserts inside the element?

**A**. A classe CSS
**B**. in-line Css Stile
**C**. An ID
**D**. A new content
B