gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(curriculum): rm vids from styling forms & box model lectures (#61589)

Browse Source
This commit is contained in:
hbar1st
2025-07-29 21:25:34 -04:00
committed by GitHub
parent 59d2454d4d
commit 9cde018cc9
10 changed files with 9 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672aa791227e755da64cf240
title: What Are Some Best Practices for Styling Text Inputs?
challengeType: 11
videoId: VQGDm80L37A
challengeType: 19
dashedName: what-are-some-best-practices-for-styling-text-inputs
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are some of the best practices for styling text inputs?
As with all text elements you need to ensure the styles you apply to the text input are accessible. This means the font needs to be adequately sized and the color needs to have sufficient contrast with the background.
The placeholder, however, is often forgotten. It's important to remember that this is also text and you will likely need to change the styling to ensure it's readable.
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672bc9d9eecb65cdf63491de.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bc9d9eecb65cdf63491de
title: "When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes?"
challengeType: 11
videoId: 5HJv4lyfHxY
challengeType: 19
dashedName: when-should-you-use-appearance-none-to-deal-with-issues-styling-search-inputs-and-checkboxes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
When should you use `appearance: none` to deal with issues styling search inputs and checkboxes?
Let's learn when to use `appearance: none` to address styling issues for search input, checkboxes and radio buttons.
Browsers apply default styling to a lot of elements. In the case of input elements your ability to style them with CSS can feel rather restricted. So, you may want to use `appearance: none` to hide aspects of the default element and build your own instead. For example, this would hide the default checkboxes for a checkbox input allowing you to use custom indicators like a green tick and a red X to show the state. For a search input, WebKit based browsers will show a default search icon and a cancel button. Hiding these allows you to create your own indicators that would appear on all browsers.
curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-styling-forms/672bca660aa9f9ce9b2b2787.md
+1 -6
View File
@@ -1,17 +1,12 @@
---
id: 672bca660aa9f9ce9b2b2787
title: What Are Common Issues When Styling Special Input Elements?
challengeType: 11
videoId: xGEG5ibAz4E
challengeType: 19
dashedName: what-are-common-issues-when-styling-special-input-elements
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
Let's learn about some of the common issues when trying to style special input elements like the `datetime-local` and `color` inputs.
These special types of inputs rely on complex pseudo-elements to create things like the date and color pickers. This presents a significant challenge for styling these inputs. One challenge is that the default styling is entirely browser-dependent, so the CSS you write to make the picker look the way intend may be entirely different on another browser.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672aa7e03c2e365e906e5733
title: What Is Overflow in CSS, and How Does It Work?
challengeType: 11
videoId: iqnkHaVCLww
challengeType: 19
dashedName: what-is-overflow-in-css
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is overflow in CSS, and how does it work?
Overflow refers to the way elements handle content that exceeds or overflows the size of the containing element. For example, the text content of a `div` element can overflow out of its borders.
Overflow is two-dimensional, the x-axis determines horizontal overflow, and the y-axis determines vertical overflow.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bcc8ccc976fd791610f43
title: What Is the CSS Transform Property, and How Does It Work?
challengeType: 11
videoId: pC59ipGpaDk
challengeType: 19
dashedName: what-is-the-css-transform-property
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the CSS `transform` property, and how does it work?
The CSS `transform` property is a powerful tool that allows you to modify the visual presentation of elements on your webpage without affecting the layout of other elements. It enables you to apply various transformations to elements such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space.
The `transform` property works by applying a mathematical transformation to an element's coordinate system. This means you can manipulate an element's shape and position while keeping it's original place and document flow intact.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
-8
View File
@@ -1,20 +1,12 @@
---
id: 672bcc9c4a6dd6d7dd3e6357
title: What Is the CSS Box Model, and How Does It Work?
# change back to 11 when video is updated
challengeType: 19
# videoId: new-id-goes-here-when-ready
dashedName: what-is-the-css-box-model
---
# --description--
Read the transcript and answer the questions below.
# --transcript--
What is the CSS box model, and how does it work?
The CSS box model is a fundamental concept for web development. It defines how HTML elements are structured and positioned. If you understand this model you will be able to control the size, spacing and appearance of the elements on your website.
In the CSS box model, every element is surrounded by a box. This box consists of four elements: the content area, the padding, the border, and the margin.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bccae6e556cd81cef6af2
title: What Is Margin Collapsing, and How Does It Work?
challengeType: 11
videoId: MMWBC8duT_0
challengeType: 19
dashedName: what-is-margin-collapsing
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is margin collapsing, and how does it work?
Margin collapsing is a fundamental concept in CSS that often confuses newcomers to web development.
This behavior occurs when the vertical margins of adjacent elements overlap, resulting in a single margin equal to the larger of the two.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bccc8ea33bad87abb3c56
title: What Is the Difference Between content-box and border-box?
challengeType: 11
videoId: znOuWo58jgY
challengeType: 19
dashedName: what-is-the-difference-between-content-box-and-border-box
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the difference between `content-box` and `border-box` in CSS?
The `box-sizing` property can be set to either `content-box` or `border-box` to control how the width and height of elements are calculated. Here you can see the `box-sizing` property and the two possible values:
```css
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bccdb8f1823d8c60f914c
title: What Is a CSS Reset, and What Are Some Common Examples?
challengeType: 11
videoId: 2VPFQpukQV8
challengeType: 19
dashedName: what-is-a-css-reset
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is a CSS reset, and what are some common examples?
A CSS reset is a stylesheet that removes all or some of the default formatting that web browsers apply to HTML elements. For example, you might have noticed that certain elements, like paragraphs and headings, already have margins by default even if you don't define them explicitly in your custom stylesheets.
You will also see this with various properties in a wide range of HTML elements. Different browsers may also apply different default styles to HTML elements. The default styles in Google Chrome may not be exactly the same as in Mozilla Firefox or Microsoft Edge. This can result in inconsistent styles across browsers which you should avoid as much as possible.
curriculum/challenges/english/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
+1 -8
View File
@@ -1,19 +1,12 @@
---
id: 672bccebe1fc82d911c3f078
title: What Is the CSS Filter Property, and What Are Common Examples?
challengeType: 11
videoId: 9ta8m4T9KYc
challengeType: 19
dashedName: what-is-the-css-filter-property
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the CSS `filter` property, and what are common examples?
The CSS `filter` property is a powerful tool that allows you to apply graphical effects to elements on a web page. It's particularly useful for adjusting the visual presentation of images, backgrounds and even text without modifying the original asset.
The `filter` property can be used to create various effects, such as blurring, color shifting, and contrast adjustments. Let's discuss how the filter property works and explore some common examples. The basic syntax for a `filter` property is straightforward: