From 4cd1a753fc62cb3aa34f06b5e152ba57a2f86481 Mon Sep 17 00:00:00 2001 From: hbar1st <35541470+hbar1st@users.noreply.github.com> Date: Wed, 30 Jul 2025 06:43:17 -0400 Subject: [PATCH] chore(curriculum): rm vids for css variables and grid lectures (#61599) --- .../672aa8ac4631d1623ec5cd86.md | 9 +------- .../673226732b19aa1cacd0a75c.md | 11 ++------- .../6732267ecab2151ced471cd4.md | 23 +++++++------------ .../6732268d05c3661d32a0fee8.md | 23 +++++++------------ .../6732269a7aa2ca1d6b6574fe.md | 15 ++++-------- .../673226a62eb2121da41a3d68.md | 9 +------- .../673226afcd33991dd751937a.md | 9 +------- .../673226b97d4a731e0577ae93.md | 9 +------- .../672aa8985acb7361e656f94c.md | 9 +------- .../672cf3ca326da9f63683e236.md | 9 +------- 10 files changed, 28 insertions(+), 98 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md index 857a4407605..e66cf3f30d9 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md @@ -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md index 6ea3654e54b..57b8b32e0e4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md @@ -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: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md index e4094659768..7960e7a1901 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md @@ -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. --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md index 7f72535dd1d..f0c12a9f5d3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md index 2f1f193190f..22b6684214b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md index dda4d9ccf16..22da92eb7e6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md @@ -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`). diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md index 815996c3a8d..01f9590a088 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md @@ -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md index d6b8ad67fb8..4acb39ffb30 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md @@ -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". diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md index 2888de1e7b0..95b357d8899 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md @@ -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: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md index 9bfa850cbe4..c33d5e100e3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md @@ -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.