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 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:

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 - asynchronousloading

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 equivalentpx 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 @media or @keyframes
• To compile Sass you need either Ruby or libSass
• the biggestchallengein using pre-processors on projects is the initial time spend to set them 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.ACSS Reset(or Reset CSS) is a short, often compressed (minified) set ofCSSrules thatresetthe styling of all HTML elements to a consistent baseline.
• Normalizeyou 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
• 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 use when text label is not available

How else would you improve site accessibility?

• byusing correct HTML syntax
• correctly use headings h1, h2 .. h6
• useappropriatecontrast 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 cases38
• CSS Interview Questions and Answers by Indeed
• Accessibility by MDN
• OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? by Clubmate

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.
Some questions might sound outdated but in my opinion those are absolute basics that every UI, frontend developer should know the answers too.

In the next post, I'll cover framework free JavaScript-related questions.

Take care.