UI Questions and Answers
1.What is Mobile First Design
Mobile first is an approach to responsive design: design for smaller screens first, then add more features and content for bigger and bigger screens. This design approach is also known as "progressive enhancement."
2. What is Adaptive web design
Adaptive web design is different from responsive design in that there isn't one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes. ... For example, there could be a specific layout for mobile phones, tablets, and desktop computers – each of which are made in advance.
3. How do you make decision as how to choose which layout to design a website among fixed, responsive or adaptive?
When it comes down to it, the key is to consider your audience first and foremost no matter what design technique you adopt. Once you know exactly who they are and what devices they tend to access the site on, then it’s easier to design with them in mind when it comes to layout, content and so on.
4. What is the advantage of using minimized version of jQuery?
Efficiency of web page increases when minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster.
5. What are the basic selectors in jQuery?
Following are the basic selectors in jQuery:
Name: Selects all elements which match with the given element Name.
#ID: Selects a single element which matches with the given ID
.Class: Selects all elements which match with the given Class.
Universal (*): Selects all elements available in a DOM.
Attribute Selector: Select elements based on its attribute value.
6. What is CDN?
CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.
7. What are the two types of CDNs?
There are two types of CDNs:
Microsoft – Load jQuery from Ajax CDN
Google – Load jQuery from Google libraries API
8. What does dollar sign ($) means in jQuery?
Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code.
$(document).ready(function(){
});
Over here $ sign can be replaced with "jQuery" keyword.
jQuery(document).ready(function(){
});
9. How do you implement animation functionality?
The .animate() method allows us to create animation effects on any numeric CSS property. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Syntax is:
(selector).animate({styles},speed,easing,callback)
styles: Specifies one or more CSS properties/values to animate.
duration: Optional. Specifies the speed of the animation.
easing: Optional. Specifies the speed of the element in different points of the animation. Default value is "swing".
callback: Optional. A function to be executed after the animation completes.
Simple use of animate function is,
$("btnClick").click(function(){
$("#dvBox").animate({height:"100px"});
});
10. In what situation you would use multiple version of jQuery and how would you include them?
Well, it is quite possible that the jQuery plugins which are used are dependent on older version but for your own jQuery code, you would like to use newer version. So because of this dependency, multiple version of jQuery may require sometimes on single page.
Below code shows how to include multiple version of jQuery.
<script type='text/javascript' src='js/jquery_1.9.1.min.js'></script>
<script type='text/javascript'>
var $jq = jQuery.noConflict();
</script
By this way, for your own jQuery code use "$jq", instead of "$" as "$jq" refers to jQuery 1.9.1, where "$" refers to 1.7.2.
11.What is chaining in jQuery?
$(document).ready(function(){
$('#dvContent').addClass('dummy').css('color', 'red').fadeIn('slow');
});
12. What is each() function in jQuery? How do you use it?
each() function allows you to iterate over a set of elements. You can pass a function to each() method, which will be executed for each element from the jQuery object, on which it has been called.
$('[name=NameOfSelectedTag] :selected').each(function(selected){
alert($(selected).text());
});
13. Difference between $(this) and this keyword in jQuery?
$(this) returns a jQuery object, on which you can call several jQuery methods e.g. text() to retrieve text, val() to retrieve value etc, while this represent current element, and it's one of the JavaScript keyword to denote current DOM element in a context. You can not call jQuery method on this, until it's wrapped using $() function i.e. $(this).
14. What is Anchor Pseudoclasses?
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudoclassnames are not casesensitive.
15. How do I hide a field?
If the fields have unique IDs or Classes you can add the follwoing css:
.yourClass {
display:none;
}
#yourID {
display:none;
}
16. How do you retrieve attribute of an HTML tag using jQuery e.g. href of links?
$("a").each(function(){
alert($(this).attr('href'));
});
17.What is CSS3 boxshadow Property?
boxshadow: hshadow vshadow blur spread color inset;
18. What is Twitter Bootstrap Pagination?
Pagination is the process of organizing content by dividing it into separate pages.
19. What are Bootstrap Badges?
Badges are small and simple components for displaying an indicator or to count some sort of number. This is very useful for mail count and notification etc.
20. What is a Bootstrap Breadcrumb?
A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. The following example shows how to create breadcrumbs.
21. Give the syntax of buttons in Bootstrap
Syntax of Button
<button type="button" class="btn btn-size">
<span class="glyphicon glyphicon-name"></span></button>
Default
Info
Primary
Danger
success
warning
Default Button Syntax
<button type=”button” class=”btn btn-default btn-size”>
Default
</button>
22. What are media queries
"Responsive Design" is the strategy of making a site that "responds" to the browser and device that it is being shown on... by looking awesome no matter what.
Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar:
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
23. What is panel in Bootstrap?
A panel in bootstrap is a bordered box with some padding around its content. To create a basic panel, we use .panel class to the <div> element, and content inside the panel has a .panel-body class.
24. What is Bootstrap Container in Bootstrap?
Bootstrap container is a class which is useful and creating a centred area in the page for display.
25. What are CSS Preprocessors
Both Sass and Less are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.
A preprocessor is a program that takes in one “type of data and converts it to another type of data
LESS and Sass share a lot of similarities in syntax, including the following:
Mixins – Classes for classes.
Parametric mixins – Classes to which you can pass parameters, like functions.
Nested Rules – Classes within classes, which cut down on repetitive code.
Operations – Math within CSS.
Color functions – Edit your colors.
Namespaces – Groups of styles that can be called by references.
Scope – Make local changes to styles.
JavaScript evaluation – JavaScript expressions evaluated in CSS.
No comments:
Post a Comment