Bootstrap Interview - Questions and Answers

Bootstrap Interview questions

Pavel Malos Uncategorized
If you are just starting to learn Bootstrap, we have created a series of tutorials called 14 Days of Bootstrap 4 that can help you.

 

1. For an interview as a front-end web app developer, what HTML5, CSS3, and JS concepts should I master?

Here is a short list of what any good HTML5 front-end application developers should know:

  1. Understand that HTML5 is HTML and that the same application model is applicable. So, no new magical development paradigm was brought with HTML5 (outside of Canvas/WebGL, which is totally new), just browsers are more robust, much faster, and more capable.
  2. Understand that many of the effects in CSS3 are available in IE7 & IE8 with proprietary Microsoft CSS attributes. (rounded corners being the main exception). So, if a client wants to do “HTML5” looking app in IE7+, it is totally possible by use the “MS/IE7” old CSS properties and JavaScript animation lib like jQuery animate.
  3. Understand that JavaScript is completely Object Oriented and that there is no need to have some meta-framework like Sencha to do good OO in Javascript
  4. Understand the power of HTML and CSS for good component layout. Twitter/Bootstrap is a great (and probably the best) example of this. Simple HTML structure with simple CSS classes and you can get some great reusable UI elements.
  5. Understand that decoupling UI layout/style from behavior (i.e. JS) brings a great deal of performance and flexibility. This could be described as the Twitter/Bootstrap way vs the Sencha one. The former has a great decoupling between the HTML/CSS code and the JavaScript (which is not needed to get the layout/style), and the later, Sencha intermingles everything in a foreign all-in-one component UI and OO language (high-learning curve and high-degree of lock-in). (in other words, avoid Sencha like frameworks)
  6. Understand the pros/cons of CSS animations vs JavaScript ones. The pros for CSS transitions is that it is easier for browsers to optimize them, Safari on Mobile/PC and Chrome on PC even move them to GPUs. The cons are that CSS transitions do not work on older browsers (IE 7 & 8) and that they do not offer many controls (e.g., can’t really stop them and no curve path).
  7. Understand the benefits and the “Why” of the Web Workers. In short, it’s a way to do multi-threaded work in a single threaded environment. Before HTML5, the only way was with Ajax, and therefore including a server in the picture, now it can just be all local.
  8. Understand the Canvas vs SVG. This one is a tricky one, as there are a lot of “social-engineering” baggage behind the technical aspects. On the technical side, SVG is a DOM approach to vector graphic (and consequently retained mode) whereas Canvas is a programmatic and immediate mode approach. The catch is that sometimes it seems that Canvas gets a little bit more “love” from the browser vendor developers as SVG always had a love and hate relationship with HTML from its beginning.
  9. DOM Centric MVC. Ok, this is more an opinion than a fact, but given my expertise, HTML5 application developer (not web page developers) needs to have a good understanding of what is MVC, and realize that they do not need “do-it-all” meta-frameworks do MVC in HTML. In fact, with little DOM extension, it is relatively easy to do MVC the DOM way.
  10. onload vs jQuery:$(document).ready which one trigger first? This is a great low-level question to ask for anybody that claims they know jQuery. In short, onload trigger after, and $(document).ready trigger before and is a normalization brought by jQuery.

Web performance is a very valuable concept to master. If you’re interviewing for a company that gives a damn about how their page load time affects conversion rates, you’re very likely to get asked a question or two about web perf.

How To Interview a Front End Developer

Here are seven of my favorite questions, which could form the basis of a good bank of non-technical interview questions for a front-end developer.

1. Can you describe your workflow when you create a web page?

2. Assume you arrive at a new company that has 3 competing stylesheets, how would you best integrate them into the site?

3. Have you ever used an MVC? If so, which one and what do you like or dislike about it?

4. What are your favorite features of HTML5 and CSS3 and what would you change?

5. In your view, what’s the difference between Front End Developers and UI/UX designers and where do these positions overlap?

6. Lets look at the design of our website. Talk me through the features that draw your attention. What do you like, what do you dislike? What would you change?

7. What projects are you currently working on in your spare time? How did they come about?

 

2. Web Performance Topics

  • where in the document should scripts and stylesheets get loaded?
  • how would you delay load images “below the fold”?
  • what tools would you use to measure performance?
  • what’s new in HTTP/2.0?
  • how does a CDN work?
  • why should you use a PNG vs GIF vs JPEG vs WebP?
  • how do you unblock page rendering from long-running JavaScript?
  • what is jank and how do you fix it?
  • when should you consider putting images in a sprite?
  • what is RUM and how does it work? how does it differ from synthetic testing?

This is just a short list. There is so much more to talk about. Web performance is a very broad and important topic. Your value to a company will significantly increase if you’re able to master it.

Bootstrap Interview with passion

Bootstrap interview section

3. What is Bootstrap?

Bootstrap is a free open source framework for easier and faster responsive web development.

Bootstrap 4 offset not working how can I solve it?.

Offset, push, pull no longer exist in Bootstrap 4 beta so you must use auto-margins.

Example:

<div class="row">
    <div class="col-4 mx-auto">
        I'm centered and offset 4 columns
    </div>
</div>

In what way bootstrap 4 different from bootstrap 3:

In bootstrap 4 they had included some new features for example,

  • Bootstrap 3 has 4 grid system (col-xs-3, col-sm-3, col-md-3, col-lg-3).
    Bootstrap 4 has 5 grid system (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). In B4 they have removed col-xs. The (col-) covers all devices
  • In Bootstrap 3, we use col-md-offset-4 as Offset class, whereas in Bootstrap 4, we use offset-4
  • In Bootstrap 3, we use .img-responsive class for responsive images, whereas, in Bootstrap 4, we use .img-fluid
  • Bootstrap 4 supports the inverse tables, .responsive-table to the <table> element etc.

Three biggest changes (there are others obviously):

  1. CSS preprocessor: SCSS (instead of LESS).
  2. Units of measure: rem (instead of px).
  3. New layout technology: voilĂ  Flexbox! CSS3 Flexible Box

Bootstrap has a considerably good amount of changes from its v3 to v4.

Some of the major changes include:

  • Pre-Compiler Switch from Less to Sass
  • Architecture and Grid System in which new tiers are added.
  • There are a few utilities and additions to things like FlexBox and cards and much more including floating functionality and so on.
  • The .navbar class, forms

Read Why we love Bootstrap 4 and you should too!

So the interview is over, now what?

A few things need to be done after an interview has completed. ALWAYS ask questions. One of those questions being most importantly, “What’s the next step or when do you think I will hear something back?”

Other questions to think about asking are:

  • What softwares does this company utilize to complete its projects?
  • What is the work-life balance of the dev team?
  • What is the culture like of the dev team?
  • What is the ideal candidate you are searching for in this process?
  • What does a day in the life of this position look like here at ______ company?

Sharing is caring!

Pavel Malos

Creating Digital Experiences @ BootstrapBay