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

Kursusindhold

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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7

Spørg AI

expand
ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

course content

Kursusindhold

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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7
Vi beklager, at noget gik galt. Hvad skete der?
some-alt