UI Frameworks

Course 1 – Introduction to Front-End Development quiz answers

Week 3: UI Frameworks

Meta front-end developer professional certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

UI Frameworks INTRODUCTION

In this Coursera Meta front-end Developer Professional Certificate module, you will learn how to use the Bootstrap framework to build responsive web interfaces. UI frameworks like Bootstrap are extremely useful when it comes to development, as they provide a comprehensive set of tools and resources that help save time and effort in building an interface. By taking advantage of these frameworks, developers can focus on more complex tasks such as styling and animation or even building custom components instead of worrying about the fundamentals.

With this module, you will gain knowledge about the benefits of using a UI framework when developing for the web. You will also be able to create extensible, consistent interfaces, and look great on any device with minimal effort.

Learning Objectives

  • Outline the concepts that exist in most UI frameworks using bootstrap as an example to directly reference common practice
  • Use the Bootstrap CSS Framework to create webpages
  • Leverage bootstrap documentation to reproduce and modify CSS components
  • Use bootstrap themes
  • Describe the basics of react in relation to other frameworks and web technologies

SELF REVIEW: WORKING WITH BOOTSTRAP GRID

1. When viewing the page in the web browser, is the logo centered on the webpage?

  • Yes (Correct)
  • No

Correct: The text-center CSS class centers the image.

2. When viewing the page in the web browser on a desktop, do the four menu items display in one column?

  • Yes (Correct)
  • No

Correct: The two div elements take up half the row each on desktop. This is specified using the col-lg-6 CSS class (6 out of 12 Bootstrap columns).

3. Use the developer tools to preview the webpage on a mobile device. How many columns does the content display in?

  • 0
  • 1 (Correct)
  • 2
  • 3

Correct: The two div elements take up a full row each on mobile. This is specified using the col-12 CSS class (12 out of 12 Bootstrap columns).

4. When setting up a Bootstrap website, what is the first element you would add? 

  • Container (Correct)
  • Row
  • Title
  • Reference

Correct: Correct! The first element I add when setting up a Bootstrap website is a container, as it is required to be able to use the Bootstrap Grid System.

5. As a developer, deploying your application to a web server, you will use a bundling tool to:  (select the correct answer)

  • Combine all your dependencies into a single file. (Correct)
  • Upload your CSS to the web server.
  • Add images to your website.

Correct: That is correct! You will use a bundling tool to gather all your dependencies and combine them so that they can be referenced from your HTMLfile. 

6. There are media queries that are a part of the CSS version 3 specification. What do they allow developers to query in order to conditionally apply CSS rules? Choose all that apply. 

  • Aspect Ratio (Correct)
  • Orientation (Correct)
  • Display Brightness
  • Display Size (Correct)

Correct: That’s correct! The media queries that are a part of the CSS version 3 specification that allows developers to query display size, orientation and aspect ratio. 

Correct: That’s correct! The media queries that are a part of the CSS version 3 specification that allows developers to query display size, orientation and aspect ratio. 

Correct: That’s correct! The media queries that are a part of the CSS version 3 specification that allows developers to query display size, orientation and aspect ratio. 

7. Yes or no! As a web developer, you will use a modifier to indicate the breakpoint in Bootstrap CSS rules. 

  • Yes
  • No (Correct)

Correct: That’s right! Bootstrap modifiers add a CSS class to change the visual style of components. You will use an infix to indicate the breakpoint in Bootstrap CSS rules. 

8. Bootstrap’s Grid System is structured with 3 types of elements. Select the correct types from the following options:

  • Containers (Correct)
  • Columns (Correct)
  • Rows (Correct)
  • Alerts

Correct: That’s correct! The Bootstrap’s Grid system always contains container rows and columns. 

Correct: Correct! The Bootstrap’s Grid system always contains container rows and columns. 

Correct: Correct! The Bootstrap’s Grid system always contains container rows and columns. 

9. If I want to notify clients that Little Lemon has added a new burger to their menu. To do this I will use a Bootstrap Component. Which CSS classes can I use? Select all that apply.

  • alert-info (Correct)
  • alert (Correct)
  • card

Correct: That is correct! The alert-info is a modifier CSS class to style the alert component.

Correct: That is correct!  The alert CSS class will style an element as an alert component.

SELF REVIEW: WORKING WITH BOOTSTRAP COMPONENTS

1. In the Browser Preview, does the New badge display beside the Falafel heading?

  • Yes (Correct)
  • No

Correct: That’s correct! The badge element is specified by the span element inside the heading.

2. In the Browser Preview, does the alert display below the Order Online button?

  • Yes
  • No (Correct)

Correct: That’s correct! The alert is displayed at the top of the page.

3. In the Browser Preview, does the Order Online button display using Bootstrap button design?

  • Yes (Correct)
  • No

Correct: That’s correct! The CSS classes ‘btn btn-primary’ will apply Bootstrap’s button design.

KNOWLEDGE CHECK: INTRODUCTION TO UI FRAMEWORKS AND LIBRARIES

1. To reference a JavaScript script or file in an HTML document, you use the ______________ tag.

  • javascript
  • library
  • script (Correct)
  • code

Correct: That’s correct! The script tag is used to reference a JavaScript script or file.

2. If your application requires a library or framework to run, this is called a ______________.

  • child
  • parent
  • dependency (Correct)

3. A point at which a website’s content and design will adapt in order to provide the best user experience is called a ______________.

  • Design Point
  • Breakpoint (Correct)
  • Box Point

Correct: That’s correct! A responsive breakpoint is the point at which a website’s content and design will adapt in order to provide the best user experience.

4. The Bootstrap Grid System always starts with which element?

  • Container (Correct)
  • Row
  • Column
  • Component

Correct: That’s correct! The container element is the base element for using the Bootstrap grid.

5. The responsive breakpoint for Bootstrap CSS rules is determined by the ______________?

  • Modifier
  • Infix (Correct)
  • Correct:

That’s correct! Infixes are used for the responsive breakpoints.

6. In website design, dynamic content is usually generated from where?

  • The application server (Correct)
  • The browser
  • The web server

Correct: Correct. The application server generates the dynamic content that the web server sends back to the user’s browser.

7. Which of the following are SPA approaches to serving code? Select all that apply.

  • Bundling (Correct)
  • Lazy loading (Correct)
  • JSON object
  • Post request

Correct: Yes, bundling will return all resources immediately and lazy loading returns only the minimum required resources.

8. You are developing a SPA, or Single Page Application. Why is it beneficial to use React during your development? Choose all that apply from the list below.

  • Re-use components. (Correct)
  • Maintain code in the long term. (Correct)
  • Write less code to implement functionality in a web browser. (Correct)
  • Simplify testing. (Correct)

Correct: All answers are correct! React allows developers to write less code to implement functionality in a web browser, it helps them maintain code in the long term and simplifies testing, and it also allows developers to re-use components when building their applications.

KNOWLEDGE CHECK: INTRODUCTION TO REACT

1. Dynamic content is faster to generate than static content.

  • True
  • False (Correct)

Correct: That’s correct! Dynamic content must be generated by an application server before the web server sends the content in a HTTP response. Static content is sent directly from the web server.

2. Single Page Applications allow users to interact with a website without re-downloading the entire webpage.

  • True (Correct)
  • False

Correct: That’s correct! Single Page Applications will rewrite the current page as the user interacts with it.

3. React applications are built using reusable pieces of code called ______________.

  • Components (Correct)
  • Elements
  • Code snippets

Correct: That’s correct! React applications are built using Components.

4. To improve performance, React uses a ______________ to reduce updates to the browser DOM.

  • Virtual DOM (Correct)
  • New DOM
  • Copy DOM

Correct: That’s correct! React uses a Virtual DOM to represent the browser DOM in memory.

5. React applications have at least 1 component called the ______________ component.

  • Root (Correct)
  • Tree
  • Origin

Correct: That’s correct! React applications start with the Root Component, also known as the App Component. 

6. Indicate the correct process that React uses to ensure that your application is fast and responsive to user input:

  • React updates the browser DOM and compares it to the previous version of the browser DOM. If a change has occurred, only that element is updated in the virtual DOM. Changes are then shown on the website.   
  • React updates the virtual DOM and compares it to the previous version of the virtual DOM. If a change has occurred, only that element is updated in the browser DOM. Changes on the browser DOM cause the displayed webpage to change. (Correct)  

Correct: Yes, that’s correct! By keeping the Virtual DOM up to date, only changed elements can be updated in the Browser.

7. True or false. React components cannot be re-used. Each component needs to be coded according to the tree of components.

  • False (Correct)
  • True

Correct: Yes, that’s correct! This statement is false. The great benefit of developing your website with React is that components can be reused so that you do not need to code every component from scratch.

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Liking our content? Then don’t forget to ad us to your bookmarks so you can find us easily!

Weekly Breakdown | Meta Study Guides | Back to Top

Subscribe to Our Newsletter

MODULE QUIZ: UI FRAMEWORKS

1. If a library depends on another library, it forms a ______________.

  • Framework Tree
  • Dependency Tree (Correct)
  • Dependency Document
  • Library Box

2. How many columns does Bootstrap’s responsive grid consist of?

  • 10
  • 8
  • 14
  • 12 (Correct)

Correct: That’s correct! Bootstrap uses a 12 column responsive grid.

3. To change the style of a Bootstrap component, you use ______________.

  • an infix
  • a modifier (Correct)

Correct: That’s correct! Modifiers are used to change a component’s style.

4. To improve performance, web servers can keep a copy of dynamic content in a ______________.

  • Cloud
  • Cache (Correct)
  • DOM

Correct: That’s correct! Dynamic content can be stored in a cache and updated based on time and/or user interaction.

5. What are the two main approaches for serving code and resources in a Single Page Application called? Select two.

  • Packets
  • Bundling (Correct)
  • Code Splitting (Correct)
  • Code Boxing

Correct: That’s correct! Large applications can be split into multiple bundles that are loaded as required by the application.

6. React is a ______________ that can be used to create single page applications.

  • Library (Correct)
  • Framework

Correct: That’s correct! React is a library that can be used to build single page applications.

7. Components allow developers to improve development efficiency by reusing code.

  • False (Correct)
  • True

Correct: That’s correct! Components can be reused in multiple parts of your application.

8. A React application is built up of a tree of components called the Component ______________.

  • Branch
  • Root
  • Hierarchy (Correct)
  • Library

UI Frameworks CONCLUSION

With an understanding of the basics of how to use the Bootstrap framework, you can now begin building responsive interfaces for your web applications. The benefits of working with UI frameworks such asBootstrap are many and varied, but include increased efficiency and consistency in your coding, as well as easier responsiveness across devices.

If you’re interested in learning more about web development and design, be sure to check out Coursera’s wide range of courses on these topics. Join us today to start learning!

Previous Week
Next Week 4

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe