Intro to UI Frameworks and Libraries

Working with libraries

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

A. Combine all your dependencies into a single file.

B. Upload your CSS to the web server.

C. Add images to your website.

The correct answer is Combine all your dependencies into a single file. Explain: You will use a bundling tool to gather all your dependencies and combine them so that they can be referenced from your HTMLfile.

Introduction to responsive design

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.

• Orientation
• Aspect Ratio
• Display Brightness
• Display Size

Explain: The media queries that are a part of the CSS version 3 specification that allows developers to query display size, orientation and aspect ratio.

Using Bootstrap styles

Yes or no!

As a web developer, you will use a modifier to indicate the breakpoint in Bootstrap CSS rules.

A. Yes

B. No

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

Bootstrap grid

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

• Containers
• Rows
• Columns
• Alerts

Explain: The Bootstrap's Grid system always contains container rows and columns.

Bootstrap components

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
• card
• alert

Explain: The alert-info is a modifier CSS class to style the alert component. The alert CSS class will style an element as an alert component.

Introduction to React

Static and dynamic content

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

A. The application server

B. The web server

C, The browser

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

Single page applications

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

• Bundling
• Post request
• Lazy loading
• JSON Object

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

What is React?

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.

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

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

How React works

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

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

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

Explain: By keeping the Virtual DOM up to date, only changed elements can be updated in the Browser.

Component hierarchy

True or false

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

A. False

B. True

It is false statement. Explain: 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.