13

What should be the top 10 CSS and HTML questions to ask an interviewee? To test his level of knowledge if interviewee mentioned 2 yrs. experience in XHTML and CSS.

Edit:

how we can know interviewee's cross browser layout making capability? My question is only related to xhtml css coding not about design ability

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

14 Answers14

14
  1. What is the CSS box model?
  2. What is the difference between quirks mode, standards mode and almost standards mode?
  3. Tell me about hasLayout.
  4. What would be the most appropriate markup for: a navigation menu; a picture gallery; a blog post. (Why? Can you think of some alternatives? Might be good to draw these up on a whiteboard or something)
  5. What's the difference between <p class="main_header">Foo</p> and <h1 class="main_header">Foo</h1>?
  6. Why is this a bad idea?: <span class="red">Bar</span>
  7. Describe how to set opacity and how will it appear in Gecko, WebKit and IE.
  8. How can you set few properties on to textboxes as default?
  9. A design calls for png files with alpha transparency, what issues might you encounter?

Some of these are the same as zoul's questions except from a slightly different angle - I was aiming for questions that would lead to a bit of a discussion.

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177
  • 6
    hasLayout might be a little bit too harsh for a non-pro. – zoul Dec 25 '09 at 09:55
  • 1
    Mostly great points. A few issues though: * hasLayout is IE-specific, nothing to do with the CSS/HTML specs. Knowing about it isn't bad, but I wouldn't expect anyone to, and would probably mark them down if they actually implied that they might use it. * The wording of question 6 implies that only one reason is expected. There are many problems: red as a vague class name, the class name implying presentation rather than semantics, "red bar" implying that the text is to be laid out as a horizontal bar despite "red", span (inline element) used for bar (block display), etc. Question 9: ? – Lee B Dec 26 '09 at 22:19
  • 2
    It may be IE specific, but if you're going to design websites with HTML and CSS you need to know what it is, how to trigger it when it's needed and what might have triggered by accident if not. You can't mark people down for implying they might use it because they'll have to use it to get a lot of CSS stuff to work properly in IE. As far as question 6 is concerned - Bar is as in 'Foobar', not as in 'Menu Bar' or 'Mars Bar', you're reading too much into it. The reason I was looking for there was class name implying presentation. – robertc Dec 27 '09 at 17:32
  • Why is this a bad idea?: Bar? – Asim K T Mar 23 '16 at 08:51
12
  1. Why is it a good idea to split HTML and CSS?
  2. What is the difference between inline and block elements?
  3. What is a doctype good for?
  4. What is the difference between classes and ids?
  5. What is the difference between margin and padding?

These should be more than plenty to see how much candidate knows about browsers, standards and the reasoning behind HTML and CSS. Maybe you could throw in some floats, positioning and similar stuff if you want to test detailed CSS knowledge.

Update: The point is the kind of answer you are going to get, of course. If you ask about margin and padding and you get a clean drawing of box content, added padding, border line and margin, possibly collapsing against another box, you know the guy knows what he is talking about. Same goes for all the other questions.

zoul
  • 102,279
  • 44
  • 260
  • 354
  • 2
    @Jitendra I would prefer to go with robertc's questions as i m a fresher software developer with little knowlege of css and html and i couldn't answer his questions. But among these 5 question, I can answer 4. So can't judge 2yrs xprs knowledge. Moreover what i feel to ask in interview is about different issues in which firefox and IE contradict each other like png file issue, opacity etc. – Shantanu Gupta Dec 25 '09 at 09:11
  • 1
    I agree. I've never coded a complete website, and I could still answer at least 4 of these just by the little reading I have done. These probably won't show if someone has 2 yrs exeprience. – Edan Maor Dec 25 '09 at 09:15
  • 1
    ...and I can't answer some of those but I can still code even the most complex layout in xhtml strict. Theory and practical don't always tie up. – eozzy Dec 25 '09 at 09:21
  • Nimbuz: Which one of these could you not answer? – zoul Dec 25 '09 at 09:47
  • It would take around two lessons at a community college to learn the model answers to these. Whilst it's what the user asked for if you use them as the basis for finding a developer you'll end up hiring a dud eventually. – Mike B Dec 26 '09 at 22:20
4

No amount of questions in a short interview would establish a person's skill level. And there is the question of innovative qualities of a person which may not reveal itself in an interview. Some people may be introverted and shy or suffer from interview jitters others may be smooth talkers with little substance. There is also the challenge of asking objective questions not opinions.

If I show up for an audition to join a symphonic orchestra and tell them I have been playing the violin for 20 years they will not ask me about the construction of the bridge or the best material for bow strings. They give me a music score and ask me to play.

I suggest creating a simple web page that requires the techniques mentioned in the answers above, showing it to the candidate and asking the candidate to re-produce it in 30 minutes using the notepad. This will sort out the experienced from the novice.

  • Perfect way of finding the Hard-Coders opposed to the common WYSIWYGers. Ill give you a +1! – DoctorLouie Dec 25 '09 at 09:00
  • **Suggestion**: Have a once sentence explanation of "you need to give them a working problem", then your excellent suggestion, then followup with the detailed explanation. – Clay Nichols Feb 21 '14 at 13:14
4

Apart from HTML/CSS/JS specific or problem-solving questions, I would also ask what sort of tools she/he is using to get a task done. It often gives good insights about 'how' someone works and gives good/relaxed room for discussion. Good developers always have good and sharp tools.

manuel aldana
  • 15,650
  • 9
  • 43
  • 50
2

I've taken a number of tests over the past couple of years and in all honesty there are really no questions one can ask to judge how great someone is at coding in HTML and/or CSS.

First, if the interviewee claims to have written web pages over the past couple of years ask for a couple of examples. If possible get him/her to email you them, print them out and get the user to explain and critique everything about them. Completely tear through everything regarding their previous work and get them to explain everything they can about it.

Once this is done, the user should be given a small task involving the development of a web page. Give them a networked computer and clear the history, then give them a couple of web pages to be built over the space of n minutes. Tell them to document what they decide to do and what resources they'll be using and just let them get on with it. After a while check their references and look at the outcome. The user will never be able to perform their best work in such a short time but you'll be able to see how efficient they are by the quality of their work.

Once this is done, give them a broken web page and give them a small amount of time to fix it to the point of it being standards-compliant. This should be an easy task to perform for most given good use of their tools.

It's obviously not an exact science, but a range of these methods have always found suitable candidates for many companies and it seems that a lot of Web Design places rarely ask questions nowadays and will move onto simple practical exercises to ensure that the interviewee can do what is asked of them.

Mike B
  • 12,768
  • 20
  • 83
  • 109
1
  1. What do you see as the main differences between html and xhtml?
  2. Are there benefits to using one over the other?
David Thomas
  • 249,100
  • 51
  • 377
  • 410
1

Technical

Ask the person to make a simple page with a header, a two column layout, and a footer with each column having a different background color extending to the footer. Get them to flip the columns around on completion.

A couple of questions that are tricky.

How do absolutes affect the flow?

How do floats affect the flow?

(they don't)

What are two practical difference between a relative and static?

Determine their interest in CSS and HTML with 'What is the semantic web and why is it important?' People should be able to speak with enthusiasm about bring information to the blind for example. People who really work in HTML and CSS and know their stuff tend to be quite passionate about how information is there for all.

IMO, Cross browser issues are becoming less important now as more people are using modern browsers that obey standards.

Ask about their interest in design. A good sense of design concepts tends to be important when working in a team - a programmer with a sense of design can communicate why such a design may not work well within a website and can explain better some of the limitations.

Ask: what do you think of flash :-)

Gazzer
  • 4,524
  • 10
  • 39
  • 49
0

Below are 40 questions you can ask a person specifically from HTML 5 perspective.

http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe

What is the relationship between SGML,HTML , XML and HTML ?

In HTML 5 we do not need DTD why?

If I do not put will HTML 5 work?

Which browsers support HTML 5?

How is the page structure of HTML 5 different from HTML 4 or previous HTML?

What is datalist in HTML 5 ?

What are the different new form element types in HTML 5?

What is output element in HTML 5?

What is SVG?

Can we see a simple example of SVG using HTML 5?

What is canvas in HTML 5?

So how can we draw a simple line on Canvas?

What is the difference between Canvas and SVG graphics?

How to draw rectangle using Canvas and SVG using HTML 5 ?

What are selectors in CSS?

How can you apply CSS style using ID value?

What is the use of column layout in CSS?

Can you explain CSS box model?

Can you explain some text effects in CSS 3?

What are web workers and why do we need them ?

What are the restrictions of Web Worker thread ?

So how do we create a worker thread in JavaScript?

How to terminate a web worker

Why do we need HTML 5 server-sent events?

What is local storage concept in HTML 5?

How can we add and remove data from local storage?

What is the lifetime of local storage?

What is the difference between local storage and cookies?

What is session storage and how can you create one?

What is difference between session storage and local storage?

What is WebSQL?

Is WebSQL a part of HTML 5 specification?

So how can we use WebSQL ?

What is application cache in HTML5?

So how do we implement application cache in HTML 5 ?

So how do we refresh the application cache of the browser?

What is fallback in Application cache?

What is network in application cache ?

Shivprasad Koirala
  • 27,644
  • 7
  • 84
  • 73
0
  1. What are different ways to apply styles to a Web page?
  2. What is grouping in CSS?
  3. What is the Contextual Selector?
  4. What are the limitations in the use of CSS?

like the above there are 50+ awesome questions that are available here through which any CSS related interview can get cracked. Top CSS interview questions and answers

This also help to clear the concept of CSS.

ragingasiancoder
  • 616
  • 6
  • 17
Roshan Padole
  • 390
  • 4
  • 11
0

Some good questions to ask are: Describe how to set opacity. What is the box model in CSS? How do you add a CSS to a HTML? Describe the difference between a class and an element. What is the Doctype for?

Sage
  • 1
  • 1
-1

Odd no one mentioned this yet...

Since the person claims to have two years of experience, they should have something to show for it - so ask to see recent works. Even if some of their work was internal or protected by NDA or such, if they are any good, they ought to have something they've done just to try out new things or such.

I believe real examples would be the best gauge for actual skill in this case. People can easily learn various details about HTML and CSS, but being able to apply them is a totally different matter. It should also demonstrate their ability to write cross-browser compatible code (Just open their examples in IE, FF, Opera, Safari/Chrome)

Jani Hartikainen
  • 42,745
  • 10
  • 68
  • 86
-1
  1. Do you know how to clear floats?
  2. Write a simple nested list.
  3. Ask them to make a simple layout (header, 2 col, footer) and include table data. See if they go div crazy, table crazy, or stick to what's correct.
  4. What's the difference between a class and an element?
  5. When they make a layout, look closely at what they name their classes. If they are layout-specific ("left-column", "bottom-section", "red-box") and not structure-specific ("column", "header", "footer", "navigation"), they're doing it wrong.
  6. If the answer to 1. is "by using clearing divs", hit them across the face with a bat before you send them out the door.
Jason
  • 51,583
  • 38
  • 133
  • 185
  • the markup `
    ` is one of the worst possible code bloats and is equivalent to 5). learn how to clear your floats the correct way.
    – Jason Dec 27 '09 at 00:01
  • 2
    Come on, you’re clearly exaggerating. ‘Clearing’ using an auto overflow or whatever other ‘correct’ technique you might be talking about is nice, but clearing divs are fine. If they were to be *the only* thing the interviewee does ‘wrong’ in CSS I’d be quite thrilled to hire him. Or do you *really* think this is the #1 issue to bother about when hiring a HTML/CSS guy? – zoul Dec 27 '09 at 06:22
  • using clearing divs means that you do not fully understand the separation of code and style. i would not hire someone who used clearing divs if their job was to code my UI. well, i might hire him if that was his *only* problem and then show him the correct way... either way, clearing divs = horrible code smell – Jason Dec 27 '09 at 12:55
  • You'll often need the left-column classes. Of course, column:first-child or similar might be better, but then it won't work in IE6. – erikkallen Dec 27 '09 at 18:34
  • you NEVER need "left-column" classes. wow, do you guys really not understand CSS? "left-column" can be replaced with two classes, if you really want, but make them describe the CONTENT not the LAYOUT. for instance, create a class `column` and then another class, say, `business` and then apply both classes, so you have `class="business column`. Then you can have whatever generic styling you need on `column` and specialized styling on `business`, like `float: left` or whatever. and STOP SUPPORTING IE6 – Jason Dec 27 '09 at 22:28
  • you know what, i CHALLENGE YOU to improve your CSS writing. make a simple layout using classes that you like, "left-column", "right-column" whatever. then, take your layout and make it more generic. "business column" "idea column" whatever, just make sure that you use "column" as one class applied to both columns. once you've mimicked your initial layout with the second way, i want you to FLIP your columns in your CSS in both. then look at your HTML and tell me which makes more sense. – Jason Dec 27 '09 at 23:28
-1

The fancy button question seen here is the best question I've seen. It covers a range of topics without making it a written test. It's much more valuable to have them implement something like this on a whiteboard or paper to avoid getting bogged down in MDN-searchable details. Even if they don't come up with a perfect solution, you will find out how intelligently they can speak on a range of topics.

Remember, you want someone who can think and come up with creative and effective solutions. Not someone who has memorized the MDN.

Just a guy
  • 5,812
  • 4
  • 21
  • 25
-1
  1. About HTML5 and its features .
  2. method of adding CSS to HTML.
  3. New Features of CSS3.
  4. Browser Compatibility of CSS3.
  5. Different type of selector in CSS.
  6. Different between class and id selector .
  7. Different type of measuring unit in CSS
  8. HTML5 form and different type of input type option.
  9. HTML check box,select,radio ,button tags and its use.
  10. Styling the simple page