Front-End Interview Questions and Answers

I have finished answering the Front-end-Developer-Interview-Questions, please refer to the answers at my git repo.

In my opinion, not only for interview, they really contains useful information/knowledge for Front-End/Full-Stack developers.

Hope this helps.

Some answer for Front-end-developer-interview-questions

Start to reading Front-end-developer-interview-questions and make some answer, you can take it as reference.

Will add more over time.

Using CSS3 Animations to Perform Notification

Introduction

From W3schools:

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

The difference between transition and animation is transition can be applied to change a property smoothly once at a time and the changed property will be applied, animation can change style several times and the changed style do not need to really applied to element.

This article describe how to use CSS3 animation to perform a notification feature.

Try it

Try the sample below with modern browsers:

Mouseover 'User name' or 'Password' to test

User name:
The name used to login

Password:
The password of the name above

The HTML

animation_test.html

Define a keyframe (notificationAnima) while mouseover the parent div and make animation.

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body {
                background-color: #333;
            }
            .container {
                width: 350px;
                background-color: white;
            }
            .notification {
                border: 2px solid #111;
                border-radius: 15px; /* rounded corner */
                background-color: #333;
                color: white;
                font-size: 18px;
                padding: 5px;

                opacity: 0; /* invisible at begining */
            }
            /* define the keyframes rule */
            /* define a keyframe named notificationAnima */
            /* animation in 5 seconds */
            .field:hover .notification {
                -webkit-animation: notificationAnima 5s; /* Safari and Chrome */
                -moz-animation: notificationAnima 5s; /* Firefox */
                -o-animation: notificationAnima 5s; /* Opera */
                animation: notificationAnima 5s;
            }
            /* control the notificationAnima frame */
            @-webkit-keyframes notificationAnima {
                75%        {opacity: 1;} /* display notification for a while */
                100%    {opacity: 0;} /* then hide it again */
            }
            @-moz-keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
            @-o-keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
            @keyframes notificationAnima {
                75%        {opacity: 1;}
                100%    {opacity: 0;}
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="field">
                User name: <input type="text"></input>
                <br />
                <span class="notification">The name used to login</span>
            </div>
            <div class="field">
                Password: <input type="text"></input>
                <br />
                <span class="notification">The password of the name above</span>
            </div>
        </div>
    </body>
</html>

The Result

View demo on line
http://screencast.com/t/MDvO7pHaEfe4

Reference

w3schools CSS3 Animations
http://www.w3schools.com/css3/css3_animations.asp

Download

animation_test.html
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/animation_test.html

animation_test.swf
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/demo/animation_test.swf

Using CSS3 Transitions to Perform Animation

Introduction

From W3School:
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Try it

Try the sample below with modern browsers (FF 18, Chrome, etc)

mouse over to test

The HTML

Here we change 3 different properties width, height and border-color with different transition properties, separated by comma.

<html>
    <head>
        <style>
            .block {
                border: 1px solid green;
                width: 100px;
                height: 100px;
                
            }
            .block:hover {
                width: 500px;
                height: 350px;
                border-color: red;


                /* property duration timing-function delay */
                /* width ->change width smoothly */
                /* 2s -> change it smoothly in 2 seconds */
                /* ease-out -> slow end */
                /* 0.5s -> delay 0.5 second at the begining */
                /* separate different properties by comma */
                /*
                /* similarly */
                /* change height smoothly in 1.5 seconds with 1 second delay, slow start */
                /* change border-color smoothly in 1 second with 1.5 seconds delay, slow end */

                -webkit-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
                -moz-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
                -o-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
                transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
            }
            /* return to original style smoothly while mouseout */
            .block:not(hover) {
                -webkit-transition: width 2s, height 2s , border-color 2s;
                -moz-transition: width 2s, height 2s , border-color 2s;
                -o-transition: width 2s, height 2s , border-color 2s;
                transition: width 2s, height 2s , border-color 2s;
            }
        </style>
    </head>
    <body>
        <div class="block">
            mouse over to test
        </div>
    </body>
</html>

The Result

View demo on line
http://screencast.com/t/myM87X1NtuX

Reference

http://www.w3schools.com/css3/css3_transitions.asp

http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties

Download

CSS3_transition.swf
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/demo/CSS3_transition.swf

transition_test.html
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/transition_test.html