Frontend Web Development Bootcamp - Build a Twitter Clone - Styling of "Who to follow" Section

Frontend Web Development Bootcamp - Build a Twitter Clone - Styling of "Who to follow" Section

Assessment

Interactive Video

Information Technology (IT), Architecture

University

Hard

Created by

Quizizz Content

FREE Resource

This video tutorial covers the customization of HTML elements using CSS. It begins with setting a fixed position for a wrapper element and adjusting its placement. The tutorial then focuses on styling images, including resizing and rounding them. It proceeds to define the width of a wrapper and style headings with padding and borders. The alignment of user elements using flexbox is demonstrated, followed by detailed button customization. Finally, the tutorial addresses styling links and filter elements, ensuring a cohesive design throughout the section.

Read more

7 questions

Show all answers

1.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the initial position of the wrapper element when set to fixed?

Bottom left corner

Bottom right corner

Top left corner

Center of the page

2.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What percentage value is used for the left property of the wrapper element?

70%

57%

60%

50%

3.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

How is the image made rounded in the 'who to follow' section?

Applying a shadow effect

Setting width and height to equal values

Using a circular mask

Using border-radius with 50%

4.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which CSS property is used to align items vertically in the center using flexbox?

flex-direction

align-items

justify-content

align-content

5.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the font size set for the heading in the 'who to follow' section?

1.6 rem

2 rem

1.8 rem

1.5 rem

6.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the background color set for the button in the customization section?

Gray

White

Blue

Black

7.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which CSS property is used to remove the default underline from links?

font-weight: normal

text-transform: none

font-style: normal

text-decoration: none