Four Interview Questions that Came Up Recently

Career Advice
1

Here are four interview questions that came up in a recent first round interview. The position was entry level front end with a consultancy. It only required HTML & CSS with JS/jQuery as nice to haves. How would you have approached/answered the following?

  1. What are data- attributes good for?

  2. What is the difference between classes and IDs in CSS?

  3. What CSS would you use to display a CSS class only available on screen-sizes less than 560 pixels?

  4. What’s a site that inspires you?

I’ll post my best recollection of the answers that I actually used in a little while.

3 Likes
2

After a long weekend of beating my head against the wall and finishing the intermediate algorithm challenges and having to look a couple of guides to help figure them out, this post makes me feel better about trying to switch from HelpDesk to FrontEnd. I am going to scout the area I am moving next month. You gave me a small small small boost in confidence.

2 Likes
3

I would have probably answered along the lines of:

  1. Data attributes are good for attaching custom data to html elements, that itself doesn’t necessarily have a semantic meaning. You’d generally access this data in JavaScript to apply custom behavior.

  2. IDs have a higher specificity than classes, if you have a p with an id of red and a class of green, than styled the font color respectively, the font color will always be red because IDs win in specificity.

  3. @media (max-width: 560px) { … }

  4. Freecodecamp, the dedication and hard work by the people involved is astounding. The fact that it’s free and will forever remain free is amazing in of itself considering the breadth of content. It is THE site that inspired me to fully commit to learning to code.

6 Likes
4

  1. Data attributes are great for quickly displaying strings with javascript. You can use them to make front-ends quick and pretty

  2. the differences between class and id in my mind is that you use an id for a one off element, and you use classes for many elements.

  3. the @ media command.

  4. I get my inspiration from many sites, not just one. I go to http://www.awwwards.com/ to see the site of the day.

2 Likes
5

What are data- attributes good for?

To me personally, data-attributes are one of the best tools to keep my code DRY. they are used to assign a “hidden” so to speak, value to an element. So for example a set of buttons, each can have it’s own data-value assigned to them, this helps a lot so you don’t have to add an event listener to every single button, instead you can just use event.target to get the value of the clicked button.

What is the difference between classes and IDs in CSS?

Classes are reusable while ids are not as they are unique to an element. As an aspiring Junior developer myself, this may be wrong, but I think IDs are necessary when you want to use anchor link navigation within your site. Also targeting an element by it’s ID in Javascript seems more straightforward.

What CSS would you use to display a CSS class only available on screen-sizes less than 560 pixels?

I would use a media query:
@media screen and (max-width: 560px){
//Define the class.
}

What’s a site that inspires you?

I’m always inspired by the things people create when given the right tools. I’m inspired by sites like FreeCodeCamp itself, it is inspiring when someone just goes out their way to create a free source of learning for others. Also I find StackOverflow inspiring, because it makes you realize that there are really smart people out there, willing to help out and it makes you want to learn more and more to get to their level to one day be the one helping out.

1 Like
6

I think the answer to classes vs. IDs in CSS is specificity. IDs will take precedence over a class on the same element.

1 Like
7

  1. I think one of the coolest examples of this is data-bind in knockout which is good for controlling text and appearance, control flow of the view, and binding form fields in realtime to the model(s) and view model, So good for a lot. And that’s all via just one data-* attribute, Infinite potential remains for code to embrace html cleanly through data-*.

  2. An ID should be unique within a document identifying one specific element. A class may apply to multiple elements. This can be handy for elements that will be treated as a group.

Either for appearance (in CSS)

.allTheseLookTheSame{

    background-color: gray;
    border-style: solid;
}

or code

$('.allTheseDoTheSameThing').click(function(){
    //do the same thing
})

That said classes are sometimes applied to singletons like a main .container demarking its general role and appearance even if it’s unnique in that document: a class apart :slight_smile:

3.Classes and ID’s can be combined to afford us both precision and convenience in handling elements.

@media (max-width: 560px) { ... }

4.To my mind the internet is the Great Library of its time, or the library computer of Star Trek or the Multivacs of Asimov: the the continually evolving sum knowledge of the collective human mind. So I’m in love with sites like Wikipedia,tvtropes.org, Wikia, Stack Exchange communities (especially Stack Overflow and Superuser, but also English). And forums of all kinds. Lately I spend a lot of time on Free Code Camp both to get help and help others.

1 Like