CSS Web production: CSS face test questions and exercises

Article Introduction: 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.

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.

How to use Codepen? Detailed use can be clicked here. --Desert

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, it box-shadow may be the best way.
• Are they using text-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 use text-shadow to do delicate processing?
• How do they make the main background of the button? Using linear-gradient skills will be a good technique, or box-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%--because padding they add up to more than. There are many ways to correct:

• Using the appropriate elements is the box-sizing:border-box most effective solution.
• Subtracting a value from a property in an calc() element width padding is another method.
• Adding an extra container inside the element and placing it in padding this 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>
		

Having access and semantic image substitution has been a topic of many years of CSS and "The best way" has been discussed for years. Let them tell you how you can do many ways to achieve this effect to observe that they really use CSS. Not only does he know how to do it, but he knows how to do it in many ways.

There are more ways to replace text on images, and if you're interested, you can bash here. --Desert

How to use Google to find out backface-visibility what the default value is

Being able to quickly and efficiently find what you need through Google is an important part of every developer's job. Did they find it quickly? Did they find the right answer? Did they find the specified information on the search results page?

Perhaps the problem is not using Google search, which is to see which search engines are used. There's no particular bias here, but if it's not Google, what search browsers do you expect them to use as a valid search?

The question to ask

Darcy Clarke has been pushing the matter for years. I will update some, plus some of my own, to elaborate.

What is the CSS box model? What CSS properties are here?

The basic principle of the CSS box model is to understand the layout and size. It consists mainly of the following parts:

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

Margin is relevant but not strict for box models. I will mention this extra, but not included.

What are Sass, less and stylus? Why do people use them? How do I use compass-related sass?

They are CSS pre processor. He is a kind of abstraction layer on CSS. They are a kind of special grammar/language compiled into CSS. They are easier to manage using CSS, such as variables, blending, and handling the front end (among other things). They are easy to do best, like connecting and compressing CSS.

Know their differences or use their experience to add points. The extra points are to know how to use such as compass,bourbon,lesshat,nib, and how they relate to each other.

Some problematic CSS references to online resources

Good at searching questions using a valuable job skill. It's not any shame. Ashamed because "you should know this" and still wandering. If you don't have time to do these things, you just need to search for information in your resources to tell you.

Google can find a very good answer (because it's true, we all know it). But being able to say a few specific sites is a good point, they've done some collecting and familiarity with some of the nets, and these are their favorites. For example, MDN (Mozilla Developer Network) is a good answer.

Describes a "reset" CSS file and how to use it. You know what normalize.css ? Do you know the difference between them?

There are so many reset styles that a front-end developer must have a common reset CSS file and know how to use them. Are they doing it blindly or do they know why? The reason is that different browsers have different default styles for some elements, and if you don't deal with them, there is a need for risk in different browsers, or more dramatic sexual occurrences.

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 allows many browsers to be consistent and reasonable, without disturbing other things (such as bold headings).

In this respect, it is not possible to do every reset. It does have more than one reset, and it deals with quirks that you never have to consider, like HTML elements that are audio inconsistent or line-height inconsistent.

What are the various techniques for clearing floating?

Float is a very universal. As you know, you can use him to make layout and grid systems and to be compatible with all browsers. As we all know, floating can cause the elements to collapse. That is, the parent element of the floating element does not have a height. For example, a parent element contains a floating element that collapses to a height of 0. You can do this in the following ways:

• Use clearfix (Know 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. You might want to nest something, such as: <br style="clear: both;"> .

As a bonus question, you can ask them to compare using inline-block or float creating a grid. Good answer: Either way there is a problem. Use inline-block , you need to deal with blank issues, use the float float you need to clear.

What are sprites and why should they be used? How did you create them? What are the possible alternatives to sprites?

The essence of sprites is that more than one picture is spelled into a picture. For performance reasons, use them. In general, the slowest site can do is request a resource. The less you need to request a Web site, the faster it will be. Fast is equal to good. Multiple requests synthesizing a request is good.

Ask them how to get the sprites done, they know them very well. Creating sprites manually is certainly a possibility, but it's not very efficient. There are tools to improve efficiency, such as Spritecow, Spriteme, spriting with compass, or Grunticon. It's very interesting to hear these parts.

Sprites is a raster image. When asked about alternatives, good answers may all be related to facts, sprites usually icons and icons are not required gratings. SVG icons, font icons, character encodings, and so on.

If you are interested in the relevant knowledge of the font icon, click here to read. --Desert

What is accessible in CSS?

Hiding content here is a priority. If you are both trying to be invisible and his content is hidden, this is only acceptable display:none; .

CSS controls color, so color accessibility is associated. It is also important to have a direct control of the focus style with CSS.

There's more accessibility to HTML and JavaScript, so it's a great thing to mention that, but I think it's a fun topic for focusing on CSS.

inline, inline-block and block What is the difference?

Without changing the elements in the line, you can add points to their details.

What tools do you use for cross-browser testing?

They should have their own ideas. Perhaps web-based testing tools, such as Browserstack, may be based on virtual machine testing, such as the dummy Box, which may be tested directly on different computers.

Make sure that 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 job do you want to work for?

What is your favorite Web design work-game tool?

What are their favorite code editors? Where are they looking for inspiration? What are their experiences with versioning? Where do they test the quality of their work? Support it? What are the different ways of deploying them to work together? Do they know Photoshop or other visual design software? How to choose? Is there a better terminal?

These are just some of these examples, and it's interesting to hear them say that using any software to do their job. It is interesting to feel that you have to use your own work (and better tools that they like). When it comes to some exciting tools, you can add points to them.

To name a site on the IE8 of the rendering problem, you decide to support him, how did you proceed with it?

It will be another question to ask the day Browser test questions that will be more specific. Perhaps a more difficult choice problem is running Android2.3 's Google Nexus instead of IE8. Can they find an emulator? Will they be looking for a design lab? Will they apply to the company to buy equipment to test the program? Will you find a friend to help with the test?

What is a responsive design?

It is about the production of Web sites or Web page production work. Different devices have different sizes and different functions. The response is designed so that all people can make the site work on these devices. Part of the media query and different visual effects. Part of it is different resources (such as different JavaScript to handle touch and click Automatically to match screen contrast).

If you have never heard of responsive design or you have a deep interest in responsive design, it is recommended that you click here to read more tutorials on response design. --Desert

Have you ever done a grid layout? Do you have any ideas?

Why do they need a grid system? How did they create a grid system? Do you create it yourself or use a grid tool? Do they like grid tools? What class names do they like to define grids? Are they first mover or desktop? Is the 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 zoom in and out of any size to keep it clear (mention to small size under grating dominance can be added). You can use CSS and JavaScript to decorate them and do a lot of things with SVG-specific filters, such as blur effects.

Have you ever created a print style for a Web site?

What do they do for a website's print style? How are they tested?

You are responsible for editing the design, using non-standard web fonts, what would you do?

A not the main way to @font-face get them to talk about how it works? Talk about how he is using CSS technology as well as talking about how services are provided and making it easier to wait. Google fonts, Typekit,font Deck,cloud typography and so on.

You can add points if you know of @font-face a cross-domain problem with the Firefox browser.

For @font-face more Chinese tutorials, there are already a number of tutorials in W3cplus, if you are very grateful for the interest, bash here. --Desert

Explain what happens to this CSS selector.

[role=navigation] > ul
			a:not([href^=mailto]) {  }
		

Defines a role property, and navigation any element of the value that is under the list of child elements, except the link in the mailbox link.

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

What you think.

When you're interviewing for a job with CSS, what kind of questions do you have? Or how do you ask someone to come to the interview? Or what do you think is the best question?

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

Original English: http://css-tricks.com/interview-questions-css/

Chinese translation: http://www.w3cplus.com/css/interview-question-css.html