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

Challenge: FlexboxChallenge: 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:

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.
content
html

index.html

css

index.css

js

index.js

  • 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

js

index.js

Все було зрозуміло?

Секція 4. Розділ 6
course content

Зміст курсу

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

CSS Fundamentals

Challenge: FlexboxChallenge: 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:

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.
content
html

index.html

css

index.css

js

index.js

  • 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

js

index.js

Все було зрозуміло?

Секція 4. Розділ 6
some-alt