mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): remove video from Lists, Links, Background and Borders lectures (#61590)
This commit is contained in:
Supravisor
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa6441bcd3758e9f52ae0
|
||||
title: How Do You Space List Items Using margin or line-height?
|
||||
challengeType: 11
|
||||
videoId: YQUWjqJQeAI
|
||||
challengeType: 19
|
||||
dashedName: how-do-you-space-list-items-using-margin-or-line-height
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do you space list items using `margin` or `line-height` in CSS?
|
||||
|
||||
Margins and line-height are essential for spacing list items to enhance readability and visual appeal.
|
||||
|
||||
First, let's start spacing list items using margins!
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b951b1bf78038b1a2a0e7
|
||||
title: How Do the Different list-style Properties Work?
|
||||
challengeType: 11
|
||||
videoId: 5SeLNCLRx6g
|
||||
challengeType: 19
|
||||
dashedName: how-do-the-different-list-style-properties-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do the different `list-style` properties work in CSS?
|
||||
|
||||
In CSS, the `list-style` property is used to control the appearance of lists on a webpage.
|
||||
|
||||
Whether you're working with ordered lists (`ol`) or unordered lists (`ul`), the `list-style` property allows you to customize how list items are displayed.
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b952d3a5c603908841971
|
||||
title: Why Are Default Link Styles Important for Usability on the Web?
|
||||
challengeType: 11
|
||||
videoId: Jp3Qd4LU93E
|
||||
challengeType: 19
|
||||
dashedName: why-are-default-link-styles-important-for-usability-on-the-web
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are default link styles, and why are they important for usability on the web?
|
||||
|
||||
Default link styles play a crucial role in enhancing usability and accessibility on the web.
|
||||
|
||||
These styles, typically blue for unvisited links and purple for visited links, have become a standard that users have come to expect and rely on when navigating websites.
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b9538c25634394ceb7b8f
|
||||
title: How Do You Style the Different Link States?
|
||||
challengeType: 11
|
||||
videoId: TvKcF2R6JmA
|
||||
challengeType: 19
|
||||
dashedName: how-do-you-style-the-different-link-states
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do you style the different link states in CSS?
|
||||
|
||||
There are different states of a link, including `link`, `visited`, `hover`, `focus`, and `active`. These states are important for helping users recognize links and providing clear feedback after interactions, which improves both usability and accessibility.
|
||||
|
||||
Styling these different link states is crucial for usability and accessibility, as it provides visual cues about the current state of the link. This helps users understand which links they have visited, which link they are interacting with, and what will happen when they click.
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa669960f6a596081fcad
|
||||
title: How Do Background Image Size, Repeat, Position, and Attachment Work?
|
||||
challengeType: 11
|
||||
videoId: cVcBaVhPUsA
|
||||
challengeType: 19
|
||||
dashedName: how-to-work-with-background-image-size-repeat-position-and-attachment
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do you work with background image size, repeat, position, and attachment in CSS?
|
||||
|
||||
When working with background images in CSS, you have several properties at your disposal to control how these images are displayed.
|
||||
|
||||
The main properties we'll focus on are `background-size`, `background-repeat`, `background-position`, and `background-attachment`.
|
||||
|
||||
+2
-9
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b98be592cfb451f651451
|
||||
title: What Is a Background Gradient, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: cweW0jpMA4g
|
||||
challengeType: 19
|
||||
dashedName: what-is-a-background-gradient
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is a background gradient, and how does it work?
|
||||
|
||||
A background gradient in CSS is a smooth transition between two or more colors that can be applied to the background of an element. Gradients allow you to create visually appealing backgrounds without needing images.
|
||||
|
||||
There are two main types of gradients in CSS: linear gradients and radial gradients.
|
||||
@@ -41,7 +34,7 @@ To better understand how linear gradients work, let's take a look at the followi
|
||||
}
|
||||
```
|
||||
|
||||
This CSS creates a linear gradient that transitions from `red` on the `left` to `yellow` on the `right`. The gradient is applied to an element with a height of `40%` of the viewport height. You'll learn more about `vh` units in a future lecture video.
|
||||
This CSS creates a linear gradient that transitions from `red` on the `left` to `yellow` on the `right`. The gradient is applied to an element with a height of `40%` of the viewport height. You'll learn more about `vh` units in a future lecture.
|
||||
|
||||
The `to right` direction means the gradient runs horizontally from left to right.
|
||||
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b98cd77b6b7456b6ef2de
|
||||
title: What Are Some Accessibility Considerations for Backgrounds?
|
||||
challengeType: 11
|
||||
videoId: XQGKmK_L14k
|
||||
challengeType: 19
|
||||
dashedName: what-are-some-accessibility-considerations-for-backgrounds
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are some accessibility considerations for backgrounds?
|
||||
|
||||
In web design, backgrounds play a vital role in defining the overall look and feel of a webpage.
|
||||
|
||||
However, when designing with backgrounds, it's crucial to consider accessibility to ensure your content is usable and readable by all users, including those with visual impairments.
|
||||
|
||||
+1
-8
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672b98db3bcdd545ab3b3c73
|
||||
title: What Are the Different Ways You Can Add Borders Around Images?
|
||||
challengeType: 11
|
||||
videoId: Ztny13IjMnE
|
||||
challengeType: 19
|
||||
dashedName: what-are-the-different-ways-you-can-add-borders-around-images
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are the different ways you can add borders around images?
|
||||
|
||||
In CSS, there are several ways to add borders around images, each offering different styling options and levels of control.
|
||||
|
||||
Let's explore some of the most common and versatile methods.
|
||||
|
||||
Reference in New Issue
Block a user