chore(curriculum): add pseudo-classes and elements transcripts (freeCodeCamp#58474)

Author: ihechikara

curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md

@@ -8,7 +8,107 @@ dashedName: what-are-pseudo-classes
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are pseudo-classes, and how do they work?
+
+Pseudo-classes are special CSS keywords that allow you to select an element based on its specific state or position. The element's state or position could include:
+
+- When it's active.
+- When it's being hovered over by a mouse.
+- When it's the first child of a parent.
+- When it's the last child of a parent.
+- When a link has been visited.
+- When it's disabled.
+
+To use a pseudo-class, you add it to the selector by using a colon (`:`) followed by the name of the pseudo-class: 
+
+```css
+selector:pseudo-class {
+  /* CSS properties */
+}
+```
+
+Let's see how you can use a pseudo-class to represent each of the states and positions we already mentioned.
+
+The `:active` pseudo-class lets you select the active state of an element, like clicking on a button:
+
+```css
+button:active {
+  background: greenyellow;
+}
+```
+
+The `:hover` pseudo-class defines the hover state of an element. An example would be hovering over a button or link:
+
+```css
+a:hover {
+  text-decoration: none;
+  background: crimson;
+}
+```
+
+The `:first-child` pseudo-class selects an element that is the first child of its parent element. Here's an HTML example showing a `div` element containing multiple paragraph elements:
+
+```html
+<div class="container">
+  <p>first child</p>
+  <p>second child</p>
+  <p>third child</p>
+  <p>last child</p>
+</div>
+```
+
+Here's the CSS that selects the first paragraph element in that `div` container: 
+
+```css
+.container p:first-child {
+  background: lightcoral;
+  padding: 0.4rem;
+}
+```
+
+The first paragraph element in that `div` will receive the `lightcoral` background color and `padding` of `0.4rem` on all four sides. 
+
+The `:last-child` pseudo-class targets the last element that is the child of its parent. Here is an example of targeting the last paragraph element in the container `div` element:
+
+```css
+.container p:last-child {
+  background: lightcoral;
+  padding: 0.4rem;
+}
+```
+
+The `:visited` pseudo-class lets you style a link the user has already visited:
+
+```css
+a:visited {
+  color: purple;
+}
+```
+
+The `:disabled` pseudo-class lets you style an interactive element in disabled mode:
+
+```css
+button:disabled {
+  background-color: lightgray;  
+}
+```
+
+As you can see, pseudo-classes let you style elements based on user interactions, like hovering or visiting a link. This makes your website feel more interactive.
+
+Apart from the pseudo-classes already mentioned, there are others like:
+
+- `:focus`
+- `:first-of-type`
+- `:last-of-type`
+- `:nth-of-type`
+- `:modal`
+- `:enabled`
+- `:checked`
+- `:required`, and more.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9171a5cca90f2edeea.md

@@ -8,7 +8,100 @@ dashedName: what-are-examples-of-element-user-action-pseudo-classes
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are examples of element user action pseudo-classes?
+
+User feedback is a crucial element of web design. For instance, it's important for users to receive visual cues when they interact with elements on a website, such as hovering over a button or clicking a link. This feedback helps users understand the state of interactive elements, like indicating whether a link has been visited or not.
+
+User action pseudo-classes in CSS are special keywords that allow you to provide this kind of feedback without needing JavaScript or other programming languages.
+
+These pseudo-classes include `:hover`, `:active`, `:focus`, and `:visited`, among others. They enable you to change the appearance of elements based on user interactions, improving the overall user experience.
+
+Let's dive into some of the user action pseudo-classes we have and see how they work.
+
+The `:active` pseudo-class applies styles when an element is activated by the user. For example, when the user clicks a button or a link, it provides immediate visual feedback, showing users that their actions are being recognized.
+
+```css
+a:active {
+  color: crimson;
+}
+```
+
+The `:hover` pseudo-class is triggered when a user hovers over an element with their mouse or other pointing device. Developers often use it to create visual feedback for buttons, links, or any element that should respond to user attention. Here's a button a user would hover over before clicking:
+
+```html
+<button class="btn">Hover Over Me</button>
+```
+
+Here's the CSS that changes the color, background color, and cursor of the button once the user hovers over it:
+
+```css
+.btn:hover {
+  background-color: darkgreen;
+  color: white;
+  cursor: pointer;
+}
+```
+
+The `:focus` pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input. This is not just for feedback but also crucial for accessibility. It ensures that users who rely heavily on keyboards can easily identify which element they are interacting with. 
+
+Here's an input element inside a form element:
+
+```html
+<form>
+  <input type="text" />
+</form>
+```
+
+Here's the CSS that gives the input a solid dark green border and a `border-radius` when the user clicks into it:
+
+```css
+input:focus {
+  outline: 2px solid darkgreen;
+  border-radius: 4px;
+}
+```
+
+The `:visited` pseudo-class targets a link the user has visited. This can be useful for helping users distinguish between pages they have already visited and the ones they are yet to visit. Here is an example of changing the anchor text color to cyan when the link is visited:
+
+```css
+a:visited {
+  color: cyan;
+}
+```
+
+The `:checked` pseudo-class in CSS allows you to style form elements such as checkboxes and radio buttons when they are selected (checked). This pseudo-class is useful for customizing the appearance of these elements to enhance user experience, even though browsers provide default styles for them.
+
+Here's the kind of checkbox you usually check to agree to terms on a website:
+
+```html
+<form>
+  Agree <input class="checkbox" type="checkbox" />
+</form>
+```
+
+Here's how you can use the `:checked` pseudo-class to indicate to the user that it is checked:
+
+```css
+.checkbox:checked {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: red;
+}
+```
+
+In this example, we are using the `appearance` property set to `none` to remove the default styling applied by the browser to checkbox inputs. When the user checks the box, it will have a background color of `red`.
+
+Other examples of action pseudo-classes are:
+
+- `:focus-within`: for applying styles to an element when it or any of its descendants have focus.
+- `:enabled`: for targeting form buttons or other elements that are currently enabled.
+- `:disabled`: for targeting form buttons or other elements that are disabled.
+- `:target`: for applying styles to an element that is the target of a URL fragment (the part of a URL after the `#` symbol).
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md

@@ -8,7 +8,126 @@ dashedName: what-are-examples-of-input-pseudo-classes
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are examples of input pseudo-classes?
+
+The appearance and behavior of input elements matter when building web forms. A form with inputs that respond to user actions goes a long way in improving user experience, and it should not cause confusion or frustration.
+
+CSS provides several input pseudo-classes that can make your forms more intuitive and user-friendly. Let's look at these pseudo-classes in detail.
+
+The `:focus` pseudo-class allows you to target an input element when a user selects or clicks on it, drawing attention to the active input field. This helps users easily identify where they're currently typing:
+
+```css
+input:focus {
+  border: 2px solid crimson;
+  outline: none;
+}
+```
+
+As the name implies, the `:hover` pseudo-class is triggered when the user places the cursor over an element. It provides visual feedback before the user interacts with the input, effectively alerting them that the input is ready for action.
+
+```css
+input:hover {
+  background-color: orange;
+}
+```
+
+In the example above, the input element background changes to an orange color when the user hovers over it, letting them know that the field is ready for interaction.
+
+The `:checked` pseudo-class lets you style a radio button or checkbox differently when a user selects it. This way, the user can easily see which option they've chosen.
+
+Here is an example:
+
+```html
+<form>
+  I have read the terms<input class="checkbox" type="checkbox">
+</form>
+```
+
+```css
+.checkbox:checked {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background-color: coral;
+}
+```
+
+`:required` targets input elements that have the `required` attribute. It signals to the user that they must fill out the field to submit the form.
+
+The HTML below has a form with two required input elements:
+
+```html
+<form action="#">
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name" required />
+
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required />
+
+  <label for="phone">Phone Number:</label>
+  <input type="tel" id="phone" name="phone" />
+
+  <button type="submit">Submit</button>
+</form>
+```
+
+And this CSS applies an orange border of two pixels to the two required inputs:
+
+```css
+input:required {
+  border: 2px solid orange;
+}
+```
+
+When validating forms, you can use the `:valid` pseudo-class to style the input fields that meet the validation criteria, and `:invalid` to style the input fields that do not meet the criteria. Typically, you will use green for a valid input and red for an invalid input. 
+
+Here is an example using the `:valid` pseudo-class:
+
+```css
+input:valid {
+  border-color: green;
+}
+```
+
+Here is an example of using the `:invalid` pseudo-class:
+
+```css
+input:invalid {
+  border-color: crimson;
+}
+```
+
+The `:disabled` pseudo-class allows you to select and style input elements that are disabled. These elements have the `disabled` attribute, which prevents users from interacting with them. When an input is disabled, it cannot be clicked, focused, or edited.
+
+Here is an example of a label and a disabled input element:
+
+```html
+<label for="name">Name:</label>
+<input class="text-input" type="text" id="name" name="name" disabled />
+```
+
+In the CSS, we are targeting that disabled input and giving it a background color of `lightgray` and changing the cursor pointer to `not-allowed`. 
+
+```css
+.text-input:disabled {
+  background-color: lightgray;
+  cursor: not-allowed;
+}
+```
+
+The `cursor: not-allowed;` CSS property value changes the appearance of the cursor to indicate that an action is not permitted. 
+
+When applied to an element, it shows a cursor with a circle-slash symbol (usually a circle with a diagonal line through it) to signal to users that the element is not interactive or cannot be clicked or interacted with.
+
+Here are some other examples of input pseudo-classes and what they do:
+
+- `:autofill`: applies styles to input fields that the browser automatically fills with saved data.
+- `:optional`: styles input elements that are not required and can be left empty.
+- `:in-range` and `:out-of-range`: style elements based on whether their values are within or outside specified range constraints.
 
 # --questions--