HTML Basics
What HTML tag is used to create a hyperlink?
What is the <a> tag?
Which CSS property is used to change the background color of an element?
What is the background-color property?
Which CSS property defines the number of columns in a grid?
What is the grid-template-columns property?
What CSS property is used to define a flex container?
What is "display: flex;" ?
How do we create a border?
What is
border-style: solid;
border-radius: 1px;
?
How do you add an image to a webpage in HTML?
What is using the
<img src="url" alt="description"> tag?
How do you center text inside an element using CSS?
What is the
text-align: center;
property?
Which CSS property is used to define the gap between grid items?
What is the
grid-gap or gap
property?
How do you create a flex container that wraps its items onto multiple lines?
What is flex-wrap: wrap?
How do you align a single flex item to the end of the flex container's cross axis?
What is using align-self: flex-end;?
What is the purpose of the <span> tag in HTML?
What is to apply styling or scripting to a portion of text or inline content within a block of text?
How do you add padding to all sides of an element?
What is using the padding property with a single value, e.g.,
padding: 10px;
How do you span a grid item across multiple columns?
What is using
grid-column: span [number of columns];
?
How do you distribute space between flex items along the main axis with space around each item?
What is justify-content: space-around?
How do you create a hover effect in CSS?
What is using the :hover pseudo-class (e.g., element:hover {
/* styles here */
}
)?
What is the difference between an ID and a class in HTML?
What is an
ID is a unique identifier for a single element and is selected with a "#",
while a class can be applied to multiple elements and is selected with a "." ?
How do you apply multiple classes to a single HTML element?
What is adding classes separated by spaces in the class attribute?
e.g
class = "button red circular"
How do you create a grid layout with uneven column widths?
What is using grid-template-columns with different values (e.g., 1fr 2fr 1fr)?
grid-template-columns: 1fr 2fr 1fr;
Explain the difference between justify-content and align-items in a flex container.
What is justify-content controls the alignment of flex items along the main axis, while align-items controls the alignment along the cross axis?
justify-content/items/self(x-axis)
align-content/items/self(y-axis)
In CSS Grid, what does the minmax() function do, and how can it be used to create responsive grid layouts?
What is the minmax() function defines
a size range for a grid track, allowing it to grow and shrink between a minimum and maximum value?
It is used in responsive designs to ensure that grid items adapt to the available space, such as
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
What is the difference between <link> and <a> tags in HTML?
What is the <link> tag is used to link external resources such as stylesheets, while the <a> tag is used to create hyperlinks within the HTML document?
How do you apply a CSS rule only to screens smaller than 600px wide?
What is a media query:
@media (max-width: 600px) {
/* styles here */
}
?
How can you align grid items horizontally and vertically within their grid areas using CSS Grid properties?
What is using properties like justify-items, align-items, justify-self, and align-self? justify-items and align-items set the alignment for all grid items, while justify-self and align-self set the alignment for individual grid items within their grid areas.
How does the flex-basis property work, and how does it interact with the flex-grow and flex-shrink properties in a flex container?
What is the flex-basis property sets the initial size of a flex item before any remaining space is distributed according to flex-grow and flex-shrink, which determine how much the item should grow or shrink relative to the other items in the flex container?
Explain how the vh and vw units differ in CSS, and provide an example of when you might use each.
the vh unit represents a percentage of the viewport height, and the vw unit represents a percentage of the viewport width?
Use vh for elements that need to be sized relative to the viewport height, such as setting a hero section to cover the full height of the viewport (height: 100vh;) to ensure it always fills the screen regardless of the device size.
Use vw for elements that need to be sized relative to the viewport width, such as setting the width of a container to adjust dynamically with the browser window (width: 100vw;), ensuring it always spans the full width of the viewport.