WorksheetsCSS-Midterm
Total questions: 151
Worksheet time: 2hrs 31mins
What is the main goal of user-centered design?
To make the website visually appealing.
To prioritize the developer's preferences.
To create a website that is intuitive and efficient for users.
To reduce development costs.
Why is it important to consider target demographics in user-centered design?
To determine the website's color scheme.
To choose appropriate design elements for the intended audience.
To decide on the website's content.
To set the price of products or services.
What is one way to gather information about user behavior on your website?
Conduct in-person interviews.
Use social media polls.
Implement analytics tools like Google Analytics.
Ask friends and family for opinions.
How does user-centered design address the goals of end users for different types of websites?
By always including advertisements to maximize revenue.
By tailoring design choices, like avoiding competing ads on e-commerce sites but including them on personal blogs.
By focusing solely on the website's visual appeal.
By prioritizing the same design for all websites.
Why is involving users directly important in user-centered design?
To allow developers to maintain full control over design decisions.
To collect feedback on user experiences and pain points for iterative improvements.
To reduce the need for analytics tools.
To finalize the design before launch.
What is dark mode?
A feature that changes the default light color scheme to a dark color scheme.
A feature that changes the default dark color scheme to a light color scheme.
A feature that changes the default font size to a larger size.
A feature that changes the default layout of a web page.
Why is it not a good idea to use pure black backgrounds with white text in dark mode?
Pure black backgrounds can cause security issues.
Pure black backgrounds can cause performance issues.
Pure black backgrounds with white text are too subtle.
Pure black backgrounds with white text can be too harsh on the eyes.
What types of colors are suggested to use in dark mode?
Red colors.
Desaturated colors.
Bright colors.
Pastel colors.
How should brand identity be considered when implementing dark mode?
Ignore brand identity to prioritize dark mode aesthetics.
Use brand elements like logos and buttons at full saturation while keeping surrounding elements desaturated.
Change the brand's colors completely to match dark mode.
Avoid using any brand elements in dark mode.
What is a key consideration for designing an effective dark mode feature?
Maximizing the use of bright, saturated colors for visual appeal.
Ensuring high contrast with pure black and white for all elements.
Prioritizing user experience and appropriate contrast levels.
Focusing only on the website's performance metrics.
What are breadcrumbs?
A navigation aid that shows the user where they are in the site's hierarchy.
A type of container for images.
A navigation aid only found on mobile sites.
A type of container for text.
When should you use breadcrumbs on your site?
You should never use breadcrumbs.
If your site has a deep hierarchy for navigation.
If your site is simple and has a shallow hierarchy.
You should only use them for mobile sites.
Which of the following is a common separator for breadcrumbs?
>>>>
||||
/
&&&
Where are breadcrumbs typically placed on a webpage?
At the bottom of the page.
In the center of the content area.
At the top of the page, above or below the main navigation bar.
Hidden within a dropdown menu.
What is a key consideration for the size of breadcrumbs?
They should be as large as possible to dominate the page.
They should be large enough to read but not take up too much space.
They should be small enough to be hidden from users.
They should match the size of the main navigation bar.
Why is it important to have a simple card design?
You want users to have a good user experience and digest the information easily.
You want users to be confused.
You want users to be overwhelmed.
You want users to be frustrated.
Why is it important to have good color hierarchy on your card design?
To make it difficult for users to understand the information.
To make the site perform better.
To highlight the most important information on the card.
To make the card visually cluttered.
What are the advantages of using high-quality media on your card design?
There are no advantages.
Users will leave the site immediately.
It will speed up the performance of the site.
Users will trust the quality of your products and services.
How should clickable areas be handled in card design?
Make only the text on the card clickable.
Ensure clickable areas are consistent and clear, such as a single button or the entire card with hover effects.
Make clickable areas random to keep users guessing.
Avoid making any part of the card clickable.
Where are card components commonly used?
Only in gaming websites.
In e-commerce, social media, and news sites.
Exclusively in educational platforms.
Only in mobile applications.
What is infinite scrolling?
A design pattern that changes the scrollbar on the page.
A design pattern that changes the size of the page.
A design pattern to change the background color of the page.
A design pattern that loads more content as the user scrolls down the page.
What is the role of a 'Load More' button in infinite scrolling?
It reloads the page.
To give users control over when they want to see more content.
It allows users to go back to previously loaded content.
It restricts the amount of data that can be loaded.
Why is it important to keep the footer accessible while using an infinite scroll?
It helps make the colors stand out more on the page.
It helps make the page load faster.
It is not important to keep the footer accessible.
So the user can access the links and important information from the footer at all times.
Why is a loading indicator important in infinite scrolling?
It changes the page's appearance to match the content.
It informs users that more content is being loaded.
It prevents users from scrolling further.
It redirects users to the top of the page.
What is the purpose of including a 'Back to the top' button in infinite scrolling?
To reload the entire page.
To allow users to quickly return to the top of the page.
To stop the infinite scroll from loading more content.
To navigate to a different website.
What is the purpose of dimming the content behind a modal dialog?
To save battery life on mobile devices.
To help users visually identify the area they should interact with.
To make the website load faster.
To prevent users from seeing sensitive information.
What does CTA stand for in the context of modal design?
Click To Activate.
Complete The Action.
Call-to-Action.
Close The Application.
Why is it important to include a close button in a modal dialog?
It's required by law in some countries.
To prevent the modal from crashing the browser.
To give users an option to exit the modal and resume their previous activity.
To make the modal look more professional.
What is a recommended way for users to close a modal dialog besides using the close button?
Pressing the Enter key repeatedly.
Clicking outside of the modal.
Refreshing the entire page.
Scrolling down the page.
What is a key accessibility concern when designing modal dialogs?
Ensuring the modal matches the site's color scheme.
Correctly managing focus on elements within the modal.
Making the modal as large as possible.
Adding animations to make it more engaging.
What is the primary goal of using a progress indication in forms or registration processes?
To entertain users while they complete the form.
To inform users about how far they are in the process and what is left to do.
To reduce the number of steps in the process.
To speed up the form submission process.
Why is it important to allow users to go back to previous steps in a form or registration process?
To let users change their answers or review previous entries.
To make the form more complex.
To limit the number of steps in the process.
To increase the time users spend on the site.
What should you consider when placing a progress indication section on a webpage?
It should be as small as possible to avoid distracting the user.
It should be easy to find and clearly labeled with context like section titles or percentages.
It should be hidden until the user reaches the final step.
It should only include a visual progress bar with no text.
Why is simplicity important when designing a progress indication section?
To make the process appear more complicated.
To avoid overwhelming users with too much information that could lead to frustration.
To hide the actual number of steps from users.
To use only advanced visual effects for appeal.
What is a recommended practice for providing context in a progress indication?
Use only a plain progress bar without any labels.
Include clear section titles, percentages, or step numbers.
Display all form details in the progress section.
Omit any numerical indicators to keep it abstract.
What is a crucial aspect of designing a shopping cart that can impact the shopping experience and sales?
The color of the shopping cart icon.
The position of the shopping cart on the page.
The number of items in the cart.
The brand of the e-commerce website.
How should users be able to update the quantity of items in their cart?
By contacting customer service.
By using a dropdown menu.
By entering a new number in a quantity input field.
By adding a new item with the desired quantity.
What is an important feature to include in the shopping cart to help users proceed with their purchase?
A 'Save for Later' option.
Multiple call-to-action buttons.
A clear and prominent checkout button.
An option to chat with a sales representative.
What is the main purpose of using progressive disclosure in design?
To increase the number of features visible at all times.
To overwhelm users with all available options.
To only show users relevant content based on their current activity.
To make the user interface more complex.
How does Google implement progressive disclosure on its search page?
By displaying all search options at once.
By offering an advanced search option that reveals more features when needed.
By hiding the search bar behind a modal dialog.
By providing a new search page for each query.
What should be avoided to ensure a good user experience with progressive disclosure?
Providing a single, clear access point to additional information.
Using multiple access points to confuse users.
Keeping important information visible at all times.
Ensuring that additional information is available when needed.
How does lazy registration impact user interaction with an application?
It immediately limits user access until they complete a registration form.
It encourages users to engage with content before asking for their registration details.
It requires users to provide payment information before accessing any features.
It makes the registration process mandatory before users can view any part of the application.
What is one of the main benefits of lazy registration in UI design?
Users can immediately make purchases without registering.
Users can see the value of the application before deciding to register.
Users are required to register to view any content.
Users can bypass all security protocols during registration.
Which of the following is an example of a platform that uses lazy registration?
A banking app requiring users to register before browsing financial products.
An e-commerce site allowing users to browse products and add items to a cart before registering.
An email service that asks users to register before reading any emails.
A health app that requires registration to access general health tips.
What is a pixel?
An absolute fixed-size unit of measurement in CSS, providing precise control over dimensions.
A relative unit of measurement in CSS.
A unit of measurement that is relative to the size of the screen.
A unit of measurement that is relative to the size of the parent element.
What are the two types of units you can use to define properties in CSS?
margins and padding.
cm and mm.
absolute and relative units.
picas and points.
Which of the following is NOT an absolute unit of measurement in CSS?
pt
rem
in
px
What happens if you set width: 50% on an element whose parent has a width of 300px?
The element will be 150px wide.
The element will be 50px wide.
The element will be 600px wide.
The element will have no width.
In the following CSS rule, what does the percentage value affect?
The width of the element.
The height of the element.
The top margin of the element.
The font size of the element.
Which of the following is NOT a good use case for percentage values in CSS?
Setting the width of a responsive container.
Defining the border-radius of a circular element.
Scaling an image within its container.
Specifying the line-height of text.
What is the main goal of user-centered design?
To make the website visually appealing.
To prioritize the developer's preferences.
To create a website that is intuitive and efficient for users.
To reduce development costs.
Why is it important to consider target demographics in user-centered design?
To determine the website's color scheme.
To choose appropriate design elements for the intended audience.
To decide on the website's content.
To set the price of products or services.
What is one way to gather information about user behavior on your website?
Conduct in-person interviews.
Conduct in-person interviews.
Implement analytics tools like Google Analytics.
Ask friends and family for opinions.
What is the main goal of user-centered design?
To make the website visually appealing.
To prioritize the developer's preferences.
To create a website that is intuitive and efficient for users.
To reduce development costs.
: Why is it important to consider target demographics in user-centered design?
To determine the website's color scheme.
To choose appropriate design elements for the intended audience.
To decide on the website's content.
To set the price of products or services.
What is one way to gather information about user behavior on your website?
Conduct in-person interviews
Use social media polls.
Implement analytics tools like Google Analytics.
Ask friends and family for opinions.
How does user-centered design address the goals of end users for different types of websites?
By always including advertisements to maximize revenue.
By tailoring design choices, like avoiding competing ads on e-commerce sites but including them on personal blogs.
By focusing solely on the website's visual appeal.
By prioritizing the same design for all websites.
Why is involving users directly important in user-centered design?
To allow developers to maintain full control over design decisions.
To collect feedback on user experiences and pain points for iterative improvements.
To reduce the need for analytics tools.
To finalize the design before launch.
What is dark mode?
A feature that changes the default light color scheme to a dark color scheme.
A feature that changes the default dark color scheme to a light color scheme.
A feature that changes the default font size to a larger size.
A feature that changes the default layout of a web page.
Why is it not a good idea to use pure black backgrounds with white text in dark mode?
Pure black backgrounds can cause security issues.
Pure black backgrounds can cause performance issues.
Pure black backgrounds with white text are too subtle.
Pure black backgrounds with white text can be too harsh on the eyes.
What types of colors are suggested to use in dark mode?
Red colors.
Desaturated colors.
Bright colors.
Pastel colors.
How should brand identity be considered when implementing dark mode?
Ignore brand identity to prioritize dark mode aesthetics.
Use brand elements like logos and buttons at full saturation while keeping surrounding elements desaturated.
Change the brand’s colors completely to match dark mode.
Avoid using any brand elements in dark mode.
What is a key consideration for designing an effective dark mode feature?
Maximizing the use of bright, saturated colors for visual appeal.
Ensuring high contrast with pure black and white for all elements
Prioritizing user experience and appropriate contrast levels.
Focusing only on the website’s performance metrics.
What are breadcrumbs?
A navigation aid that shows the user where they are in the site's hierarchy.
A type of container for images.
A navigation aid only found on mobile sites.
A type of container for text.
When should you use breadcrumbs on your site?
You should never use breadcrumbs.
If your site has a deep hierarchy for navigation.
If your site is simple and has a shallow hierarchy.
You should only use them for mobile sites.
Which of the following is a common separator for breadcrumbs?
>>>>
||||
/
&&&
Where are breadcrumbs typically placed on a webpage?
At the bottom of the page.
In the center of the content area.
At the top of the page, above or below the main navigation bar.
Hidden within a dropdown menu.
What is a key consideration for the size of breadcrumbs?
They should be as large as possible to dominate the page.
They should be large enough to read but not take up too much space.
They should be small enough to be hidden from users.
They should match the size of the main navigation bar.
Why is it important to have a simple card design?
You want users to have a good user experience and digest the information easily.
You want users to be confused
You want users to be overwhelmed.
You want users to be frustrated.
Why is it important to have good color hierarchy on your card design?
To make it difficult for users to understand the information.
To make the site perform better.
To highlight the most important information on the card.
To make the card visually cluttered.
What are the advantages of using high-quality media on your card design?
There are no advantages.
Users will leave the site immediately.
It will speed up the performance of the site.
Users will trust the quality of your products and services.
How should clickable areas be handled in card design?
Make only the text on the card clickable.
Ensure clickable areas are consistent and clear, such as a single button or the entire card with hover effects.
Make clickable areas random to keep users guessing.
Avoid making any part of the card clickable.
Where are card components commonly used?
Only in gaming websites.
In e-commerce, social media, and news sites.
Exclusively in educational platforms.
Only in mobile applications.
What is infinite scrolling?
A design pattern that changes the scrollbar on the page.
A design pattern that changes the size of the page.
A design pattern to change the background color of the page.
A design pattern that loads more content as the user scrolls down the page.
What is the role of a "Load More" button in infinite scrolling?
It reloads the page.
To give users control over when they want to see more content.
It allows users to go back to previously loaded content.
It restricts the amount of data that can be loaded.
Why is it important to keep the footer accessible while using an infinite scroll?
It helps make the colors stand out more on the page.
It helps make the page load faster.
It is not important to keep the footer accessible.
So the user can access the links and important information from the footer at all times.
Why is a loading indicator important in infinite scrolling?
It changes the page’s appearance to match the content.
It informs users that more content is being loaded.
It prevents users from scrolling further.
It redirects users to the top of the page.
What is the purpose of including a "Back to the top" button in infinite scrolling?
To reload the entire page.
To allow users to quickly return to the top of the page.
To stop the infinite scroll from loading more content.
To navigate to a different website.
What is the purpose of dimming the content behind a modal dialog?
To save battery life on mobile devices.
To help users visually identify the area they should interact with.
To make the website load faster.
To prevent users from seeing sensitive information.
Which of the following values is the default for flex-direction?
column
row
row-reverse
column-reverse
What does flex-wrap: nowrap; do?
Forces items onto a new line if needed
Keeps all items on a single line, even if they overflow
Reverses the order of wrapped items
Stretches items along the cross axis
Which of the following properties can be combined into the flex-flow property?
flex-direction and justify-content
flex-direction and align-items
flex-direction and align-content
flex-direction and flex-wrap
If you set justify-content: space-between; on a flex container, what happens?
All items are centered in the container
Items are evenly spaced, with equal gaps on both sides
Items are spaced with equal gaps between them, but no extra space at the edges
Items are pushed to the right side of the container
The property align-items aligns items along which axis?
Main axis
Cross axis
Both axes
It depends on flex-wrap
What does flex-direction: column; do?
Aligns items horizontally from left to right
Aligns items vertically from top to bottom
Reverses the row order
Reverses the column order
Which of the following distributes items with equal space before, between, and after each item?
space-between
space-around
space-evenly
center
Which property controls how much a flex item can grow relative to the other items in the same container?
flex-basis
flex-grow
flex-shrink
align-self
The align-content property only works when...
There is more than one line of flex items
Items are all on one line
justify-content is set to center
align-items is set to stretch
Which of the following is the correct shorthand for flex-grow: 1; flex-shrink: 0; flex-basis: auto;?
flex: auto 1 0;
flex: 1 0 auto;
flex: 0 1 auto;
flex: 1 auto 0;
What will be the layout of the items in the container below? .container { display: flex; flex-direction: column-reverse; }
Items are arranged horizontally from left to right
Items are arranged vertically from top to bottom
Items are arranged vertically from bottom to top
Items are stacked with no direction
Given this code, how will the items align? .container { display: flex; justify-content: space-around; }
Items are packed at the start of the container
Items are evenly spaced, with space on both sides of each item
Items are evenly spaced, but no space on the edges
Items are pushed to the bottom
What happens with the code below when items exceed the container width? .container { display: flex; flex-wrap: wrap; }
Items shrink to fit on one line
Items overflow outside the container
Items wrap onto a new line
Items reverse their order
What does this shorthand mean? .item { flex: 2 1 200px; }
Item grows twice as fast as others, can shrink, and starts at 200px
Item grows at a fixed 200px and never shrinks
Item shrinks twice as much and has no base size
Item ignores container space
What is the effect of this code? .container { display: flex; align-items: center; height: 400px; }
Items are centered along the horizontal axis
Items are centered along the vertical axis
Items stretch to fill the height
Items align at the bottom
The property that defines the direction of the main axis in a flex container is (a) .
To allow items to move onto multiple lines when they don't fit, we use (a) .
The shorthand property that combines flex-direction and flex-wrap is (a) .
To align flex items along the cross axis (vertically by default), we use (a) .
The property that distributes extra space between items along the main axis is (a) .
In the shorthand flex: 1 0 auto;, the first value (1) represents (a) .
If you want a single item to override the container's alignment, you can use (a) .
The property that controls the order in which flex items appear is (a) .
When using justify-content: space-between;, the extra space is placed __________.
The default value of flex-direction is (a) .
In the CSS box model, the space between the content and the border is called (a) .
In Flexbox, the axis that runs perpendicular to the main axis is called the (a) .
In the CSS box model, the outermost layer that creates space between elements is the (a) .
If you want all flex items in a row to stretch to the same height, you use __________.
In the CSS box model, the property that sets the thickness of the line surrounding content and padding is (a) .
The property that defines the direction of the main axis in a flex container is (a) .
In the CSS box model, the space between the content and the border is called (a) .
In Flexbox, the axis that runs perpendicular to the main axis is called the (a) .
In the CSS box model, the outermost layer that creates space between elements is the (a) .
If you want all flex items in a row to stretch to the same height, you use __________.
In the CSS box model, the property that sets the thickness of the line surrounding content and padding is (a) .
Which of the following values is the default for flex-direction?
column
row
row-reverse
column-reverse
What does flex-wrap: nowrap; do?
Forces items onto a new line if needed
Keeps all items on a single line, even if they overflow
Reverses the order of wrapped items
Stretches items along the cross axis
Which of the following properties can be combined into the flex-flow property?
flex-direction and justify-content
flex-direction and align-items
flex-direction and align-content
flex-direction and flex-wrap
If you set justify-content: space-between; on a flex container, what happens?
All items are centered in the container
Items are evenly spaced, with equal gaps on both sides
Items are spaced with equal gaps between them, but no extra space at the edges
Items are pushed to the right side of the container
The property align-items aligns items along which axis?
Main axis
Cross axis
Both axes
It depends on flex-wrap
What does flex-direction: column; do?
Aligns items horizontally from left to right
Aligns items vertically from top to bottom
Reverses the row order
Reverses the column order
Which of the following distributes items with equal space before, between, and after each item?
space-between
space-around
space-evenly
center
Which property controls how much a flex item can grow relative to the other items in the same container?
flex-basis
flex-grow
flex-shrink
align-self
The align-content property only works when...
There is more than one line of flex items
Items are all on one line
justify-content is set to center
align-items is set to stretch
Which of the following is the correct shorthand for flex-grow: 1; flex-shrink: 0; flex-basis: auto;?
flex: auto 1 0;
flex: 1 0 auto;
flex: 0 1 auto;
flex: 1 auto 0;
What will be the layout of the items in the container below? .container { display: flex; flex-direction: column-reverse; }
Items are arranged horizontally from left to right
Items are arranged vertically from top to bottom
Items are arranged vertically from bottom to top
Items are stacked with no direction
Given this code, how will the items align? .container { display: flex; justify-content: space-around; }
Items are packed at the start of the container
Items are evenly spaced, with space on both sides of each item
Items are evenly spaced, but no space on the edges
Items are pushed to the bottom
What happens with the code below when items exceed the container width? .container { display: flex; flex-wrap: wrap; }
Items shrink to fit on one line
Items overflow outside the container
Items wrap onto a new line
Items reverse their order
What does this shorthand mean? .item { flex: 2 1 200px; }
Item grows twice as fast as others, can shrink, and starts at 200px
Item grows at a fixed 200px and never shrinks
Item shrinks twice as much and has no base size
Item ignores container space
What is the effect of this code? .container { display: flex; align-items: center; height: 400px; }
Items are centered along the horizontal axis
Items are centered along the vertical axis
Items stretch to fill the height
Items align at the bottom
The property that defines the direction of the main axis in a flex container is (a) .
To allow items to move onto multiple lines when they don't fit, we use (a) .
The shorthand property that combines flex-direction and flex-wrap is (a) .
To align flex items along the cross axis (vertically by default), we use (a) .
The property that distributes extra space between items along the main axis is (a) .
In the shorthand flex: 1 0 auto;, the first value (1) represents (a) .
If you want a single item to override the container's alignment, you can use (a) .
The property that controls the order in which flex items appear is (a) .
When using justify-content: space-between;, the extra space is placed __________.
The default value of flex-direction is (a) .
In the CSS box model, the space between the content and the border is called (a) .
In Flexbox, the axis that runs perpendicular to the main axis is called the (a) .
In the CSS box model, the outermost layer that creates space between elements is the (a) .
If you want all flex items in a row to stretch to the same height, you use __________.
In the CSS box model, the property that sets the thickness of the line surrounding content and padding is (a) .
The property that defines the direction of the main axis in a flex container is (a) .
In the CSS box model, the space between the content and the border is called (a) .
In Flexbox, the axis that runs perpendicular to the main axis is called the (a) .
In the CSS box model, the outermost layer that creates space between elements is the (a) .
If you want all flex items in a row to stretch to the same height, you use __________.
In the CSS box model, the property that sets the thickness of the line surrounding content and padding is (a) .
