Face questions and exercises about CSS

If you are in a need to interview someone with the skills and knowledge of CSS, it is a bit difficult to think about it. I put together what I can think of, and provide you with reference.

practice to do

As they say, the actual work is very important. Of course, it's more important for people to work through exercises. These are some exercises that are not particularly difficult and anyone or no CSS experience should be done. It doesn't make any sense to just watch or listen. It's perfect to do exercises in Codepen.

Create this button

I see an idea in Mobify's Codepen account. Give you a picture of a button and tell everyone:

Create a button that uses only CSS properties

This will be a powerful test case for testing candidates ' CSS3 skills. This button has a lot of styles, let's look at it together:

• How do they handle multiple borders? Here, itbox-shadowmay be the best way.
• Are they usingtext-transform:uppercase;to convert text to uppercase? It's going to be the best.
• What do they do with the stars? Pseudo elements will be a good candidate for this. Did they use Unicode or font icons?
• Did they usetext-shadowto do delicate processing?
• How do they make the main background of the button? Usinglinear-gradientskills will be a good technique, orbox-shadow.
• Do they use nesting to achieve rounded corners?

I hope I didn't destroy Mobify's recruiting process! But to be honest, I don't think these things are fake. You can do it, talk about it, or you can do nothing about it.

Repair Sidebar

The right column is now squeezed below the content. Give me some different ways to solve this problem.

Even if the two columns are 75% and 25% widths, and the float method is used, the sidebar still falls. The reason is because the actual width of the case exceeds the 100%--becausepaddingthey add up to more than. There are many ways to correct:

• Using the appropriate elements is thebox-sizing:border-boxmost effective solution.
• Subtracting a value from a property in ancalc()elementwidthpaddingis another method.
• Adding an extra container inside the element and placing it inpaddingthis new internal container is a fix and is supported by many browsers.
• This is another way to adjust the data in a mathematical way. For example, the column reduces width by 4%, then the inner margin is 2%.

There are other ways. They can think of more solutions and be more creative. Welcome to offer.

To make a fixed-width design fluid

Here's a design. It has a fixed width of "800px". Do you have a better way of making him fit any screen size?

This is only a response design factor (they should be familiar), but it's still important. This helps him to choose the rational layout in a reasonable space. I have some ideas:

• Change the width of pixel values to percent values (how do they handle the conversion of the data?) ）
• What special things do they do on the biggest screen or small screen?
• Did they try to use a solution to solve a responsive image?
• Does the new design retain the original importance of hierarchy inheritance?
• Are they back to your problem? (A lot of things to ask here, including other resources that might be available.) ）
• Did they test it? (Make sure it's really useful and find the META tag you want.) ）

Replacing logos with images

<a href="/" class="logo">Company</a>

Accessibility and semantic image replacement has been a multi-year CSS topic and "best practices" have been discussed for many years. Let them tell you how you can do a lot of ways to achieve this effect to see if they really use CSS. He is not just a matter of knowing how to do it, but knowing how to do it in a variety of ways. Copyright is owned by the author.
For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.
Original: https://www.w3cplus.com/css/interview-question-css.html © w3cplus.com

How to use Google to find out what the default value of backface-visibility is
Being able to find what you need quickly and efficiently through Google is a very important part of every developer's work. Are they finding it quickly? Did they find the right answer? Did they find the specified information on the search results page?

Maybe this question doesn't use Google search, so you can see which search engines are used. There is no special bias here, but if it's not Google, what search browser do you expect them to use as an effective search?

Question to ask
Darcy Clarke has been pushing this for some years. I will update some, plus some of my own, to elaborate.

What is the CSS box model? What CSS properties are there?
The basic principle of the CSS box model is to understand the layout and size. It consists mainly of the following:

Width and height (or lack, default and contents)
Padding
Border

Margin is relevant but not strict for the box model. I will mention this extra, but not including it.

What is Sass, LESS and Stylus? Why do you want to use them? How to use Compass related Sass?
They are CSS preprocessors. He is an abstraction layer on CSS. They are a special grammar/language compiled into CSS. They are easier to manage with CSS, such as variables, blends, and to handle front ends (among other things). They are easy to do best, like connecting and compressing CSS.

Knowing their differences or using their experience can add points. The extra points are to know how to use things like Compass, Bourbon, Leshat, Nib, etc., and to understand how they are connected.

Online resources for some problematic CSS references
Good at searching for problems using a valuable work skill. There is no shame in this. I am ashamed because "you should know this" and still keep on licking. If you don't have time to do these things, you only need to search for information in the resources to tell you.

Google can find a very good answer (because it's true, we all know it). But being able to say that certain websites are a good point, they have done some collection and are familiar with some of the nets, and these are their favorite. For example, MDN (Mozilla Developer Network) is a good answer.

Describe a "reset" CSS file and how to use it. Do you know normalize.css? Do you understand the difference between them?
There are a lot of reset styles, and a front-end developer definitely has a common way to reset CSS files and know how to use them. Are they doing blindly or do they know why? The reason is that different browsers have different default styles for some elements. If you don't handle them, there will be necessary risks or more dramatic sex in different browsers.

You may use Normalize instead of your reset style file. It does not reset all style styles, but only provides a reasonable set of default style values. It can make many browsers consistent and reasonable, but does not disturb other things (such as the bold title).

In this respect, every reset cannot be done. It does have more than one reset, it handles quirks that you never have to consider, such as inconsistent HTML elements or line-height inconsistencies.

What are the various techniques for clearing the float?
Float is very simple. As you know, you can use it to make layouts and grid systems, and it's compatible with all browsers. Everyone knows that floating can cause elements to collapse. That is, the parent element of the floated element does not have a height. For example, a parent element contains a floating element that will collapse to zero height. You can handle it as follows:

Use clearfix (know that Micro clearfix can add points)
Parent element float is also a method
The parent element uses the overflow attribute and sets the visible value
Creating a BFC can add points. It may be necessary to nest something like: <br style="clear: both;">.

Interview questions and exercises related to CSS

As a question of reward, you can ask them to compare to create a grid using inline-block or float. Good answer: Either way has a problem. With inline-block, you need to deal with the blanks, and with float you need to clear the float.

What are Sprites and why should they be used? How did you create them? What is the possible way to replace Sprites?
Sprites essentially combine multiple images into one image. Use them for reasons of performance. In general, the slowest thing a website can do is to request a resource. The fewer requests a website needs, the faster it will be. Fast is equal to good. It is good to synthesize a single request for multiple requests.

Interview questions and exercises related to CSS

Ask them how to get Sprites, they are very familiar with them. Creating Sprites manually is certainly a possibility, but it is not very efficient. There are tools to improve efficiency, such as: SpriteCow, SpriteMe, Spriting with Compass, or Grunticon. It is very interesting to hear these parts.

Sprites are raster images. When asked about alternatives, good answers may be related to facts, and Sprites usually does not require rasters for Icons and Icons. SVG icons, font icons, character encodings, and more.

If you are interested in the knowledge of font icons, you can read them here. - desert

What is accessible in CSS?
Hidden content is a key point here. If you are trying to hide visually from his content, just accept display:none;.

CSS controls colors, so color accessibility is relevant. Focusing on styles with CSS is also very important.

Related to HTML and JavaScript, there are more accessibility things, so mentioning that thing is more powerful, but I think this is an interesting topic to focus on CSS.

What is the difference between inline, inline-block and block?
Without changing the elements in the line, it is possible to add points to their details.

What tools do you use for cross-browser testing?
They should have their own ideas. Perhaps a web-based testing tool, such as BrowserStack, may be based on virtual machine testing, such as Virtual Box, perhaps directly on a different computer.

Make sure cross-browser testing is part of the front-end design effort. You don't like him, but you can't hate him. Right here, this is work. What kind of work is the job you want? .

What is your favorite web design work game tool?
What is their favorite code editor? Where did they look for inspiration? What are their experiences in version control? Where do they test the quality of their work? Support? Are there different deployment methods for working together? Do they know Photoshop or other visual design software? how to choose? Is there a better terminal?

These are just a few examples. It is interesting to hear them say that they use any software to do their work. It's interesting to feel that you have the work you use (and the better the tools they like). If you have some exciting tools, give them extra points.

Say a rendering problem on a website on IE8, you decide to support him, how did you get started with it?
This will be another question. It will be more specific to ask questions about the browser test. Perhaps a more difficult option is Google Nexus running Android 2.3 instead of IE8. Can they find a simulator? Will they look for a design lab? Will they apply to the company to purchase equipment for testing? Will you find a friend to help with the test?

What is responsive design?
It is about the production of a website or the production of a web page. Different devices have different sizes and different functions. Responsive design is designed to get everyone to run the site on these devices. Part of it is media queries and different visual effects. Part of it is a different resource (such as different Javascript to handle touch and click to automatically adapt to the screen).

If you have never heard of responsive design or have a deep interest in responsive design, I suggest you click here to read more tutorials on responsive design. - desert

Have you done grid layout? Do you have any thoughts?
Why do they need a grid system? How did they create a grid system? Did you create or use a grid tool yourself? Do they like grid tools? What kind of class name do they like to define the grid? Are they mobile first or desktop first? Is grid a help or an obstacle? Can the grid be automatically applied to any project?

What are the benefits of SVG?
SVG is a vector-based image format. This is a valid format (small file). You can scale them and keep them clear under any size (refer to the small size of the grating can be extra points). You can use CSS and JavaScript to decorate them and do a lot of things with SVG-specified filters, such as blurring.

Have you ever created a print style for a website?
What method do they take for a website's print style? How did they test it?

You are responsible for editing the design, using non-standard web fonts, what do you do?
One is not the main method @font-face, let them talk about how it works? Talk about how he is using CSS technology and talking about how to serve, providing the body and making it easier and more. Google fonts, Typekit, Font Deck, Cloud Typography and more.

If you know the @font-face or Firefox browser cross-domain issues, you can add points.

More Chinese tutorials on @font-face, there are many tutorials in W3cplus, if you are very grateful for this, slam here. - desert

Explain what happens to this CSS selector?
[role=navigation] > ul a:not([href^=mailto]) {

}
Any element that has a role attribute defined and has a value of navigation, with all the link elements except the mailbox link under its child list.

Be able to articulate this selector in words, proving that you understand them and can use them to do some technical communication.

your thoughts
When you interview a job about CSS, what kind of problems do you have? Or how did you ask the interviewer? Or what do you think is the best question?