diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md
index 08a690bbc4c..9cd61cfe8d6 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672aa7678e05e35d42e33522.md
@@ -8,7 +8,51 @@ dashedName: what-is-color-theory-in-design
 
 # --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 color theory in design?
+
+Color theory is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color. Let's start diving into this world. Colors can be classified as either primary, secondary, or tertiary.
+
+Primary colors, yellow, blue, and red, are the fundamental hues from which all other colors are derived.
+
+Secondary colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors. For example, green is the result of combining yellow and blue.
+
+Tertiary colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
+
+This is a fundamental classification in the world of color theory, but there are other ways to classify colors. They can be classified as warm or cool, based on their temperature.
+
+Warm colors, like reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness. Cool colors, like blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
+
+Colors can also be represented through color models. They are essential for describing and reproducing colors in a standard way. Frequently used color models include the RGB model, the HSV model, and the HSL model. They represent colors based on different properties. You will learn more about them in future lectures.
+
+Great. Now that you know more about this, let's talk about a fundamental tool that designers use to represent colors and their relationships. The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations. This is very helpful for creating color palettes and color schemes.
+
+A color scheme is the set of colors chosen for a specific design or project. They are usually based on the principles of color theory. By understanding the relationships between colors on the wheel, you can develop different types of color schemes. Let's see some of them.
+
+Analogous color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
+
+Complementary color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
+
+Color contrast is essential for web accessibility. It ensures that text and other important elements are clearly distinguishable from their background. This is especially important for people with visual disabilities.
+
+In an RGB color wheel, complementary colors are located at the opposite ends of the wheel. For example, magenta is complementary to green and blue is complementary to yellow and so on.
+
+A triadic color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel.
+
+And finally, we have the monochromatic color scheme. In this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
+
+And finally, here are some tips for using color effectively in web development:
+
+- Create a color scheme that defines your website's branding.
+- Use colors to evoke the emotions and perceptions that align with your goals.
+- Choose colors with enough contrast to make your website accessible for everyone.
+- Use color to highlight important elements of your website, like buttons.
+- Use color consistently and use it to create a visual hierarchy.
+
+Color theory is a core aspect of design. By understanding color psychology, harmonies, and accessibility, you can create effective designs, evoke emotions, and enhance user experience.
 
 # --questions--
 
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
index d5fb0064132..9c2d55beb34 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc4ff5e7a4bbdee8ba013.md
@@ -8,7 +8,40 @@ dashedName: what-are-named-colors-in-css
 
 # --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 named colors in CSS, and when to use them?
+
+In CSS, colors play a crucial role in designing web pages, enhancing readability, setting the mood, and improving user experience. One of the simplest ways to define colors in CSS is by using named colors. Named colors are predefined color names recognized by browsers. Here is an example of using a named color for a paragraph element:
+
+```css
+p {
+  color: red;
+}
+```
+
+In this example, we're using the named color `red` to style the text in a paragraph.
+
+Named colors in CSS are a collection of 140 standard color names like `red`, `blue`, `yellow`, `aqua`, `fuchsia`, `black`, and so on. These names are simple to use and make your code more readable, and they are self-descriptive. 
+
+Named colors are useful for quick prototyping, simple designs, and improving code readability. Here is an another example of using named colors for an `h1` selector:
+
+```css
+h1 {
+  color: navy;
+  background-color: lightgray;
+}
+```
+
+In this example, the heading text will be styled in navy, with a light gray background. The readability of the code improves since named colors provide an immediate visual understanding of the intended style.
+
+Named colors in CSS are convenient but limited, with only 140 available options. They may not offer the precise shade needed for more detailed designs. 
+
+Named colors in CSS are a great way to apply colors quickly and descriptively. While they are useful for basic designs, prototyping, and improving code readability, their limited range makes them less suitable for complex designs requiring precise color control.
+
+By understanding the strengths and limitations of named colors, you can determine when it’s best to use them over more detailed color models like RGB or HSL, which you will learn about in future videos.
 
 # --questions--
 
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md
index b87e3fbe373..b1d06f53d3a 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc51370c789be459186b4.md
@@ -8,7 +8,55 @@ dashedName: what-is-the-rgb-color-model
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is the RGB color model, and how does the RGB function work in CSS?
+
+When working with colors in CSS, understanding the RGB color model is essential. RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. 
+
+The RGB color model is an additive color model, which means colors are created by combining light at varying intensities. 
+
+The intensity of each color can range from `0` (which means no light) to `255` (which means full light). By mixing different levels of red, green, and blue, you can produce any color you see on your screen. For example:
+
+- Black is represented by `rgb(0, 0, 0)`, which means no light for any of the three colors.
+- White is represented by `rgb(255, 255, 255)`, which means full light intensity for all three colors.
+- Red is represented by `rgb(255, 0, 0)`, with full intensity for red and none for green or blue.
+
+In CSS, the `rgb()` function allows you to define colors using the RGB color model. The function takes three values, each representing the intensity of red, green, and blue light, respectively. Here is the basic syntax:
+
+```css
+element {
+  color: rgb(red, green, blue);
+}
+```
+
+The values for red, green, and blue can range from `0` to `255`, where `0` represents the absence of that color, and `255` represents full saturation. Here is an example of how you might use the `rgb()` function in CSS:
+
+```css
+p {
+  color: rgb(255, 0, 0);
+}
+```
+
+This code would change the text color of the paragraph to red because the red value is set to `255`, while green and blue are set to `0`.
+
+CSS also provides the `rgba()` function, which adds a fourth value —alpha— that controls the transparency of the color. The alpha value ranges from `0` (completely transparent) to `1` (completely opaque). Here is an example of using `rgba()`:
+
+```css
+div {
+  background-color: rgba(0, 0, 255, 0.5);
+}
+```
+
+This code would apply a semi-transparent blue background to a `div` element because the red and green values are set to `0`, the blue value is set to `255`, and the alpha value is set to `0.5` (50% transparency).
+
+The RGB color model is especially useful for digital media because it directly corresponds to how screens display colors. Monitors and displays use tiny red, green, and blue pixels to create the colors you see. By controlling the intensity of these pixels through RGB values, you can achieve a wide range of colors for your web design.
+
+Additionally, the RGB model is ideal when working with dynamic designs. For instance, if you want to create animations or color effects that require real-time changes, the flexibility of the RGB function allows you to modify colors programmatically.
+
+By understanding the RGB color model and how to use the `rgb()` and `rgba()` functions in CSS, you'll have greater control over how colors are displayed on your web pages. You can create vibrant designs, transparency, and even programmatically adjust colors for dynamic effects.
 
 # --questions--
 
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
index 6c43a4e3e89..4beb9e095c6 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md
@@ -8,7 +8,81 @@ dashedName: what-is-the-hsl-color-model
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is the HSL color model, and how does the `hsl()` function work in CSS?
+
+When styling websites, one of the most versatile and intuitive ways to work with color is by using the HSL color model. HSL stands for Hue, Saturation, and Lightness — three key components that define a color. 
+
+The HSL color model represents colors in a way that is more in line with how humans perceive color. In this lecture, we will explore what the HSL color model is and how the `hsl()` function is used in CSS.
+
+The hue is the color type, represented as an angle on the color wheel, which ranges from `0` to `360` degrees. For example, `0` degrees represents red, `120` degrees is green, and `240` degrees is blue. By adjusting the hue, you shift through different colors on the spectrum.
+
+Saturation refers to the intensity or purity of the color. It is measured as a percentage from `0%` (a completely desaturated, grayscale color) to `100%` (the most vibrant form of that color). A color with `100%` saturation is fully vivid, while a color with `0%` saturation appears as a shade of gray.
+
+Lightness determines how light or dark the color is, again measured as a percentage. A lightness value of `0%` will produce black, `50%` will give you the normal tone of the hue, and `100%` will result in white.
+
+In CSS, the `hsl()` function is used to define colors using the HSL color model. Here is the basic syntax:
+
+```css
+element {
+  color: hsl(hue, saturation, lightness);
+}
+```
+
+Let's break this down with an example:
+
+```css
+p {
+  color: hsl(120, 100%, 50%);
+}
+```
+
+In this case, the hue is `120` degrees, which corresponds to green. The saturation is `100%`, so the green will be fully vivid. The lightness is `50%`, so it's at its normal tone — neither too dark nor too light. As a result, the text color of the paragraph will be a bright green.
+
+One of the main advantages of the HSL color model is its intuitive nature. It makes it easy to adjust a color’s vibrancy or lightness by tweaking the saturation and lightness values without having to alter the core color (hue). 
+
+For instance, if you want to create different shades or tints of the same color, you can simply adjust the lightness value.
+
+```css
+div.light {
+  background-color: hsl(240, 100%, 80%);
+}
+
+div.dark {
+  background-color: hsl(240, 100%, 20%);
+}
+```
+
+Here, both `div` elements are using the same hue (`240` degrees, which is blue), but one has a lightness of `80%` (a lighter shade of blue), and the other has a lightness of `20%` (a darker shade of blue).
+
+Just like the RGB model has an `rgba()` function to include transparency, the HSL model has an `hsla()` function. The fourth parameter in this function represents the alpha value, which controls the opacity of the color. Here is the basic syntax:
+
+```css
+element {
+  background-color: hsla(hue, saturation, lightness, alpha);
+}
+```
+
+Let's take a look at an example:
+
+```css
+div {
+  background-color: hsla(0, 100%, 50%, 0.5);
+}
+```
+
+This code would give the `div` a semi-transparent red background, where the hue is set to `0` degrees (red), saturation is `100%`, lightness is `50%`, and alpha is `0.5` (50% opacity).
+
+The HSL color model is particularly useful when you need to create color schemes and adjust shades or tints easily. 
+
+Because HSL separates the hue from saturation and lightness, you can keep a consistent color theme while tweaking lightness for shadows or highlights. This level of flexibility makes HSL a favorite for designers and developers alike.
+
+Additionally, HSL makes color values more readable and understandable when compared to other methods like hex codes or RGB. You can more clearly see the intent behind the color and adjust accordingly, especially when experimenting with different designs.
+
+With the HSL color model, you gain more flexibility in controlling color tones, saturation, and lightness, making it a powerful tool for creating rich and dynamic designs in CSS.
 
 # --questions--
 
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md
index 0ed383e1e6a..28f7594d80d 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md
@@ -8,7 +8,82 @@ dashedName: what-are-hex-codes
 
 # --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 hex color values, and how do they work in CSS?
+
+When working with CSS to style a webpage, one of the most common methods for defining colors is by using hex color values. Hexadecimal color values, or hex codes, are a concise way to represent colors in the RGB color model. In this lecture, we'll explore what hex codes are, how they work in CSS, and when to use them.
+
+A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits `0` to `9` and letters `A` to `F`. 
+
+In the context of colors, hex codes specify the amounts of red, green, and blue (RGB) that make up a particular color. Each hex code starts with a hash symbol (`#`), followed by six characters that define the intensity of red, green, and blue in the color. 
+
+For example, the hex code for black is `#000000`, and the hex code for white is `#FFFFFF`. The first two characters represent the red value, the next two represent green, and the last two represent blue.
+
+In CSS, you can apply colors to elements by using hex codes. Here is the basic syntax:
+
+```css
+element {
+  color: #RRGGBB;
+}
+```
+
+Here, `#RRGGBB` is a placeholder for the actual hex code. The `RR`, `GG`, and `BB` pairs each represent the intensity of red, green, and blue, respectively. 
+
+These pairs can range from `00` (the lowest intensity) to `FF` (the highest intensity). The higher the number, the more of that color will be present in the final mix. For example, let's apply some hex colors to a few elements:
+
+```css
+h1 {
+  color: #FF5733; /* A reddish-orange color */
+}
+p {
+  background-color: #4CAF50; /* A shade of green */
+}
+```
+
+In the first case, `#FF5733` is a reddish-orange color. Here’s the breakdown:
+
+- `FF` is the highest value for red (fully saturated).
+- `57` is a moderate amount of green.
+- `33` is a small amount of blue.
+
+In the second case, `#4CAF50` is a shade of green:
+
+- `4C` is a low value for red.
+- `AF` is a strong value for green.
+- `50` is a moderate value for blue.
+
+Hex codes are popular because they are precise and easy to use. They allow you to fine-tune your colors, making them ideal for designs where consistency is important. 
+
+Most design software, such as Adobe Photoshop or Figma, provides hex codes for the colors you select, which makes it easy to copy and paste these values directly into your CSS files.
+
+In web development, hex codes are often used for defining text colors, backgrounds, borders, and other visual elements. For example:
+
+```css
+body {
+  background-color: #F0F0F0; /* Light gray background */
+}
+button {
+  background-color: #007BFF; /* A shade of blue */
+  color: #FFFFFF; /* White text */
+}
+```
+
+This ensures that your colors remain consistent across your entire website or application.
+
+In some cases, you may notice hex codes written in shorthand format, using only three characters instead of six. This is possible when both characters in each color pair are the same. For instance, `#FF5733` cannot be shortened, but `#FFFFFF` (white) can be written as `#FFF`.
+
+```css
+h2 {
+  color: #FFF; /* White in shorthand */
+}
+```
+
+The shorthand `#FFF` is equivalent to `#FFFFFF`. Similarly, `#000` would represent black which is `#000000` in full form.
+
+Hex codes are popular for their precision and compatibility, allowing for over 16 million colors across all browsers. They're ideal when you need specific branding colors, want to control exact shades that aren't easily defined by named colors or HSL, or when you're copying colors from design software that provides hex codes by default.
 
 # --questions--
 
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md
index b227361b8fa..922c54cab21 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md
@@ -8,7 +8,72 @@ dashedName: what-are-linear-and-radial-gradients
 
 # --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 linear and radial gradients, and how do they work in CSS?
+
+In a previous lecture, you learned how to start working with linear and radial gradients. In this video, we are going to dive deeper into how to work with the CSS properties to create more visually appealing and complex designs.
+
+Gradients in CSS allow you to create smooth transitions between two or more specified colors. They are often used to add depth, texture, and visual interest to web designs without the need for image files. 
+
+CSS supports two main types of gradients: linear gradients and radial gradients.
+
+Linear gradients create a gradual blend between colors along a straight line. You can control the direction of this line and the colors used. Here's a basic example of a linear gradient:
+
+```css
+.linear-gradient {
+  background: linear-gradient(to right, red, blue);
+  height: 40vh;
+}
+```
+
+This creates a gradient that transitions from red on the left to blue on the right. The `to right` parameter specifies the direction of the gradient. You can use other directions like `to left`, `to top`, `to bottom`, or even specify angles like `45deg`.
+
+You can also use multiple color stops in a linear gradient:
+
+```css
+.multi-color-gradient {
+  background: linear-gradient(to right, red, yellow, blue);
+  height: 40vh;
+}
+```
+
+This creates a gradient that transitions from red to yellow to blue, evenly spaced across the element.
+
+Radial gradients, on the other hand, create circular or elliptical gradients that radiate from a central point. Here's an example:
+
+```css
+.radial-gradient {
+  background: radial-gradient(circle, red, blue);
+  height: 40vh;
+}
+```
+
+This creates a circular gradient that starts with red in the center and transitions to blue at the edges. You can also specify the shape and size of radial gradients:
+
+```css
+.custom-radial-gradient {
+  background: radial-gradient(ellipse at top left, red, blue);
+  height: 40vh;
+}
+```
+
+This creates an elliptical gradient starting from the top left corner of the element. Both linear and radial gradients allow you to specify color stops at precise positions. For example:
+
+```css
+.precise-gradient {
+  background: linear-gradient(to right, red 20%, yellow 40%, blue 80%);
+  height: 40vh;
+}
+```
+
+This creates a gradient where red takes up the first `20%`, then transitions to yellow at `40%`, and finally to blue at `80%`.
+
+Gradients can be used wherever you'd use an image in CSS. This makes them versatile for creating backgrounds, buttons, or even text effects when combined with other CSS properties.
+
+Remember, while gradients can enhance the visual appeal of your website, it's important to ensure sufficient contrast for accessibility, especially when using gradients behind text.
 
 # --questions--