When it comes to interviewing for a role in front end development, there’s a lot of bases to cover. That’s why we’ve done a bit of the work for you. Below is a list of front end interview questions across HTML, CSS, Javascript as well as general questions to get you prepped and ready for that upcoming interview.<br>Good luck!
1. Is any of the,tag required for an html document to be shown correctly?
Expected answer: no, but the .html file extension is required.
2. In XHTML, how do you close a single (non-paired) tag?
Expected answer: with the / at the end.
3. What is lazy loading?
Expected answer: It’s a method to delay loading the off-screen images until they are revealed. Which greatly increase the page load speed.
4. What happen if a paired-element is missing its end tag?
Expected answer: The element will wrap up all elements below it until a matching end tag or the tag is found. This is a critical mistake and often happens with bold and italic tags.
CSS
1. Should we keep several small CSS files, or one big CSS file instead?
Expected answer: Several small CSS files can cause number of requests to increase. This in turn can cause the loading time to increase. General practice is to merge them into a bigger file.
2. How do you overwrite a ‘style’ attribute using external CSS?
Answer: use the keyword !important
3. How do you solve this problem: a lightbox (popup) is shown under the fixed header?
Expected answer: Check the z-index property. Normally fixed header have very high z-index. And so, the z-index of the lightbox must be higher than this value.
4. What is the purpose of the + operator and can you give an example?
Expected answer:
Purpose: The style is an element that falls immediately after another element.
Example:
H2 + p: style the paragraph that’s right below heading 2.
p + button: style the button element that is shown below a paragraph
5. What is the main purpose of using @media query?
Expected answer: It is mainly used for responsive design. To layout the site depending on screen width or some other attributes such as, printing or displaying on screen.
Javascript
1. Why is it good practice to assign ‘this’ to a variable when using jQuery?
Expected answer: In jQuery, the ‘this’ will change accordingly to the inner block call. Hence the ‘this’ for parent block is inaccessible unless it’s assigned to a variable.
2. Should we host the jQuery file on our own server or over a CDN?
Expected answer: CDN is good for lessening the server load. However, the CDN speed is unpredictable. It can be very slow when it is overloaded. Therefore, it’s a good practice to host our own jQuery file to ensure.
3. Please explain the difference between the ‘lodash’ and ‘underscore’ libraries?
Expected answer: Underscore is a JS framework that provides a lot of helpful functions for faster frontend development. Lodash is an improved version of an underscore. There are many functions that lodash has but underscore does not.
4. Does JavaScript have an associative array?
Expected answer: No, it doesn’t. However, it has an equivalent method: using object to store “named indexes.”
5. What happens if we use a = in an if statement? Is it the same as ==?
Example: if ( a = 10 == 20 )
Expected answer: If we use = , the value on the right hand side of the = sign will be assigned to the name in left before any comparison is made.
Hence, it’s not the same with the == sign (which actually compares 2 values).
In the example above, 10 is assigned to a, then a is compared if equal (==) to 20, then the result is false.
General question
1. Do you know anything about jsfiddle? What is it? Does it only check JS?
Expected answer: Yes. It’s a website used to test Javascript code.
It doesn’t only check JS. It also helps to check HTML and CSS.
2. What should you do if you have to solve a problem that’s beyond your coding experience?
Expected answer:
We normally use Google (or stackoverflow, gist, etc.) to search for the same problem and solution. If you can’t find the solution online, it’s recommended to ask a for help. It’s recommended to always try to find solution to the problem.
3. Do you code responsive web? Can you explain what responsive is?
Expected answer:
Yes. Responsive code is to layout the web page fitting different screen sizes (devices). With standard outdated layout, webpage often appear nicely on desktop computer. But on other devices such as iPad and smartphone, it will be very difficult to view.
Several years ago people developed smartphone apps to show there website while used on mobile. But that ended up being very costly. Nowadays, we can use CSS3 with the @media query to define layout for many devices.
4. How fast should you learn how to use a new tool?
Expected answer:
Ideally, it’s great if a skilled developer can learn to use a new tool within one week. It’s every better if it only takes two to three days. A skilled developer should be able to keep up with technology.
If you’re on the hunt for more practice, guides or insight on the latest tech trends, head to our blogs to learn more!
