HTML and CSS Interview Question for Frontend Developer
HTML Interview Questions
- What does a
doctype
do?
- How do you serve a page with content in multiple languages?
- What kind of things must you be wary of when design or developing for multilingual sites?
- What are
data-
attributes good for?
- Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- Describe the difference between a
cookie
, sessionStorage
and localStorage
.
- Describe the difference between
<script>
, <script async>
and <script defer>
.
- Why is it generally a good idea to position CSS
<link>
s between <head></head>
and JS <script>
s just before </body>
? Do you know any exceptions?
- What is progressive rendering?
- Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
- Have you used different HTML templating languages before?
CSS Interview Questions
- What is CSS selector specificity and how does it work?
- What's the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
- Describe Floats and how they work.
- Describe
z-index
and how stacking context is formed.
- Describe BFC (Block Formatting Context) and how it works.
- What are the various clearing techniques and which is appropriate for what context?
- How would you approach fixing browser-specific styling issues?
- How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
- What are the different ways to visually hide content (and make it available only for screen readers)?
- Have you ever used a grid system, and if so, what do you prefer?
- Have you used or implemented media queries or mobile specific layouts/CSS?
- Are you familiar with styling SVG?
- Can you give an example of an
@media
property other than screen?
- What are some of the "gotchas" for writing efficient CSS?
- What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.
- How would you implement a web design comp that uses non-standard fonts?
- Explain how a browser determines what elements match a CSS selector.
- Describe pseudo-elements and discuss what they are used for.
- Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
- What does
* { box-sizing: border-box; }
do? What are its advantages?
- What is the CSS display property and can you give a few examples of its use?
- What’s the difference between
inline
and inline-block
?
- What’s the difference between the
nth-of-type()
and nth-child()
selectors?
- What's the difference between a
relative
, fixed
, absolute
and statically
positioned element?
- What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
- Have you used CSS Grid?
- Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
- Have you ever worked with retina graphics? If so, when and what techniques did you use?
- Is there any reason you'd want to use
translate()
instead of absolute positioning
, or vice-versa? And why?