CSS Libraries and Frameworks Quiz

To pass the quiz, you must correctly answer at least 9 of the 10 questions below. # --quizzes-- ## --quiz-- ### --question-- #### --text-- What is a CSS framework? #### --distractors-- A tool to fix CSS errors. --- A tool to lint CSS files. --- A formatter for CSS files. #### --answer-- A library for CSS styles. ### --question-- #### --text-- Which of the following is a popular utility-first CSS framework? #### --distractors-- Template CSS --- Loading CSS --- Minimal CSS #### --answer-- Tailwind CSS ### --question-- #### --text-- What is a disadvantage of CSS frameworks? #### --distractors-- Too few components. --- No customization options. --- Improved browser support. #### --answer-- Can bloat CSS files. ### --question-- #### --text-- What does SCSS stand for? #### --distractors-- Super Cascading Style Sheets. --- Structured CSS. --- Simple CSS. #### --answer-- Sassy CSS. ### --question-- #### --text-- Which of the following is a feature of Sass? #### --distractors-- Comments --- CSS linting. --- Inline CSS. #### --answer-- Mixins ### --question-- #### --text-- Which of the following is the correct way to use utility classes in Tailwind CSS? #### --distractors-- ```html <button class="color-blue text-color font-size allow-hover round-btn"> Button </button> ``` --- ```html <button class="blue text font-size hover round-btn margin-full"> Button </button> ``` --- ```html <button class="set-blue set-text set-font set-hover round-btn padding-full"> Button </button> ``` #### --answer-- ```html <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700"> Button </button> ``` ### --question-- #### --text-- What are the two types of CSS frameworks? #### --distractors-- Tablet first CSS frameworks and Component-based CSS frameworks. --- Utility-first CSS frameworks and Lazy loading CSS frameworks. --- Minimal CSS frameworks and Utility-first CSS frameworks. #### --answer-- Utility-first CSS frameworks and Component-based CSS frameworks. ### --question-- #### --text-- What is the file extension for SCSS? #### --distractors-- `.sass` --- `.scsss` --- `.css` #### --answer-- `.scss` ### --question-- #### --text-- Which of the following is the correct way to define a variable in SCSS? #### --distractors-- ```css #primary-color: #3498eb; header { background-color: #primary-color; } ``` --- ```css >primary-color: #3498eb; header { background-color: >primary-color; } ``` --- ```css ?primary-color: #3498eb; header { background-color: ?primary-color; } ``` #### --answer-- ```css $primary-color: #3498eb; header { background-color: $primary-color; } ``` ### --question-- #### --text-- Which of the following is the correct way to define a mixin? #### --distractors-- ```css --mixin center-flex { display: flex; justify-content: center; align-items: center; } ``` --- ```css >mixin center-flex { display: flex; justify-content: center; align-items: center; } ``` --- ```css mixin center-flex { display: flex; justify-content: center; align-items: center; } ``` #### --answer-- ```css @mixin center-flex { display: flex; justify-content: center; align-items: center; } ```