Course Content

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSS Selectors for Styling HTML Elements Challenge: Add Your First Styles Challenge: Add The Styles using the Class Name User Action Pseudo-Classes Challenge: User Action Pseudo-Classes Text Colors Effective Work with CSS Challenge: Variables in CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Element Spacing

Box Model Box Sizing Adding Space to Elements Challenge: Box-Sizing Structural and Functional Pseudo-Classes Challenge: Structural Pseudo-Classes Element Types Working with Block-Level Elements Working with Inline Elements Challenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

CSS Fundamentals

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.

index.html

index.css

index.js

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;.

index.html

index.css

index.js

Everything was clear?

Section 4. Chapter 7

Course Content

CSS Fundamentals

1. Introduction to CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Element Spacing

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

CSS Fundamentals

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.

index.html

index.css

index.js

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;.

index.html

index.css

index.js

Everything was clear?

Section 4. Chapter 7