NEW
Font size
WorksheetsWeb Development
Total questions: 20
Worksheet time: 10mins
What is an icon library?
A collection of video clips used in web design
A software used to build mobile applications
A collection of ready-made icons used in web and app development
A book that explains how to draw icons
Which of the following is an example of an icon library used in class?
Google Fonts
Font Awesome
Bootstrap Grid
Visual Studio Code
Tailwind CSS color values usually range from what to what?
10 to 100
100 to 1000
50 to 950
0 to 255
What does the Tailwind class bg-red-500 do?
Sets the text color to red
Sets the background color to a shade of red
Applies a red border to the element
Changes the hover color to red
What does the Tailwind class text-red-500 do?
Sets the background color to red
Adds a red shadow to the text
Sets the text color to a shade of red
Underlines the red text
What does the HTML structure of an icon typically look like?
<div class="icon"></div>
<icon class=""></icon>
<img src="icon.png" />
<i class=""></i>
What are CSS libraries?
Books that teach how to write CSS code
Pre-written sets of CSS code used to style web pages easily
Apps used for testing website speed
Collections of HTML templates
Which of the following is an example of a CSS library?
React
Tailwind CSS
Python
MongoDB
Which of the following is a difference between font libraries and icon libraries?
Font libraries are used for animations, while icon libraries are used for images
Font libraries provide text styles, while icon libraries provide visual symbols
Font libraries are for backend development, icon libraries are for frontend
Font libraries are written in JavaScript, icon libraries in Python
Which of the following is an example of a popularly used font library?
Font Awesome
Bootstrap
Google Fonts
Tailwind CSS
Google Fonts is both a font library and an icon library?
The abbreviation CLI stands for:
Command Line Internet
Code Logic Interface
Command Line Interface
Centralized Login Interface
Which of the following is the best way to install Tailwind CSS for a development project?
By copying code from random blogs
By using the documentation via the official website
By downloading styles from social media
By typing Tailwind classes manually without setup
When installing Tailwind CSS via CLI, which of the following must be installed first?
Python
MongoDB
Node.js
Google Chrome
In class, some of your classmates couldn’t install Tailwind via CLI. What alternative method was used for them?
They installed it using Python
They downloaded Tailwind from GitHub
They used the Tailwind CDN link
They skipped using Tailwind entirely
How do you make use of your own custom styles in CSS?
By using only inline styles
By copying styles from Tailwind
By defining them in your traditional CSS file
By editing the browser settings
Because the official Font Awesome site required a premium plan for some features, what alternative method did we use to install the icon library in class?
By downloading the icons manually
By using a USB transfer
By installing it with Python
By using the CDN link
What does the Tailwind CSS class border-b do?
Adds a border to the top of an element
Adds a border to all sides of an element
Adds a border to the bottom of an element
Removes all borders from the element
When using the CLI method in Tailwind CSS, what must you do before updates can reflect on your project?
Refresh the browser
Reinstall Tailwind
Compile your code
Delete the old styles
In Tailwind CSS, which class is used to center content horizontally in a flex container?
items-center
center
text-center
justify-center
