` elements side by side in the row. 98 | 99 | ```html 100 |

101 |

102 |

103 |

104 | ``` 105 | 106 | The right one has fixed width of 200px, the left one should take all the rest. 107 | 108 | **A.** There is two options. 109 | 110 | The first one: 111 | 112 | ```css 113 | .row { 114 | position: relative; 115 | } 116 | .left { 117 | margin-right: 200px; 118 | background-color: blue; 119 | height: 50px; 120 | } 121 | .right { 122 | position: absolute; 123 | top: 0; 124 | bottom: 0; 125 | right: 0; 126 | width: 200px; 127 | background-color: red; 128 | } 129 | ``` 130 | 131 | The second: 132 | 133 | ```css 134 | .row { 135 | display: table; 136 | width:100%; 137 | } 138 | .left { 139 | display: table-cell; 140 | background-color: blue; 141 | height: 50px; 142 | } 143 | .right { 144 | display: table-cell; 145 | width: 200px; 146 | background-color: red; 147 | } 148 | ``` 149 | [Example of 2 divs side by side](http://codepen.io/artemdemo/pen/vNxvYx) 150 | 151 | 152 | **Q.** You have following html code. Please align text horizontally in the center and vertically in the middle. 153 | You have also `item-base` style, that shouldn't be changed. 154 | 155 | ```html 156 |

157 | Some awesome text 158 |

159 | ``` 160 | 161 | ```css 162 | .item-base { 163 | width: 100%; 164 | height: 100px; 165 | } 166 | ``` 167 | 168 | **A.** There is more than one option 169 | 170 | In the question we see only one line, therefore one of solutions can be the following one: 171 | 172 | ```css 173 | .item { 174 | text-align: center; 175 | line-height: 100px; 176 | } 177 | ``` 178 | 179 | It's sort of ok, but it has problems, it's like to write: 180 | 181 | ```css 182 | .item { 183 | box-sizing: border-box; 184 | -moz-box-sizing: border-box; 185 | -webkit-box-sizing: border-box; 186 | text-align: center; 187 | padding: 40px; 188 | } 189 | ``` 190 | 191 | Both of this solutions have it's own problems 192 | 193 | More creative way of thinking: 194 | 195 | ```css 196 | body { 197 | display: table; 198 | width: 100%; 199 | } 200 | 201 | .item { 202 | text-align: center; 203 | display: table-cell; 204 | vertical-align: middle; 205 | } 206 | ``` 207 | 208 | --- 209 | 210 | 211 | **Q.** You have following html code. Please align *element* `item-inner` horizontally in the center 212 | and vertically in the middle. 213 | You have also `item-base` style, that shouldn't be changed. 214 | 215 | ```html 216 |

217 |

Some awesome text

218 |

219 | ``` 220 | 221 | ```css 222 | .item-base { 223 | width: 100%; 224 | height: 100px; 225 | } 226 | ``` 227 | 228 | **A.** 229 | ```css 230 | body { 231 | width: 100%; 232 | margin: 0; 233 | display: table; 234 | } 235 | .item-base { 236 | display: table-cell; 237 | vertical-align: middle; 238 | } 239 | .item-inner { 240 | text-align: center; 241 | } 242 | ``` 243 | [In the middle - horizontally and verticall](http://codepen.io/artemdemo/pen/wKZEqY) 244 | 245 | --- 246 | 247 | 248 | **Q.** You need to add footer stocked to the bottom of the page. 249 | It should work also in mobile. What is your solution and what problems you may face. 250 | 251 | **A.** There is no problems nowadays. You can simple use `position: fixed`. 252 | The only problem can appear if you're aiming really old smartphones: Android 2.1 and below or iOS 4 and below. 253 | For this devices you will need to use JS plugins like [iScroll](https://github.com/cubiq/iscroll), 254 | case they not support position: fixed and footer will scroll along with the page. -------------------------------------------------------------------------------- /es2015-questions.md: -------------------------------------------------------------------------------- 1 | # ES2015 (ES6) questions 2 | 3 | * [var / let / const](https://github.com/artemdemo/frontend-interview-questions/blob/master/es2015-questions.md#var--let--const) 4 | * [Templates](https://github.com/artemdemo/frontend-interview-questions/blob/master/es2015-questions.md#templates) 5 | * [Declare](https://github.com/artemdemo/frontend-interview-questions/blob/master/es2015-questions.md#declare) 6 | * [Is it legal or not](https://github.com/artemdemo/frontend-interview-questions/blob/master/es2015-questions.md#is-it-legal-or-not) 7 | 8 | --- 9 | 10 | ## var / let / const 11 | 12 | **Q.** What's the output? 13 | 14 | ```javascript 15 | const KEY = 'white_rabbit'; 16 | if (true) { 17 | const KEY = 'ginger_rabbit'; 18 | } 19 | console.log(KEY); 20 | ``` 21 | 22 | **A.** 23 | 24 | ``` 25 | white_rabbit 26 | ``` 27 | 28 | --- 29 | 30 | **Q.** What's the output? 31 | 32 | ```javascript 33 | let x = 42; 34 | if (true) { 35 | let x = 1337; 36 | } 37 | console.log(x); 38 | ``` 39 | 40 | **A.** 41 | 42 | ``` 43 | 42 44 | ``` 45 | 46 | --- 47 | 48 | **Q.** What's the output? 49 | 50 | ```javascript 51 | let x = 42; 52 | if (true) { 53 | console.log(x); 54 | let x = 1337; 55 | } 56 | ``` 57 | 58 | **A.** 59 | 60 | ``` 61 | ERROR 62 | ``` 63 | 64 | ## Templates 65 | 66 | **Q.** What's the output? 67 | 68 | ```javascript 69 | var x = `foo ${y}`, 70 | y = `bar ${x}`; 71 | 72 | console.log(x); 73 | ``` 74 | 75 | **A.** 76 | 77 | ``` 78 | foo undefined 79 | ``` 80 | 81 | --- 82 | 83 | **Q.** What's the output? 84 | 85 | ```javascript 86 | var x = `foo ${y}`, 87 | y = `bar ${x}`; 88 | 89 | console.log(y); 90 | ``` 91 | 92 | **A.** 93 | 94 | ``` 95 | bar foo undefined 96 | ``` 97 | 98 | ## Declare 99 | 100 | **Q.** In ES6, is there a better way to create this object? 101 | 102 | ```javascript 103 | let options = { 104 | protocol: protocol, 105 | url: url, 106 | method: method, 107 | callback: callback 108 | }; 109 | ``` 110 | 111 | **A.** 112 | 113 | ```javascript 114 | let options = { 115 | protocol, 116 | url, 117 | method, 118 | callback 119 | }; 120 | ``` 121 | 122 | ## Is it legal or not 123 | 124 | **Q.** 125 | 126 | ```javascript 127 | var score = [12, 7, 14]; 128 | Math.max(...score); 129 | ``` 130 | 131 | **A.** 132 | 133 | ``` 134 | Yes 135 | ``` 136 | 137 | --- 138 | 139 | **Q.** 140 | 141 | ```javascript 142 | function stuff(x, y=x/3) { 143 | // Do stuff.. 144 | } 145 | stuff(6); 146 | ``` 147 | 148 | **A.** 149 | 150 | ``` 151 | Yes 152 | ``` 153 | -------------------------------------------------------------------------------- /html-questions.md: -------------------------------------------------------------------------------- 1 | # HTML questions 2 | 3 | **Q.** What is doctype, what happens if you don't provide it? 4 | 5 | **A.** 6 | 7 | HTML5 DOCTYPE declaration, should be the first tag in the source markup of any web page: 8 | ``` 9 | 10 | ``` 11 | 12 | The DOCTYPE, is utilized by the web browser to identify the version of the markup language in which the page is written. It may contain a link to a Document Type Definition, or DTD for short. The DTD sets out the rules and grammar for that flavor of markup, thus enabling the browser to render the content accordingly. 13 | 14 | The HTML5 DOCTYPE is the most up-to-date standard, and is the preferred choice for all new documents. It adds support for all the new HTML5 features like sectioning elements, new semantic elements, new form types, new multimedia elements, and a lot of great APIs to extend your web applications. 15 | -------------------------------------------------------------------------------- /js-questions.md: -------------------------------------------------------------------------------- 1 | # JavaScript questions 2 | 3 | * [Operators](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#operators) 4 | * [Types](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#types) 5 | * [Reference/alias](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#referencealias) 6 | * [Functions](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#functions) 7 | * [Promises](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#promises) 8 | * [URL, data](https://github.com/artemdemo/frontend-interview-questions/blob/master/js-questions.md#url-data) 9 | 10 | --- 11 | 12 | ## Operators 13 | 14 | **Q.** What will be value of `y`? 15 | 16 | ```javascript 17 | var y, 18 | x = 1; 19 | 20 | y = x+++x; 21 | ``` 22 | 23 | **A.** `y = 3` 24 | 25 | **Explanation** First will be calculated `x++`, it will return `1` and after that value of `x` will be increased by `1`. 26 | Therefore at the end we will have `1 + 2` 27 | 28 | 29 | ## Types 30 | 31 | **Q.** What data types javascript has? 32 | 33 | **A.** There is 6 types: 34 | 35 | ``` 36 | object 37 | number 38 | string 39 | boolean 40 | null 41 | undefined 42 | ``` 43 | 44 | and since ES2015 we have also `symbol` 45 | 46 | --- 47 | 48 | **Q.** In the following code - what will be value of `foo` and what you suggest to do to improve this code? 49 | 50 | 51 | ```javascript 52 | var foo; 53 | 54 | foo = '20' + 10; 55 | ``` 56 | 57 | **A.** `foo = 2010`. 58 | 59 | There is 3 ways to improve it: 60 | 61 | ```javascript 62 | foo = +'20' + 10; 63 | ``` 64 | 65 | or 66 | 67 | ```javascript 68 | foo = parseInt('20') + 10; 69 | ``` 70 | 71 | or 72 | 73 | ```javascript 74 | foo = Number('20') + 10; 75 | ``` 76 | 77 | --- 78 | 79 | **Q.** You have variable that may or may not be a number. 80 | Write function `isNumber()` that will return `true` if it is in fact number or `false` otherwise. 81 | 82 | ```javascript 83 | function isNumber(value) { 84 | if (isNaN(value)) { 85 | return false; 86 | } 87 | return typeof value === 'number'; 88 | } 89 | ``` 90 | 91 | --- 92 | 93 | (A more complex version of the previous question.) 94 | 95 | **Q.** You have variable that may or may not be a number, but it can be converted to number in the meaningfull way. 96 | For example string '2' can be converted to number 2, but boolean 'true' can not. 97 | Write function `couldBeNumber()` that will return `true` if it is in fact number or `false` otherwise. 98 | 99 | **A.** 100 | 101 | ```javascript 102 | function couldBeNumber(value) { 103 | if (typeof value === 'string' && value !== '') { 104 | return Number(value) === Number(value); 105 | } 106 | return !isNaN(value) && typeof value === 'number'; 107 | } 108 | ``` 109 | 110 | **Explanation** `Number()` of something that can't be converted to number will return `NaN` 111 | and by specification of ECMAScript `NaN` not equal to `NaN` 112 | 113 | --- 114 | 115 | **Q.** Explain what will be output of each of following expressions: 116 | 117 | ```javascript 118 | 5 - "4" 119 | 5 + "4" 120 | 5 + null 121 | !{}[true] 122 | +[1] 123 | +[1, 2] 124 | 7 - "a" 125 | 7 / 0 126 | ``` 127 | 128 | **A.** 129 | 130 | ```javascript 131 | 5 - "4" // number 1 132 | 5 + "4" // string "54" 133 | 5 + null // number 5 134 | !{}[true] // boolean true 135 | +[1] // number 1 136 | +[1, 2] // NaN 137 | 7 - "a" // NaN 138 | 7 / 0 // Infinity 139 | ``` 140 | 141 | --- 142 | 143 | **Q.** What will be result of each of following exprassions? Explain why their are differ: 144 | 145 | ```javascript 146 | 0 == false 147 | 0 == null 148 | null == false 149 | ``` 150 | 151 | **A.** 152 | 153 | ```javascript 154 | 0 == false // true 155 | 0 == null // false 156 | null == false // false 157 | ``` 158 | 159 | 160 | ## Reference/alias 161 | 162 | 163 | **Q.** What output you will see in the console? 164 | 165 | ```javascript 166 | var obj = { 167 | foo: [] 168 | } 169 | var boo = obj.foo; 170 | 171 | boo.push('Hi there!'); 172 | 173 | obj.foo = obj.foo.concat(boo) 174 | 175 | console.log(obj); 176 | ``` 177 | 178 | **A.** 179 | 180 | ```javascript 181 | { 182 | foo: [ 183 | 'Hi there!', 184 | 'Hi there!' 185 | ] 186 | } 187 | ``` 188 | 189 | **Explanation** `boo` will contain reference to the `obj.foo` and not the value of it. 190 | Therefore by pushing to the `boo` you'll actually push to `obj.foo` 191 | 192 | 193 | ## Functions 194 | 195 | 196 | **Q.** Describe what is the following construction, when and why you will use it 197 | 198 | ```javascript 199 | (function() {})() 200 | ``` 201 | 202 | **A.** 203 | It's immediately-invoked function expression (IIFE). JavaScript will execute whatever will be in this function as soon as it gets here. Code inside of thies funcion will have its own scope. 204 | 205 | --- 206 | 207 | **Q.** Write code, that will provide following behaviour: 208 | 209 | ```javascript 210 | add(3)(4) == 7; 211 | ``` 212 | 213 | **A.** You should use carrying 214 | 215 | ```javascript 216 | function (a) { 217 | return function (b) { 218 | return a + b; 219 | } 220 | } 221 | ``` 222 | 223 | --- 224 | 225 | **Q.** What you will see in the console after executiong the following code? 226 | 227 | ```javascript 228 | var foo = 10; 229 | 230 | console.log(foo); 231 | 232 | foo(); 233 | 234 | function foo(){ 235 | console.log("foo"); 236 | } 237 | ``` 238 | 239 | **A.** You will get: 240 | 241 | ``` 242 | 10 243 | 244 | Uncaught TypeError: abc is not a function(…) 245 | ``` 246 | 247 | **Explanation** Named functions will be hoisted along with their body, 248 | so this is how the code in the question examples is seen by the interpreter: 249 | 250 | ```javascript 251 | function abc(){ 252 | console.log("abc"); 253 | } 254 | abc = 10; 255 | console.log(abc); 256 | abc(); 257 | ``` 258 | 259 | 260 | ## Promises 261 | 262 | **Q.** What you will see in console after runnig this code: 263 | 264 | ```javascript 265 | Promise.resolve(1) 266 | .then((x) => x + 1) 267 | .then((x) => { throw new Error('My Error') }) 268 | .catch(() => 1) 269 | .then((x) => x + 1) 270 | .then((x) => console.log(x)) 271 | .catch(console.error) 272 | ``` 273 | 274 | **A.** You will get: 275 | 276 | ``` 277 | 2 278 | ``` 279 | 280 | 281 | 282 | ## URL, data 283 | 284 | **Q.** You have relative URL `category/15/products?sort=name&order=DESC`, how you will get full URL from it? 285 | 286 | **A.** 287 | 288 | ```javascript 289 | var link = document.createElement('a'); 290 | link.href = 'category/15/products?sort=name&order=DESC'; 291 | console.log(link.protocol+'//'+link.host+link.pathname+link.search+link.hash) 292 | ``` 293 | 294 | --- 295 | 296 | **Q.** You have cross domain error for your script, how you will load it. 297 | 298 | **A.** 299 | We can use JSONP as a solution (see next question). 300 | 301 | --- 302 | 303 | **Q.** What is JSONP? How and when you will use it? 304 | 305 | **A.** 306 | JSONP, which stands for "JSON with Padding" (and JSON stands for JavaScript Object Notation), is a way to get data from another domain that bypasses CORS (Cross Origin Resource Sharing) rules. 307 | 308 | Say you're on domain example.com, and you want to make a request to domain example.net. To do so, you need to cross domain boundaries, a no-no in most of browserland. We can bypasses this limitation by using `