Interview questions part 1 - CSS, HTML & Accessibility
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.
In this part, we will go through some general questions, some CSS related and Accessibility questions. In the next post, we will focus solely on JavaScript questions.
Without further due let's start.
General Questions
A way to start an interview would be to ask about the candidate's past/current role. For example:
Tell me about your past/current role - what do you do?
At that point, the interviewer will take few notes and check if the candidate mention 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:
What is the typical workflow from the point you get a task to its completion?
or
What tools and techniques do you use?
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:
I can see you wrote you have been working with VueJS, can you elaborate a bit on it?
and
Have you used any other libraries or just this one?
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 :)
How do you stay up to date with the latest technology changes?
You are going to mention websites, books, Twitter, podcasts, etc
What tools do you use for cross-browser testing?
Your answer should include some of the following options: BrowserStack, CrossBrowserTesting, Virtual Machines (eg: Virtual Box), different devices: phones, computers, laptops
HTML/CSS questions
How we can optimize site loading time?
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
How do you prevent errors in JS and CSS?
Answer: JSLint / JSHint, CSSLint, prettier, pre-commit hooks, etc
What units do you use px, em, or rem?
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
Pixel (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.
Element (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
- In Less
@symbol is used to declare variables, however@symbol has already meaning in CSS for example@mediaor@keyframes - To compile `Sass` you need either Ruby or libSass
- the biggest challenge in using pre-processors on projects is the initial time spend to set it up
What is the 'Box Model' in CSS?
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.
What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- 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.
How do you organise your CSS - Namespace patterns?
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.
Accessibility
How can we improve form accessibility?
- surround a group of radio buttons in
<fieldset>and add <legend> - Select tag to have a label, in case many options we could group them using
<optgroup> - input field should have
<label>
List some of the Aria roles and explain when would you use them
- 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 <label> use when text label is not available
How else would you improve site accessibility?
- by using correct HTML syntax
- correctly use headings
h1,h2..h6 - use appropriate contrast to make the text on site visible
Useful resources
- 5 Essential CSS Interview Questions by TopTal
- Interview Questions and Exercises About CSS by CSS-tricks - old but valid in most cases
- 38 CSS Interview Questions and Answers by Indeed
- Accessibility by MDN
Summary
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.
In the next post, I'll cover framework free JavaScript-related questions.
Take care.