fix(curriculum): remove video from Attribute Selectors and Responsive Design lectures (#61597)

2026-05-28 18:26:54 +00:00 · 2025-07-30 13:17:27 +12:00
parent 35082c72a6
commit 325259197d
7 changed files with 12 additions and 61 deletions
@@ -1,19 +1,12 @@
 ---
 id: 672aa8873d4e25618870764f
 title: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?
-challengeType: 11
-videoId: ISOf41vPNJY
+challengeType: 19
 dashedName: what-is-responsive-web-design
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is responsive web design, and what is its relationship to tools like CSS Grid and Flexbox?
-
 Responsive web design is an approach to web development that aims to create websites that provide an optimal viewing and interaction experience across a wide range of devices, from desktop computers to mobile phones.

 The core principle of responsive design is adaptability – the ability of a website to adjust its layout and content based on the screen size and capabilities of the device it's being viewed on.
@@ -24,11 +17,11 @@ Responsive design typically relies on three main components - fluid grids, flexi

 - Flexible images are set to resize within their containing elements, ensuring they don't overflow their containers on smaller screens.

- And, media queries allow developers to apply different styles based on the characteristics of the device, primarily the viewport width. You will learn more about media queries in future lecture videos.
+- And, media queries allow developers to apply different styles based on the characteristics of the device, primarily the viewport width. You will learn more about media queries in future lectures.

 The relationship between responsive web design and tools like CSS Grid and Flexbox is symbiotic. While responsive design is a concept or approach, CSS Grid and Flexbox are practical tools that make implementing responsive designs much easier and more efficient.

-In previous lecture videos you learned how to work with Flexbox and in future lecture videos you will learn how to work with CSS Grid. But for now, here is a brief introduction into CSS Grid.
+In previous lectures you learned how to work with Flexbox and in future lectures you will learn how to work with CSS Grid. But for now, here is a brief introduction into CSS Grid.

 CSS Grid, is a two-dimensional layout system that allows for more complex arrangements. It's excellent for creating overall page layouts as well as smaller component layouts.

@@ -1,19 +1,12 @@
 ---
 id: 672cf05c3ad533eabe1e8197
 title: How Do Media Queries Work, and What Are Some Common Media Types and Features?
-challengeType: 11
-videoId: 1h0QErJG8DE
+challengeType: 19
 dashedName: how-do-media-queries-work
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How do media queries work, and what are some common media types and features?
-
 Media queries are a fundamental component of responsive web design, allowing developers to apply different styles based on the characteristics of the user's device or browser. They provide a way to tailor the presentation of content to a variety of devices without changing the content itself.

 At its core, a media query consists of a media type and one or more expressions that check for specific conditions. If these conditions are true, the corresponding styles are applied. This mechanism allows for the creation of responsive designs that adapt to different screen sizes, resolutions, and device capabilities.
@@ -1,19 +1,12 @@
 ---
 id: 672cf06c8f46f9eb04db9832
 title: What Is the Mobile First Approach in Responsive Web Design?
-challengeType: 11
-videoId: BuCdyShUzKQ
+challengeType: 19
 dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is the mobile first approach in responsive web design?
-
 The mobile-first approach is a design philosophy and development strategy in responsive web design that prioritizes creating websites for mobile devices before designing for larger screens. This approach has gained significant traction in recent years, becoming a cornerstone of modern web development practices.

 At its core, the mobile-first approach involves designing and developing the mobile version of a website as the primary step. This version serves as the foundation, which is then progressively enhanced for larger screens and devices with more capabilities. This methodology stands in contrast to the traditional approach, where websites were initially designed for desktop computers and subsequently scaled down or modified to fit smaller screens.
@@ -1,19 +1,12 @@
 ---
 id: 672cf07a2b9796eb49719e03
 title: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?
-challengeType: 11
-videoId: R0hiJEAXGIk
+challengeType: 19
 dashedName: what-are-media-breakpoints
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are media breakpoints, and what are common breakpoints in modern design?
-
 Media breakpoints are specific points in a website's design where the layout and content adjust to accommodate different screen sizes. These breakpoints are crucial in responsive web design, allowing developers to create websites that look and function well across various devices, from mobile phones to large desktop monitors.

 In CSS, media breakpoints are implemented using media queries. These queries allow you to apply different styles based on the characteristics of the device, most commonly the viewport width. For example, you might set a breakpoint at 768 pixels to differentiate between mobile and tablet layouts.
@@ -121,7 +114,7 @@ Which of the following is a commonly used breakpoint for smaller devices like sm

 ### --feedback--

-Review the beginning of the video to see where this was discussed.
+Review the beginning of the lecture to see where this was discussed.

 ---

@@ -133,7 +126,7 @@ Review the beginning of the video to see where this was discussed.

 ### --feedback--

-Review the beginning of the video to see where this was discussed.
+Review the beginning of the lecture to see where this was discussed.

 ---

@@ -141,7 +134,7 @@ Review the beginning of the video to see where this was discussed.

 ### --feedback--

-Review the beginning of the video to see where this was discussed.
+Review the beginning of the lecture to see where this was discussed.

 ## --video-solution--

@@ -1,19 +1,12 @@
 ---
 id: 672aa840de72b3607bba4bed
 title: What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes?
-challengeType: 11
-videoId: Qknh5QKRCEk
+challengeType: 19
 dashedName: what-is-the-attribute-selector
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is the attribute selector, and how can it be used to target links with the `href` and `title` attribute?
-
 The attribute selector in CSS is a powerful tool that allows you to target HTML elements based on their attributes. This means you can apply styles to elements that have specific attributes or even certain values for those attributes. 

 It's particularly useful when you want to style elements dynamically or when class names alone don't provide enough specificity.
@@ -1,19 +1,12 @@
 ---
 id: 672c37498952920879c43de9
 title: How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes?
-challengeType: 11
-videoId: RxGaefX-ROY
+challengeType: 19
 dashedName: how-to-use-the-attribute-selector-to-target-elements-with-the-lang-and-data-lang-attributes
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How to use the attribute selector to target elements with the `lang` and `data-lang` attribute?
-
 When building multilingual websites or handling custom data attributes, you often need to style elements based on the language they contain or specific data values. 

 The `lang` and `data-lang` attributes are commonly used for these purposes, and the attribute selector in CSS allows you to apply styles based on these attributes effectively.
@@ -1,19 +1,12 @@
 ---
 id: 672c375857128708d04d0e22
 title: How to Use the Attribute Selector to Target Ordered List Elements with the type Attribute?
-challengeType: 11
-videoId: 5ldovhY8R5U
+challengeType: 19
 dashedName: how-to-use-the-attribute-selector-to-target-ordered-list-elements-with-the-type-attribute
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How to use the attribute selector to target ordered list elements with the `type` attribute?
-
 When working with ordered lists in HTML, the `type` attribute allows you to specify the style of numbering used, such as numerical, alphabetical, or Roman numerals. 

 The `type` attribute can be set on an `ol` (ordered list) element to control the numbering format: