Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Challenge: Work with Flexbox | Flexbox
CSS Fundamentals
course content

Conteúdo do Curso

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS
2. Text Styles
Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts
3. Box Model and Element Spacing
Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout
4. Flexbox
What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox
5. Decorative Effects
Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

book
Challenge: Work with Flexbox

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

  • Identify the parent element containing both the post image ( img tag with the post-image class name) and post information ( div tag with the post-info class name).

  • Apply flex properties to the parent element ( div tag with the blog-card class name).

  • Horizontally center the items within the card.

  • Ensure that items cover the entire height of the card.

html

index.html

css

index.css

copy

  • display: flex; can only be applied to the parent element.

  • The default flex direction is row, so we need to change it using the flex-direction: column; property.

  • To center items horizontally, use align-items: center; .

  • To space items vertically, use justify-content: space-between; .

html

index.html

css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS
2. Text Styles
Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts
3. Box Model and Element Spacing
Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout
4. Flexbox
What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox
5. Decorative Effects
Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

book
Challenge: Work with Flexbox

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

  • Identify the parent element containing both the post image ( img tag with the post-image class name) and post information ( div tag with the post-info class name).

  • Apply flex properties to the parent element ( div tag with the blog-card class name).

  • Horizontally center the items within the card.

  • Ensure that items cover the entire height of the card.

html

index.html

css

index.css

copy

  • display: flex; can only be applied to the parent element.

  • The default flex direction is row, so we need to change it using the flex-direction: column; property.

  • To center items horizontally, use align-items: center; .

  • To space items vertically, use justify-content: space-between; .

html

index.html

css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt