📜 ⬆️ ⬇️

Questions html-maker

Greetings to all habrovchan and habrovchanok :)

Today I was puzzled by the following: to come up with a list of questions in order to assess the knowledge and skills of a person applying for a html-page layout job.
Personally, it seems to me that for such tests it is difficult to assess the real level, but still they will give general ideas about knowledge.

Nakatala such
')
1. The following styles are set:
 <style>
 .red {
   color: green;
 }
 .green {
   color: red;
 }
 .red .green {
   color: yellow;
 }

 #black {
   color: black;
 }
 </ style>

What color will the text have if classes are applied like this:
 <div class = "red green"> text </ div>

And in this case:
 <div class = "red"> <div class = "green"> text </ div> </ div>

And in this:
 <div class = "red"> <div class = "green" id = "black"> text </ div> </ div>


2. Set a div with the following styles:
 .fl {
   width: 200px;
   height: 200px;
   border: 1px solid red;
   float: left;
 }

How he will behave in all browsers if he is asked to padding-left: 100px;
And if the margin-left?

3. The following classes are defined:
 .f1 {
   width: 200px;
   height: 200px;
   border: 1px solid red;
   float: left;
   position: relative;
 }

 .f2 {
   position: absolute;
   width: 50px;
   height: 50px;
   border: 1px solid # 000000;  
   top: 0px;
   left: 0px;
 }

 <div class = "f1"> <div class = "f2"> </ div> </ div>

How will it look like? Why?

4. The following classes are given for blocks:
 .d1 {
   width: 200px;
   height: 100px;
   border: 1px solid red;
   margin-bottom: 30px;
 }


 .d2 {
   width: 200px;
   height: 100px;
   border: 1px solid red;
   margin-top: 10px;
 }

Blocks:
 <div class = "d1"> </ div>
 <div class = "d2"> </ div>

What is the distance between them? Are all browsers the same? Why?

5. The question on the knowledge of the material - for which browsers you impose (required for IE6, IE7, Opera, Mozilla 2, Mozilla 3, Safari, Chrome). Name a couple of bugs in each browser.

It would be great if the public criticized the questions themselves, or if they would offer their own :)

Source: https://habr.com/ru/post/43758/


All Articles