From 800c289b81d38c367e4fdc7bb6ab882814afcaa8 Mon Sep 17 00:00:00 2001 From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com> Date: Tue, 3 Feb 2026 13:53:47 +0530 Subject: [PATCH] feat(curriculum): add interactive examples to css layout and effects (#65408) Co-authored-by: Jeevankumar-S Co-authored-by: zaira --- .../671a9311a289ae7fff25d88e.md | 197 +++++++++++++++++- 1 file changed, 196 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/review-css-layout-and-effects/671a9311a289ae7fff25d88e.md b/curriculum/challenges/english/blocks/review-css-layout-and-effects/671a9311a289ae7fff25d88e.md index d04f556f10a..bf9afdc78b7 100644 --- a/curriculum/challenges/english/blocks/review-css-layout-and-effects/671a9311a289ae7fff25d88e.md +++ b/curriculum/challenges/english/blocks/review-css-layout-and-effects/671a9311a289ae7fff25d88e.md @@ -5,7 +5,7 @@ challengeType: 31 dashedName: review-css-layout-and-effects --- -# --description-- +# --interactive-- ## CSS Overflow Property @@ -14,6 +14,38 @@ dashedName: review-css-layout-and-effects - **`overflow-y`**: the y-axis determines vertical overflow. - **`overflow`**: Shorthand property for `overflow-x` and `overflow-y`. If given one value, both overflows will use it. If given two values, the `overflow-x` will use the first, and the `overflow-y` will use the second. +:::interactive_editor + +```html + +
+ This is very long content that will overflow horizontally and vertically. +
+ This is very long content that will overflow horizontally and vertically. +
+ This is very long content that will overflow horizontally and vertically. +
+ This is very long content that will overflow horizontally and vertically. +
+ This is very long content that will overflow horizontally and vertically. +
+ This is very long content that will overflow horizontally and vertically. +
+``` + +```css +.overflow-box { + width: 140px; + height: 70px; + border: 2px solid black; + overflow-x: auto; + overflow-y: auto; + white-space:nowrap; +} +``` + +::: + ## CSS Transform Property - **Definition**: This property enables you to apply various transformations to elements, such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space. @@ -23,6 +55,61 @@ dashedName: review-css-layout-and-effects - **`skew()` Function**: This function allows you to skew an element. - **Transforms and Accessibility**: If you're using transform to hide or reveal content, make sure that the content is still accessible to screen readers and keyboard navigation. Hidden content should be truly hidden, such as by using `display: none` or `visibility: hidden`, rather than simply being visually moved off-screen. +:::interactive_editor + +```html + +
+
Translate
+
Scale
+
Rotate
+
Skew
+
+``` + +```css +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + +.transform-box { + width: 100px; + height: 100px; + background: coral; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +/* translate() */ +.translate { + transform: translateX(20px); +} + +/* scale() */ +.scale { + transform: scale(1.2); +} + +/* rotate() */ +.rotate { + transform: rotate(15deg); +} + +/* skew() */ +.skew { + transform: skew(10deg, 5deg); +} +``` + +::: + + ## The Box Model - **Definition**: In the CSS box model, every element is surrounded by a box. This box consists of four components: the content area, `padding`, `border`, `margin`. @@ -31,6 +118,26 @@ dashedName: review-css-layout-and-effects - **`border`**: The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element. - **`margin`**: The margin is the space outside the border of an element. It determines the distance between an element and other elements around it. +:::interactive_editor + +```html + +
Content
+``` + +```css +.box-model { + width: 120px; + background: lightblue; + padding: 16px; + border: 4px solid teal; + margin: 20px; + text-align: center; +} +``` + +::: + ## Margin Collapse - **Definition**: This behavior occurs when the vertical margins of adjacent elements overlap, resulting in a single margin equal to the larger of the two. This behavior applies only to vertical margins (top and bottom), not horizontal margins (left and right). @@ -41,6 +148,36 @@ dashedName: review-css-layout-and-effects - **`content-box` Value**: In the `content-box` model, the `width` and `height` that you set for an element determine the dimensions of the content area but they don't include the `padding`, `border`, or `margin`. - **`border-box` Value**: With `border-box`, the `width` and `height` of an element include the content area, the `padding`, and the `border`, but they don't include the `margin`. +:::interactive_editor + +```html + +
Content-box
+
Border-box
+``` + +```css +.sizing-box { + width: 150px; + padding: 10px; + border: 4px solid teal; + margin-bottom: 10px; + background: peachpuff; + text-align: center; +} + +.content-box { + box-sizing: content-box; +} + +.border-box { + box-sizing: border-box; + background: lightgreen; +} +``` + +::: + ## CSS Reset - **Definition**: A CSS reset is a stylesheet that removes all or some of the default formatting that web browsers apply to HTML elements. Third party options for CSS resets include `sanitize.css` and `normalize.css`. @@ -55,6 +192,64 @@ dashedName: review-css-layout-and-effects - **`sepia()` Function**: This function applies a sepia tone to the element. Like grayscale, it uses a percentage value. - **`hue-rotate()` Function**: This function applies a hue rotation to the element. The value is defined in degrees and represents a rotation around the color circle. +:::interactive_editor + +```html + +
+ Blur + Brightness + Contrast + Grayscale + Sepia + Hue Rotate +
+``` + +```css +.container { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.filter { + width: 120px; +} + +/* blur() */ +.blur { + filter: blur(3px); +} + +/* brightness() */ +.brightness { + filter: brightness(130%); +} + +/* contrast() */ +.contrast { + filter: contrast(150%); +} + +/* grayscale() */ +.grayscale { + filter: grayscale(100%); +} + +/* sepia() */ +.sepia { + filter: sepia(100%); +} + +/* hue-rotate() */ +.hue { + filter: hue-rotate(90deg); +} +``` + +::: + # --assignment-- Review the CSS Layouts and Effects topics and concepts.