jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-18 10:00:55 -04:00
Code Issues Projects Releases Wiki Activity

chore(curriculum): rm vids for css variables and grid lectures (#61599)

Browse Source
This commit is contained in:
hbar1st
2025-07-30 06:43:17 -04:00
committed by GitHub
parent f61bb54cc8
commit 4cd1a753fc
10 changed files with 28 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
View File

@@ -1,19 +1,12 @@
---
id: 672aa8ac4631d1623ec5cd86
title: What Is CSS Grid, and How Does It Differ from Flexbox?
challengeType: 11
videoId: uh0EzmmlpwQ
challengeType: 19
dashedName: what-is-css-grid
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is CSS Grid, and how does it differ from Flexbox?
CSS Grid is a powerful layout system that allows web developers to create complex and responsive web page layouts with ease.
Imagine you're arranging furniture in a room – CSS Grid is like having an invisible grid on your floor that helps you position everything precisely where you want it.

11
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
View File

@@ -1,20 +1,13 @@
---
id: 673226732b19aa1cacd0a75c
title: How Can You Create Flexible Grids with the fr Unit?
challengeType: 11
videoId: frGW2L836GU
challengeType: 19
dashedName: how-can-you-create-flexible-grids-with-the-fr-unit
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How can you create flexible grids with the `fr` unit?
In the previous lecture video, you were introduced to CSS grid which can be used to create complex and fluid layouts in your web pages. In this video, we will explore how to create flexible grid layouts using the `fr` unit.
In the previous lecture, you were introduced to CSS grid which can be used to create complex and fluid layouts in your web pages. In this lecture, we will explore how to create flexible grid layouts using the `fr` unit.
Let's start with this HTML markup which is going to represent our grid container:

23
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
View File

@@ -1,20 +1,13 @@
---
id: 6732267ecab2151ced471cd4
title: How Can You Create Gaps Between Tracks in a Grid?
challengeType: 11
videoId: f8jbUFfvZ_Q
challengeType: 19
dashedName: how-can-you-create-gaps-between-tracks-in-a-grid
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How can you create gaps between tracks in a grid?
In the previous lecture videos, we talked a little bit about how to create space between grid items. But in this video, we will dive into more detail about how to use the `row-gap`, `column-gap` and `gap` properties in a grid layout.
In the previous lectures, we talked a little bit about how to create space between grid items. But in this lecture, we will dive into more detail about how to use the `row-gap`, `column-gap` and `gap` properties in a grid layout.
But first we need to review what a track is in CSS grid. A track is the space between two neighboring grid lines. These lines are automatically created when you use CSS Grid. In this context, tracks generally refer to the rows and columns that make up the grid layout.
@@ -141,7 +134,7 @@ The `gap` between columns is set to 10
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -149,7 +142,7 @@ The `gap` between columns is set to -1
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -157,7 +150,7 @@ The `gap` between columns is set to 14
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -177,7 +170,7 @@ Which of the following is the correct property used as a shorthand for creating
### --feedback--
Review the end of the video where the correct property is discussed.
Review the end of the lecture where the correct property is discussed.
---
@@ -185,7 +178,7 @@ Review the end of the video where the correct property is discussed.
### --feedback--
Review the end of the video where the correct property is discussed.
Review the end of the lecture where the correct property is discussed.
---
@@ -193,7 +186,7 @@ Review the end of the video where the correct property is discussed.
### --feedback--
Review the end of the video where the correct property is discussed.
Review the end of the lecture where the correct property is discussed.
---

23
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
View File

@@ -1,20 +1,13 @@
---
id: 6732268d05c3661d32a0fee8
title: How Can You Repeat Track Listings in a Grid Layout?
challengeType: 11
videoId: d2wi5br6o0E
challengeType: 19
dashedName: how-can-you-repeat-track-listings-in-a-grid-layout
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How can you repeat track listings in a grid layout?
In the previous lecture videos, we have been working with the `grid-template-columns` property and setting the value to a few fractional units.
In the previous lectures, we have been working with the `grid-template-columns` property and setting the value to a few fractional units.
```css
.grid-container {
@@ -88,7 +81,7 @@ Which of the following is the correct syntax for repeating track listings?
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -112,7 +105,7 @@ Review the beginning of the video where this was discussed.
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -126,7 +119,7 @@ Review the beginning of the video where this was discussed.
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
## --video-solution--
@@ -179,7 +172,7 @@ It creates four columns all set to `1fr` wide.
### --feedback--
Review the end of the video where this was discussed.
Review the end of the lecture where this was discussed.
---
@@ -187,7 +180,7 @@ It creates two columns where each is set to `20px` wide.
### --feedback--
Review the end of the video where this was discussed.
Review the end of the lecture where this was discussed.
---
@@ -199,7 +192,7 @@ It creates three columns where the first and second are `20px` wide, and the thi
### --feedback--
Review the end of the video where this was discussed.
Review the end of the lecture where this was discussed.
## --video-solution--

15
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
View File

@@ -1,19 +1,12 @@
---
id: 6732269a7aa2ca1d6b6574fe
title: What Is the Difference Between an Implicit and Explicit Grid?
challengeType: 11
videoId: QMqRqHE_t8k
challengeType: 19
dashedName: what-is-the-difference-between-an-implicit-and-explicit-grid
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the difference between an implicit and explicit grid?
Implicit grid refers to the rows and columns automatically created by the browser when placing items in a grid layout – those not explicitly defined using `grid-template-rows` or `grid-template-columns`.
The properties that control the columns and rows created implicitly by the browser are `grid-auto-columns` and `grid-auto-rows`.
@@ -116,7 +109,7 @@ Which properties are used to define explicit rows and columns in a CSS grid layo
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -124,7 +117,7 @@ Review the beginning of the video where this was discussed.
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
---
@@ -136,7 +129,7 @@ Review the beginning of the video where this was discussed.
### --feedback--
Review the beginning of the video where this was discussed.
Review the beginning of the lecture where this was discussed.
## --video-solution--

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
View File

@@ -1,19 +1,12 @@
---
id: 673226a62eb2121da41a3d68
title: What Is the minmax() Function and How Does It Work?
challengeType: 11
videoId: rpWiq2k2B_8
challengeType: 19
dashedName: what-is-the-minmax-function-and-how-does-it-work
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `minmax()` function, and how does it work?
The `minmax()` function defines the range for the size of a grid track, specifying how much space a row or column can occupy.
Remember that you can set the track size with units like `px` (pixels), `rem`, or even `em`, and with fractional units (`fr`).

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
View File

@@ -1,19 +1,12 @@
---
id: 673226afcd33991dd751937a
title: How Do the grid-column and grid-row Properties Work?
challengeType: 11
videoId: ZX_jBMv3GJg
challengeType: 19
dashedName: how-do-the-grid-column-and-grid-row-properties-work
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How do the `grid-column` and `grid-row` properties work?
The `grid-column` and `grid-row` properties let you specify the horizontal and vertical placement of grid items within a grid layout.
In other words, they both allow you to control where a grid item begins and ends by referencing grid lines. These grid lines are the boundaries that separate rows and columns you have already defined using the `grid-template-rows` and `grid-template-columns` properties.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
View File

@@ -1,19 +1,12 @@
---
id: 673226b97d4a731e0577ae93
title: How Can You Position Items on the Grid Using the grid-template-areas Property?
challengeType: 11
videoId: PV83v-6vxKw
challengeType: 19
dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How can you position items on the grid using the `grid-template-areas` property?
The `grid-template-areas` property lets you design a visual grid layout by using named labels.
You then assign the labels to specific grid items using the grid-area property. So, in other words, those named labels are also called "grid area names".

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
View File

@@ -1,19 +1,12 @@
---
id: 672aa8985acb7361e656f94c
title: What Are CSS Custom Properties, and How Do They Work?
challengeType: 11
videoId: rG9-26gM3eU
challengeType: 19
dashedName: what-are-css-custom-properties
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are CSS custom properties, and how do they work?
CSS custom properties, also known as CSS variables, are entities defined by CSS authors that contain specific values to be reused throughout a document. They are a powerful feature that allows for more efficient, maintainable, and flexible stylesheets.
The syntax for declaring a custom property is straightforward. It begins with two dashes (`--`) followed by the property name:

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
View File

@@ -1,19 +1,12 @@
---
id: 672cf3ca326da9f63683e236
title: What Is the @property Rule, and How Does It Work with Fallbacks?
challengeType: 11
videoId: lFwXJzcJ9fg
challengeType: 19
dashedName: what-is-the-at-property-rule
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `@property` rule, and how does it work with fallbacks?
The `@property` rule is a powerful CSS feature that allows developers to define custom properties with greater control over their behavior, including how they animate and their initial values.
This rule provides a way to enhance the functionality of CSS custom properties and offers more flexibility in their application.