In this article, I will present some of the most frequent questions and answers made by interviewers. There will be questions about HTML & CSS. If you like reading, go ahead. If you don’t, you can still watch myself answering the same questions in this YouTube playlist I prepared.
1. What is CSS selector specificity and how does it work?
When you are working with CSS selectors, there are many different ways you can select a certain element or group of elements, but there are four categories: Inline styles (1000), IDs (100), classes (10), and elements (1).
Did you notice the numbers? This is something few programmers know, but they represent the specificity of each category. The bigger the number, the higher the specificity, and it adds up! For example, if you use
#home h1 , the specificity would be
100 + 1 = 101 , which would be more than only
2. What is accessibility? How do you make your web application the most accessible?
On a webpage, high accessibility means that all of your users will have the same experience, regardless if they are using different devices or have a vision impairment, for example.
There are multiple implementation details you should make in order to make your webpage the most accessible, let me give you some examples:
- Use semantic HTML.
- The content should be navigable by keyboard (mouseless users).
- Provide text alternatives for the media content (images and videos).
- Use accessible colors (you can check color contrast here).
- Use accessible fonts (they must be readable).
3. What is progressive rendering?
Progressive rendering is the act of slowly rendering the data in a webpage, in order to increase the user experience if their internet connection or device is too slow. I can give you three examples of what can happen when a webpage is doing a progressive rendering:
- An image starts loading, but instead of loading small high-quality bits at a time, it chooses to load the entire low-quality image and progressively improve its quality. This improves the users’ experience, as they can visualize the entire image faster.
- A webpage contains multiple images, but the user can’t see some of them, because they need to scroll down. That image is not loaded yet, reducing the amount of data spent by the user. When the image reaches the user’s viewport, it can finally be loaded.
4. What is progressive enhancement?
5. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The box model represents the way elements behave on the webpage and interact with each other, regarding some of their properties, like width, height, margin, padding, and border. There are also different display types for each element, like block, inline-block, flex, grid, etc that will change their positioning on the page.
In terms of sizing, the elements’ standard behavior is given by the following equation:
total = width + padding + margin + border
If you don’t want to have issues with your layout when determining the real width of it, you can use
box-sizing: border-box , this way the total width of your element will be the one you specify, regardless of the amount of border, margin, and padding.
In terms of positioning, the elements’ standard behavior depends on the type of it. For example, a
div element has
display: block if not specified in the code, and an
a element has a standard
display: inline-block . If you want to change these elements’ behavior, you need to specify it.
6. What are the various clearing techniques and which is appropriate for what context?
Let’s first understand what are floated elements. When you
float elements, they will affect other elements’ positioning that is in the same container. For example, you have two images and some text between them, then you give the first image
float: left , and the second one
float: right . The text would flow around the images.
clear property determines whether floated elements can’t exist besides the cleared element, it can clear left, right, or both sides. In the image above, we might not want the text to the right of the left image, or to the left of the right image. We have some techniques that could be used to fix this:
clear: both: This technique is not the most semantic, but it solves our problem. What you need to do is to create a
divelement after the floated element, then give it
clear: both, ensuring that it takes all of the remaining space beside the floated element, making all of the following elements position themselves below it.
- Overflowing a parent element: You can use the
overflow: autoproperty on a parent element containing your floats, this will make all of the next elements position themselves below it. This is also not the most semantic strategy, especially if you create the parent element only for that purpose.
.clearfixmethod: This is the best method to solve this problem since you don’t need to create any non-semantic elements, and you will stick to CSS by using a pseudo-selector. Apply the following properties to your floats and you will see the magic:
I hope you could learn something by reading this article. These are only some of the HTML & CSS questions out there, you can check this link for more examples.
This article is the 1st of a series of articles I will be writing. The next article will feature Ruby interview Q&As, I will update the links in this article when I finish the next ones.
If you liked this article, make sure to: