META BACK-END DEVELOPER PROFESSIONAL CERTIFICATE

Course 1 – Introduction to Back-End Development

Week 3: UI Frameworks

Coursera Study Guide

Click to Enroll in Coursera Meta Back-End Professional Certificate

CONTENT

In this module you will learn how to use the Bootstrap framework to build responsive interfaces and the benefits of working with UI frameworks.

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: 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
  • No (CORRECT)

Correct: 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: 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).

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)

Correct: That’s correct! Libraries and frameworks are dependencies of your application.

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.

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)
  • Code snippets
  • Elements

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

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

  • Copy DOM
  • Virtual DOM (CORRECT)
  • New 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.

  • Origin
  • Tree
  • Root (CORRECT)

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

MODULE QUIZ: UI FRAMEWORKS

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

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

Correct: That’s correct! A dependency tree represents how libraries depend on other libraries.

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
  • Code Boxing
  • Bundling (CORRECT)
  • Code Splitting (CORRECT)

Correct: That’s correct! Assets, code and dependencies are bundled into a single file and loaded by the application.

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.

  • True (CORRECT)
  • False

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

Correct: That’s correct! The Component Hierarchy is a tree of components starting with the Root Component.

9. 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. 

10. 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. 

  • Display Brightness
  • Aspect Ratio (CORRECT)
  • Orientation (CORRECT)
  • 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. 

11. 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.

12. 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. 

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

  • Alerts
  • Containers (CORRECT)
  • Rows (CORRECT)
  • Columns (CORRECT)

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. 

14. 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.

  • card
  • alert-info (CORRECT)
  • alert (CORRECT)

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.

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

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

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

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

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

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

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

17. 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.

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

Correct: 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.

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

  • 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)
  • 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.   

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

19. True or false

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

  • True
  • False (CORRECT)

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.

Next – Week 2
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