chore(curriculum): rm vids from flexbox & typography lectures (#61593)

2026-05-28 18:26:54 +00:00 · 2025-07-30 04:43:38 -04:00
parent c370ea44ef
commit 3dc06290f6
9 changed files with 11 additions and 73 deletions
@@ -1,19 +1,12 @@
 ---
 id: 672aa7f7284b235f46f7d4e9
 title: What Is CSS Flexbox, and When Should You Use It?
-challengeType: 11
-videoId: PLe24PzNFgA
+challengeType: 19
 dashedName: what-is-css-flexbox
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is CSS flexbox, and when should you use it?
-
 CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container. You can also control their order and orientation. Web developers use it to create responsive websites and web applications that adapt to different screen sizes and orientations. We refer to flexbox as a one-dimensional layout model because it focuses on arranging elements along a single axis at a time. The axis can be either horizontal or vertical. 

 There are two key concepts that you should know about before you start working with flexbox: flex container and flex item.
@@ -1,19 +1,12 @@
 ---
 id: 672bd658c0e190f674a5e057
 title: What Are Some Common Flex Properties, and How Do They Work?
-challengeType: 11
-videoId: rrDyepl8qXI
+challengeType: 19
 dashedName: what-are-some-common-flex-properties
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are some common flex properties, and how do they work?
-
 Flex properties are properties that you can apply to flex containers to determine the distribution of child elements. We'll cover some of the most commonly used ones: `flex-wrap`, `justify-content`, and `align-items`.

 Let's start with `flex-wrap`. This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`. `nowrap` is the default value—flex items won't be wrapped onto a new line, even if their width exceeds the container's width.
@@ -1,19 +1,12 @@
 ---
 id: 672aa80bc17f355fabd2e9e8
 title: What Are the Fundamentals of Typography?
-challengeType: 11
-videoId: JwnppEOqpg4
+challengeType: 19
 dashedName: what-are-the-fundamentals-of-typography
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are the fundamentals of typography?
-
 Typography is the art of choosing the right fonts and format to make text visually appealing and easy to read. "Type" refers to how the individual characters are designed and arranged. By choosing the right fonts for your project, you can evoke emotions, establish hierarchy, and reinforce your brand's identity.

 We'll start by talking about typefaces and fonts. A typeface is the overall design and style of a set of characters, numbers, and symbols. It's like a blueprint for a family of fonts. A font is a specific variation of a typeface with specific characteristics, such as size, weight, style, and width.
@@ -62,7 +55,7 @@ Glyph

 ### --feedback--

-Review the beginning of the video for the answer.
+Review the beginning of the lecture for the answer.

 ---

@@ -74,7 +67,7 @@ Beak

 ### --feedback--

-Review the beginning of the video for the answer.
+Review the beginning of the lecture for the answer.

 ---

@@ -82,7 +75,7 @@ Shoulder

 ### --feedback--

-Review the beginning of the video for the answer.
+Review the beginning of the lecture for the answer.

 ## --video-solution--

@@ -1,19 +1,12 @@
 ---
 id: 672bd807c49548fc9be66aca
 title: What Are Some Best Practices for Working with Typography in Your Designs?
-challengeType: 11
-videoId: eG2De9tjinA
+challengeType: 19
 dashedName: what-are-some-best-practices-for-working-with-typography-in-your-designs
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are some best practices for working with typography in your designs?
-
 Typography is the art and technique of arranging type to communicate effectively. It involves formatting text and selecting appropriate fonts. In this lecture, you will learn best practices for using typography in a way that enhances readability, hierarchy, and accessibility. 

 Let's start with readability. You should choose clear and simple fonts to make your designs easy to understand. This is particularly important for the main text of your website. Users are more likely to engage with your content if the font is easy to read. Some frequently used fonts for web development are Roboto, Open Sans, Poppins, Lato, and Barlow. But there are many to choose from and you will definitely find one that fits your needs.
@@ -1,19 +1,12 @@
 ---
 id: 672bd814105a0ffcf36f9233
 title: What Are Font Families and How Do They Work?
-challengeType: 11
-videoId: fNmhMAJpfQs
+challengeType: 19
 dashedName: what-are-font-families
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are font families and how do they work?
-
 A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface, but they also have variations in their style, weight, and width. You can think of them as siblings who share similar characteristics but also have some differences. For example, Arial is a font family that includes variations like Arial Bold and Arial Italic.

 In CSS, you can set the font family with the `font-family` property. That is, you write the property followed by a colon, a space, and the font family that will be assigned:
@@ -1,19 +1,12 @@
 ---
 id: 672bd81ee07c43fd2070f0fe
 title: What Are Web Safe Fonts?
-challengeType: 11
-videoId: EeVOIWwcqO4
+challengeType: 19
 dashedName: what-are-web-safe-fonts
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are web-safe fonts?
-
 Web-safe fonts are a subset of fonts that are very likely to be installed on a computer or device. They are widely supported across different operating systems and web browsers, so it's very likely that they will be rendered and displayed consistently. Let's see how this works.

 Browsers are responsible for interpreting and displaying fonts on a website. When the browser has to render a font, it tries to find the font file on the user's system. But if the font is not found, it will usually fall back to a default system font. This ensures that the content is still readable, even if the specific font that should be rendered on the website is missing.
@@ -7,12 +7,6 @@ dashedName: what-is-the-font-face-at-rule

 # --description--

-Read the transcript and answer the questions below.
-
-# --transcript--
-
-What is the `@font-face` at-rule, and how does it work?
-
 Before we dive in, you should know what an at-rule is in CSS. At-rules are statements that provide instructions to the browser. You can use them to define various aspects of the stylesheet, such as media queries, keyframes, font faces, and more. You'll learn more about concepts like media queries and keyframes in future lectures. This time, you'll learn about the `@font-face` at-rule.

 With `@font-face`, you can define a custom font by specifying the font file, format, and other important properties, like weight and style. This is the basic syntax. You can see `@font-face` followed by a block enclosed by curly brackets:
@@ -1,19 +1,12 @@
 ---
 id: 672bd8453d1371fdb1510fe5
 title: How Do You Work with External Fonts Like Font Squirrel and Google Fonts?
-challengeType: 11
-videoId: C1BThgucM-I
+challengeType: 19
 dashedName: how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How do you work with external fonts like Font Squirrel and Google Fonts?
-
 An external font is a font file that is not included directly within your project files. They're usually hosted on a separate server. A server is a computer that provides data or services to other computers over a network. You will learn more about servers in future lectures. External fonts give you more flexibility because you can use custom fonts that may not be installed on the user's device.

 Google Fonts and Font Squirrel are popular online resources for finding and using free fonts for web development purposes. You can incorporate them into your projects very easily.
@@ -1,19 +1,12 @@
 ---
 id: 672bd853c985cdfdeb32f4f9
 title: What Is the text-shadow Property, and How Does It Work?
-challengeType: 11
-videoId: 3iQDpb-ofDs
+challengeType: 19
 dashedName: what-is-the-text-shadow-property
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is the `text-shadow` property, and how does it work?
-
 CSS doesn't apply any shadows to the text by default. This is an example of a paragraph without any shadows. But if you do need to add shadows, you can use the `text-shadow` property.

 ```css