chore(curriculum): add attribute selectors transcripts (#58969)

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md

@@ -8,7 +8,51 @@ dashedName: what-is-the-attribute-selector
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+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.
+
+For example, you can use the attribute selector to target all links that have an `href` attribute. This is especially handy when you want to apply a uniform style to all links on a page. 
+
+Here's how you can use the attribute selector to target links with the `href` attribute:
+
+```css
+a[href] {
+  color: blue;
+  text-decoration: underline;
+}
+```
+
+This CSS rule will apply a blue color and an underline to any link that includes an `href` attribute, ensuring that all clickable links are styled consistently.
+
+But attribute selectors can be more specific. Suppose you want to target only the links that have a `title` attribute. The `title` attribute often provides additional information about the link, and you might want to style these links differently to indicate that they have extra information available. Here's how you can do it:
+
+```css
+a[title] {
+  font-weight: bold;
+  text-decoration: none;
+}
+```
+
+This rule applies bold text and removes the underline from any link with a `title` attribute. It's a great way to visually differentiate these links from others on the page.
+
+You can also combine attribute selectors to get even more precise. For example, if you want to style links that have both `href` and `title` attributes, you can do this:
+
+```css
+a[href][title] {
+  color: green;
+}
+```
+
+In this case, only links that contain both `href` and `title` attributes will be styled with green text. This level of control is what makes attribute selectors so powerful in CSS.
+
+Using attribute selectors not only enhances the styling of your webpage but also improves accessibility by making interactive elements like links more distinguishable based on their attributes.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c37498952920879c43de9.md

@@ -8,7 +8,43 @@ dashedName: how-to-use-the-attribute-selector-to-target-elements-with-the-lang-a
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+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.
+
+The `lang` attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website. 
+
+Here's an example of how you can use the attribute selector to target elements with a specific `lang` attribute:
+
+```css
+p[lang="en"] {
+  font-style: italic;
+}
+```
+
+This CSS rule applies italic styling to any paragraph element where the `lang` attribute is set to English (`en`). This could be useful for emphasizing English text in a document that includes multiple languages.
+
+Similarly, you can use the attribute selector to target elements with a `data-lang` attribute. 
+
+Custom data attributes like `data-lang` are commonly used to store additional information in elements, such as specifying the language used within a specific section of text. 
+
+Here's how you can use CSS to target and style elements based on the `data-lang` attribute:
+
+```css
+div[data-lang="fr"] {
+  color: blue;
+}
+```
+
+In this case, any `div` element with a `data-lang` attribute set to French (`fr`) will have its text color changed to blue. This allows you to quickly identify and style sections of content based on the language information stored in the `data-lang` attribute.
+
+Attribute selectors like these provide a powerful way to apply conditional styling based on the metadata embedded within your HTML, making your web pages more dynamic and context-aware.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672c375857128708d04d0e22.md

@@ -8,7 +8,48 @@ dashedName: how-to-use-the-attribute-selector-to-target-ordered-list-elements-wi
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+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:
+
+- `1` for numerical lists (such as 1, 2, 3, ...),
+
+- `A` for uppercase alphabetical lists (such as A, B, C, ...),
+
+- `a` for lowercase alphabetical lists (such as a, b, c, ...),
+
+- `I` for uppercase Roman numerals (such as I, II, III, ...),
+
+- `i` for lowercase Roman numerals (such as i, ii, iii, ...).
+
+Here's how you can use the attribute selector to target an ordered list with a specific `type` attribute:
+
+```css
+ol[type="A"] {
+  color: purple;
+  font-weight: bold;
+}
+```
+
+In this example, the CSS rule will apply purple text and bold font weight to any ordered list that uses uppercase alphabetical numbering, which is specified by `type="A"`.
+
+Similarly, you can target ordered lists that use lowercase Roman numerals by selecting those with `type="i"`:
+
+```css
+ol[type="i"] {
+  color: green;
+}
+```
+
+This rule will change the text color to green for any ordered list that uses lowercase Roman numerals.
+
+The ability to style ordered lists based on their `type` attribute gives you greater control over the appearance of lists in your document, allowing for customization based on how content is structured.
 
 # --questions--