Modern HTML and CSS from the Beginning (Including Sass) - Vh & Vw Units

The video tutorial introduces viewport units VH and VW in CSS, explaining how they represent viewport height and width. It demonstrates creating a landing page using these units, emphasizing the use of VH for vertical spacing. The tutorial covers styling elements with CSS, including background images and text alignment. It also introduces Flexbox for centering content and media queries for responsive design, ensuring the layout adapts to different screen sizes.

What do VH and VW units represent in web design?

• Visible height and visible width

• Variable height and variable width

• Viewport height and viewport width

• Virtual height and virtual width

How many slices does a viewport height consist of?

• 100

• 75

• 50

• 150

What is the purpose of setting the box-sizing property to border-box?

• To exclude padding and border from the element's total width and height

• To set the element's width and height to zero

• To include padding and border in the element's total width and height

• To make the element's width and height equal

Why might you use 100 VH for a header's height?

• To ensure the header is invisible

• To ensure the header covers the entire viewport height

• To make the header half the height of the viewport

• To make the header twice the height of the viewport

What does the 'no-repeat' property do for a background image?

• Repeats the image horizontally

• Repeats the image vertically

• Prevents the image from repeating

• Repeats the image diagonally

What is the main difference between VH and VW units?

• VH is for vertical, VW is for horizontal

• VH is for volume, VW is for weight

• VH is for height, VW is for width

• VH is for width, VW is for height

Why might VW units be less commonly used than VH units?

• Because they are not supported by all browsers

• Because content often spans the full width by default

• Because they are only used for images

• Because they are harder to calculate

What is the purpose of using media queries in responsive design?

• To increase the speed of a website

• To change the color of text

• To add animations to a webpage

• To adjust layout based on screen size

What does a media query with 'max-height: 450px' do?

• Applies styles when the viewport height is exactly 450px

• Applies styles when the viewport height is less than 450px

• Applies styles when the viewport height is more than 450px

• Applies styles when the viewport height is less than or equal to 450px

What is a common use case for viewport heights in web design?

• Aligning text to the left

• Creating full-screen landing pages

• Ensuring elements are always visible

• Creating horizontal scrolling effects