Interview Questions for front-end jobs

Hey everyone,Recently i wanted to switch my company so i searched and found out that coupondunia has a opening so i applied for it .Below are the questions they asked:

Step 1:They emailed me an assignment which i have to complete and send it to them ,based on which they will decide to proceed further with interview or not.

The assignment was to create a jquery plugin for responsive tabs(on desktop it should be tabs but on mobile or tablets it should convert to drop-down)

Luckily i completed the assignment and i got interview call

Step 2 :They usually take 3/4 technical interview but unfortunately i was rejected in the second interview
Below are the questions they asked me.(Didn't remember which question is from 1st interview or 2nd interview)

1. Tell me about yourself. 
2. Tell me about your recent projects and your role in that. 
3. What are the challenges you have faced in your projects and what you did to solve them. 
4. How many print you will give on a scale of 1(min) to 5(max) in the following HTML4 ,HTML5 ,CSS , CSS3, JavaScript,Jquery,Ajax,BootStrap,Angular,React etc 
5. Explain Bootstrap grid system.
6. What is data attribute in html and why it is used. 
7. What is new in HTML5. 
8. Call and Apply in javaScript.
9. What is event bubbling in javascript. 
10. Difference between event.stopPropogation() and event.preventDefault() 
11. what is lazy loading. 
12. Browser optimization techniques.
13. What is content delivery system(CDN). 
14. Explain javaScript closure. 
15. Explain angular $http and $queue. 
16. What is canvas tag in html and where it is used. 
17. Explain transition and transform of css. 
18. Diffenence between get and post method. 
19. Why it is good practice to add style in head and javascript before closing body tag.
20. Are you famaliar with git version control system. 
21. What is css sprite .
22. What is SVG and its benifits. 
23. Explain dependency injection in angular. 
24. horizontly and vertically center a div. 
25. Take a number from user and show that many concentric squares. 
26. Tell About $.fn 
27. What is CDN and how you insure to always use latest file . 
28. Explain display property of css (specially display:table-row and display:table-column). 
29. Write code to make a ajax call using jquery and once the request is complete call a function passing response as a parameter. 
30. Explain css selector + and ~.
31. Are you famaliar with grunt. 
32. Have you worked with SASS and LESS. 
33. Show a red circle at the center of the screen. 
34. Jquery ajax call is syncronus or asyncronus by default? How to change its behavior. 
35. What is mobile first and desktop first development? How it effects while writing media queries. 
36. Why we use -webkit,-moz etc. 
37. Diffence between css display:none , opacity:0 ,visibility:hidden.

A simple modal popup using HTML , CSS and JQUERY

In this tutorial i will show you how to create a simple modal popup using HTML, CSS and jquery (jquery only use to show/hide the popup) and how to place it at the center of the screen.

Live Demo

STEP 1 :

Create a parent div which will act as modal black background.

and apply below css to it

    .overlay{
     position:fixed;
     top:0;
     left:0;
     bottom:0;
     right:0;
     background-color:rgba(0,0,0,.7);

     /* below code is not necessary*/
     background-size: 60px 60px;
     background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
     background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
    }

Up to this point you got a nice black gradient background.

STEP 2 :

Now that you have your background setup,Let create the popup.

 

  
  X
  
Subscribe
  

   Do you want to subscribe??
  
  

   
No
   
Yes
  
 

And apply below css to style the popup and position it at the center both horizontally and vertically.

.popup{
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:60%;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}
.popup .close{
    position:absolute;
    top:-10px;
    right:-10px;
    background-color: #000;
    border-radius: 30px;
    padding: 5px 6px;
    color: #fff;
    font-size: 10px;
    cursor:pointer;
}
.popup .title{
 padding: 10px;
    background-color: #4679bd;
    color: #fff;
    margin-top: 0px;
}
.popup .content{
 padding: 0px 10px 10px;
    border-bottom: 1px solid #d7d7d7;
}
.popup .button_container{
 padding:10px;
}
.popup .button_container .button{ 
    display: inline-block;
    color: #fff;
    padding: 7px 10px;
    cursor:pointer;
}
.popup .button_container .button.action{
   float:right;
   background-color: #4679bd;
}
.popup .button_container .button.cancel{
   background-color:#ff0000;
}

STEP 3 :

At this point the popup is complete but it is of no use without the logic to open and close the popup.So add a button on click of which popup will open.

 
 
......

And add below css to initially hide the popup

 .popup{
  ...../* previous css code */
  display:none;
 }

And finally some javascript code to show/hide the popup.

$('#openPopup').click(function(){
 $('.overlay').css("display",'block');
});

$('.popup .close').click(function(){
 $('.overlay').css("display",'none');
});
$('.overlay').click(function(){
 $('.overlay').css("display",'none');
});

$('.popup').click(function(event){
 event.stopPropagation();
});