Geekly Articles each Day
📜 ⬆️ ⬇️

Test for the post FrontEnd

Good time of day, dear colleagues. I decided to share my version of the test, born a few years ago by our humble team and several times shoveled by it. The test is working and quite relevant if you sit opposite and listen to the respondent, directing his thoughts in the right direction and suggesting all sorts of trivia.

1. Magic

Write a program that displays numbers from 1 to 100. However, instead of numbers that are multiples of 3, the program should display the word “Fizz”, and instead of numbers that are multiples of 5, the word “Buzz”. If the number is a multiple of 3 and 5, then the program should display the word “FizzBuzz”.
')
2. HTML

2.1. What element content can be seen in the browser window?

2.2. What will happen if you arrange

<b>
in container

 <head>

Your Answer...?

2.3. For which tag is the element
 <!doctype html>
acts as a parent?

2.4. Which tag should I use to wrap a line?

2.5. How to create a link that opens in a new window / tab?

2.6. What tags are used to create lists?

2.7. What are good attributes for
 data-*
Your Answer...?

2.8. How will the elements be located on the page?
 <div>div 1</div> <div>div 2</div> <span>span 1</span> <span>span 2</span>
Your Answer...?

2.9. How to insert audio / video in html-file?

2.10. What's wrong with this code
 <b>Some<i> </b>Text</i>
Your Answer...?

2.11. The main differences from the block layout of the table?

2.12. What's the Difference
 <svg>
from
 <canvas>
Your Answer...?

3. CSS / LESS

3.1. How to hide items on the page?

3.2. What is the difference between the margin and padding properties?

3.3. Are you familiar with bootstrap or another component frontend library?

3.4. Do you use media queries?

3.5. What units are used in css?

3.6. What are the ways to create a grid?

3.7. What does the box-sizing property do?

3.8. Do you know any animations?

3.9. What is Flexbox used for?

3.9. How to place an element on the page vertically and horizontally in the center?

3.10. What will be the color of the text in the following example?
main.css:

 p { color: red; }

index.html:

 <html> <head> <link rel="stylesheet" href="main.css"> <style> p#p { color: green; } </style> </head> <body> <p id="p" style="color: blue;"> Some text </p> </body> </html>

3.11. What is the difference between LESS and CSS?

3.12. Describe how to create a loop in LESS?

4. javascript

4.1. What libraries and / or frameworks do you use?

4.2. How is javascript different from java?

4.3. What is the difference between cookies, sessionStorage and localStorage?

4.4. What is the difference between document load event and document ready event?

4.5. Name the ways of binding event handlers to objects.

4.6. What is the difference between == and ===?

4.7. Tell us about AJAX.

4.8. What is the difference between null and undefined?

4.9. Describe how prototyping works in JavaScript.

4.10. How to swap two variables without using the third and arithmetic operations?

4.11. What is the difference between .forEach () and .map ()?

4.12. What will be equal
a
after the execution of the following code:

 var a; a=!!a;

4.13. How can you minify the code?

4.14. What value will be displayed?

 alert('Hello World!'.split('').reverse().join(''));

4.15. What will be displayed on the screen?

 var a = 'Hello'; (function () { var b = 'World!'; alert(a+b); })(); alert(a+b);

4.16. What is the difference?

 var a = function() {}

from

 function a()

4.17. What will be displayed on the screen?

 function A() {this.b = 'Cde';} A.prototype = {getB: function() {return this.b}}; var a = new A(); A.prototype.getUpperB = function() {return this.b.toUpperCase(); }; alert(a.getUpperB());

4.18. What will be displayed in the console?

 function A(a,b) {console.log(arguments);} A(1,2,3);

4.19. What will this example display?

 alert((function f() { function f() {return 1;} return f(); function f() {return 2;} })());

and if so?

 alert((function f() { function f() {return 1;} return f(); var f = function () {return 2;} })());


5. AngularJS

5.1. How does AngularJs differ from jQuery?

5.2. How to hide an item when clicking on it?

5.3. Describe the structure of the Angular application.

5.4. What is the use of the controllerAs design?

5.5. Do you know the promise?

5.6. How to transfer a variable from one controller to another?

5.7. What should a controller be used for, and what is directive for?

5.8. What is the difference between broadcast and emit?

5.9. What will this example display?

 <input type="text" ng-module="name"> <span>{{name}}</span>

and if so?
 <input type="text" ng-module="name"> <span>{{::name}}</span>

5.10. What will this code output?

 angular.module('app', []) .controller('SomeController', function() { console.log($scope); });

5.1. What is wrong with this code?

 <span ng-init="name = 'SomeName'">{{::name}}</span>

What is the difference between ngRoute and io.router?

5.1. Where will you write the application configuration?

5.1. The main difference between factory, service and provider?

6. Other

6.1. Is there experience with Git, NPM, Bower, Gulp, Webpack?

6.2. Are you familiar with nodejs and express?

6.3. What template engines do you use?

6.4. Which IDE did you work with?

6.5. How do you feel about PHP, Windows?

6.6. Do you know Scrum?

Literature for home study

1 - angularjs.org (tutorial)

2 - angular UI-router

3 - angular UI-bootstrap

4 - read Habr on the topic of Angular Services (factories, providers, directives ...

!!! in that order ...

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

More articles:


All Articles