---
# System prepended metadata

title: CSS3

---

# CSS3

### **1.1** What is the specifity of this selector: _less"div#element.type"_?

```
A. 0,0,1,1
B. 0,1,1,1
c. 0,0,2,1
```
> response: 
c
---
    
### **1.2** What selector do you use to target the attribute _"text"_ type on the input element?

```less
A. input[type="text"]
B. input[type-text]
C. input[text=type]
```
> response: 
A
--- 

### **1.3** What type selectors is _":after"_ and _":before"_?

```less
A. class
B. pseudo-class
C. pseudo-element
```
> response: 
    B
---
    
### **1.4** Could you tell me what is the margin and padding of the ".example" class?

```css
html {
  font-size: 18px;
}
.example {
  padding: 2rem;
  margin: 2em;
}
```
> response: 
36
---

### **1.5** Select media query for tablet device below:

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

A
    
### **1.6** In the flex display context, what are the differences between _align-items_, _align-content_ and _align-self_ properties?

> response: 

---

### **1.7** In the field of responsive behavior development, what is the first device you take into consideration? 

```
A. Desktop
B. Tablet
C. Mobile
```  
> response: 

 C 
---

# LESS
    
### **2.1** Which line defines the _"less preprocessor"_ variable following?

```less
A. $variable = 'text';
B. @variable: text;
C. variable: 'text';
```
> response: B
    
---
    
### **2.2** Which output produce this less lines below?

```less
@variable: white;

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

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

```
> response: A
    
---
    
### **2.3** Which output produce this less lines below?

```less

#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: A
    
---
    
### **2.4** Which output produce this less lines below?

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

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

.element {
    &:extend(.item);
    color: extract(@colors, 1);
}


A.  .item,
    .element {
      border: 1px solid #689;
    }

B.  .item,
    .element {
      border: 1px solid #689;
    }
    .element {
      color: #FFF;
    }

C.  .item {
      border: 1px solid #689;
    }
    .element {
      color: #FFF;
    }
        
```  
> response: B

---

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

```less
// shared-pattern.less
.shared-pattern {}

// component-1.less
.component-1 {}

// component-2.less
.component-2 {}
```

> response:

```less


```

---

### **2.6** Write the css classes to target the elements in this structure using LESS:

```html
<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>
```
> response:

```less


```

---

### **2.7** 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
```
> response:


--- 

# HTML5

### **3.1** 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
```
> response: 

---

### **3.2** 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
```
> response:

---

### **3.3** 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
```
> response:

---

# JavaScript

### **4.1** In wich order will these print?

```js
console.log("Hello");
setTimeout(() => console.log("Muller"), 3);
setTimeout(() => console.log("Mr"), 0);
console.log("Thomas");
``` 
> response: 

---

### **4.2** What is the value of colors?

```js
const colors = ["red", "yellow", "blue"];
colors.shift();
``` 
> response: 

---

# GIT

### **5.1** 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: 
D
---

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

```
A. git pull 
B. git fetch 
C. git update 
D. git merge
```
> response: B
