In this series of posts, I'll try to cover the most frequent questions I've been asked over past years or questions I ask when interviewing candidates. The level of question ranges from junior to mid-weight devs and is rather a framework agnostic.
Without further due let's start.
A way to start an interview would be to ask about the candidate's past/current role. For example:
At that point, the interviewer will take few notes and check if the candidate mentions keywords that you can ask more about later, ex: pre-processor, Webpack etc. Also, they will validate if what the candidate is saying is in fact listed in the CV.
So make sure that you are upfront and honest with the person who interviews you. It may sound silly but before each interview read your own CV and make sure you know answers to all keywords and aspects mentioned there.
Next, you might be asked:
Here you can refer to your day-to-day job. The more you have to say here the better. Use this time to talk about your own findings, experiences, and suggestions on how to improve them. You might want to use this time to talk a little bit about the side projects you are working on, the ideas for new apps, etc. It will show you are passionate about technology and in case you don't have much commercial experience in setup used in the role you are open-minded and always willing to learn new things. Use this time wisely to your advantage.
Then interviewer might follow up with:
Of course, it all depends on your level of confidence and experience. But again if you are a junior don't try to hide it from interviewers. If you are a senior don't brag. Talk with passion about each subject but try to be modest. Show you know technical aspects but don't dive into too many details. This is just a warm-up before more detailed questions and you can rest assured your time to shine will come at a later stage of the interview :)
You are going to mention websites, books, Twitter, podcasts, etc
Your answers will be around
- minify code: JS, CSS HTML
- load JS in the footer
- image optimization - etc do not load bigger images than needed - asynchronous loading
You need to know the difference between those three and pros and cons of using one or another. But basically what you need to know is
px) is a commonly used CSS unit on websites.
px is not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting.
em) and Root element (
rem) are responsive units interpreted into equivalent px unit by the browser. They are relative units. Change in the value of the parent or root element affects the value of relative units.
Name some of the commonly used pre-processor and what are the advantages/disadvantages of using CSS pre-processors?
Suggested answers will around the following points
- Less, Sass, Stylus, PostCSS
- In Less
@symbol is used to declare variables, however,
@symbol has already meaning in CSS for example
- To compile
Sassyou need either Ruby or libSass
- the biggest challenge in using pre-processors on projects is the initial time spend to set them up
In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- Every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that reset the styling of all HTML elements to a consistent baseline.
- Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn't unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way, organize it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.
Mentioning BEM, Smacss, OOCSS, Atomic will do the trick. Make sure that you know not only what each abbreviation means but also syntax and give a real live example of a component/module that could benefit from following those patterns.
- surround a group of radio buttons in
selecttag to have a label, in case many options we could group them using
- input field should have
aria-labeledby- Example multiple inputs describe by the same label. For instance, in the table it can have multiple labels -
aria-describedby- used to add more info to inputs eg. used in tooltips
aria-label- contains text directly and will overwrite use when text label is not available
- by using correct HTML syntax
- correctly use headings h1, h2 .. h6
- use appropriate contrast to make the text on site visible
- 5 Essential CSS Interview Questions by TopTal
- Interview Questions and Exercises About CSS by CSS-tricks - old but valid in most cases38
- CSS Interview Questions and Answers by Indeed
- Accessibility by MDN
- OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? by Clubmate
This is definitely not the full list of questions around HTML/CSS/Accessibility or performance but at least it should give you an idea of what to expect and how to prepare for the interview.
Some questions might sound outdated but in my opinion those are absolute basics that every UI, frontend developer should know the answers too.