Front End Study Guide

This study guide is intended to help you prepare for the Front End assessment exam questions. The following questions will not appear on the official exams, but have been designed to highlight key concepts that will be covered and approximate the level of difficulty of the exam questions.

Please bear in mind that all Deep Dive Coding Assessment Exams are open book, open internet, open DevTools, and open Google.

HTML

1. True or False: The HTML DOM is a programming interface for HTML.

2. In a few sentences, explain the function of the <meta charset="utf-8" /> tag.

3. Which of the following HTML elements are block elements? Select all that apply.

  • <img>
  • <aside>
  • <span>
  • <a>
  • <kbd>
  • <label>

CSS

1. List three reasons why the following line of code is considered bad practice.

<img src="img/photo.jpg" alt="my picture" style="border: 5px solid red;" />

2. True or False: Pseudo-Class selectors have a higher specificity than Class Selectors.

3. In a few sentences or less, define what CSS Specificity is.

Bootstrap

  1. Which of the following statements are true regarding Bootstrap 3? (Select all that apply.)
    1. On the xs breakpoint, the Bootstrap grid defaults to a horizontal, stacked layout.
    2. Bootstrap JavaScript plugins require jQuery.
    3. Placing navigation menus inside a <nav> tag helps it to be identified correctly by assistive technologies.
    4. Bootstrap 4 supports IE9 by default.
    5. All of the above.
  2. Examine the following code. What Bootstrap classes should I add to each <section> so that they will be laid out in a single row in three equal width columns on xl screens only, and remain stacked and full width on xs, sm, md, and lg screens?
    <div class="container">
      <div class="row">
        <section>section one</section>
        <section>section two</section>
        <section>section three</section>
      </div>
    </div>

User Experience (UX)

  1. Regarding Mobile First Web Design and Development, what is the difference between Progressive Enhancement and Graceful Degradation?
  2. Which statement is true regarding User Experience Design?
    1. In addition to defining the taxonomy of a site's content, sitemaps can provide a structure upon which you can base development costs and can help a team keep an eye on project scope.
    2. Collecting analytics data and running user tests are key objectives regarding the release of a MVP.
    3. Wireframing refers to the process in which you begin planning your product's layout and defining the User Interface.
    4. All of the above.