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

Kursinnehåll

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: Flexbox

Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.

Task

Consider the following HTML structure:

html

The task is to modify the CSS to achieve the following:

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

  • Apply flexbox to the identified parent element (the div tag with the shopping-card class).

  • Vertically center the items within the shopping card.

html

index.html

css

index.css

copy

  • Apply display: flex; to the parent element with the class shopping-card.

  • The default flex direction is row, so there is no need to change the value of the flex-direction property.

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

html

index.html

css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

course content

Kursinnehåll

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: Flexbox

Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.

Task

Consider the following HTML structure:

html

The task is to modify the CSS to achieve the following:

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

  • Apply flexbox to the identified parent element (the div tag with the shopping-card class).

  • Vertically center the items within the shopping card.

html

index.html

css

index.css

copy

  • Apply display: flex; to the parent element with the class shopping-card.

  • The default flex direction is row, so there is no need to change the value of the flex-direction property.

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

html

index.html

css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6
Vi beklagar att något gick fel. Vad hände?
some-alt