diff --git a/lessons/06-transitions-animations.json b/lessons/06-transitions-animations.json index 2014250..e61cc7d 100644 --- a/lessons/06-transitions-animations.json +++ b/lessons/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Transitions", - "description": "Learn how to apply transition to properties for smooth changes on state changes.

.element {\n  transition: property duration;\n  /* e.g. transition: background-color 0.3s; */\n}
", + "description": "Learn how to apply transition to properties for smooth changes on state changes.

transition: property duration;\n/* e.g. transition: background-color 0.3s; */
", "task": "Add transition: background-color 0.3s to .btn so the color fades smoothly on hover.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframes", - "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Define a keyframe at 50% with transform: translateY(-20px) and apply animation: bounce 1s infinite to .ball.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }", @@ -102,7 +102,7 @@ }, { "id": "transitions-4", - "title": "Anim Properties", + "title": "Animation Properties", "description": "Fine-tune animations with animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.", "task": "Apply the pulse animation to .box with animation-name: pulse, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2, and animation-fill-mode: forwards.", "previewHTML": "
Pulse
", diff --git a/lessons/ar/06-transitions-animations.json b/lessons/ar/06-transitions-animations.json index 2c10321..5f8280d 100644 --- a/lessons/ar/06-transitions-animations.json +++ b/lessons/ar/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Transitions", - "description": "Learn how to apply transition to properties for smooth changes on state changes.

.element {\n  transition: property duration;\n  /* e.g. transition: background-color 0.3s; */\n}
", + "description": "Learn how to apply transition to properties for smooth changes on state changes.

transition: property duration;\n/* e.g. transition: background-color 0.3s; */
", "task": "Add transition: background-color 0.3s to .btn so the color fades smoothly on hover.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframes", - "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Define a keyframe at 50% with transform: translateY(-20px) and apply animation: bounce 1s infinite to .ball.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }", @@ -102,7 +102,7 @@ }, { "id": "transitions-4", - "title": "Anim Properties", + "title": "Animation Properties", "description": "Fine-tune animations with animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.", "task": "Apply the pulse animation to .box with animation-name: pulse, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2, and animation-fill-mode: forwards.", "previewHTML": "
Pulse
", diff --git a/lessons/de/06-transitions-animations.json b/lessons/de/06-transitions-animations.json index ef8bd5e..759d1f1 100644 --- a/lessons/de/06-transitions-animations.json +++ b/lessons/de/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animationen", "description": "Bringe Interaktivität in dein UI durch sanfte Eigenschaftsübergänge und Keyframe-gesteuerte Animationen.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Einfache Transitions", - "description": "Lerne, wie du transition auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.

.element {\n  transition: property duration;\n  /* z.B. transition: background-color 0.3s; */\n}
", + "description": "Lerne, wie du transition auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.

transition: property duration;\n/* z.B. transition: background-color 0.3s; */
", "task": "Füge transition: background-color 0.3s zu .btn hinzu, damit die Farbe beim Hover sanft überblendet.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; } .btn:hover { background: #3700b3; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframe-Animationen Grundlagen", - "description": "Erstelle benannte Animationen mit @keyframes und wende sie mit der animation Kurzschreibweise an.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Erstelle benannte Animationen mit @keyframes und wende sie mit der animation Kurzschreibweise an.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Definiere bei 50% ein transform: translateY(-20px) und wende animation: bounce 1s infinite auf .ball an.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: #ff0266; border-radius: 50%; margin: 2rem auto; }", diff --git a/lessons/es/06-transitions-animations.json b/lessons/es/06-transitions-animations.json index 2c10321..5f8280d 100644 --- a/lessons/es/06-transitions-animations.json +++ b/lessons/es/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Transitions", - "description": "Learn how to apply transition to properties for smooth changes on state changes.

.element {\n  transition: property duration;\n  /* e.g. transition: background-color 0.3s; */\n}
", + "description": "Learn how to apply transition to properties for smooth changes on state changes.

transition: property duration;\n/* e.g. transition: background-color 0.3s; */
", "task": "Add transition: background-color 0.3s to .btn so the color fades smoothly on hover.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframes", - "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Define a keyframe at 50% with transform: translateY(-20px) and apply animation: bounce 1s infinite to .ball.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }", @@ -102,7 +102,7 @@ }, { "id": "transitions-4", - "title": "Anim Properties", + "title": "Animation Properties", "description": "Fine-tune animations with animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.", "task": "Apply the pulse animation to .box with animation-name: pulse, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2, and animation-fill-mode: forwards.", "previewHTML": "
Pulse
", diff --git a/lessons/pl/06-transitions-animations.json b/lessons/pl/06-transitions-animations.json index 2c10321..5f8280d 100644 --- a/lessons/pl/06-transitions-animations.json +++ b/lessons/pl/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Transitions", - "description": "Learn how to apply transition to properties for smooth changes on state changes.

.element {\n  transition: property duration;\n  /* e.g. transition: background-color 0.3s; */\n}
", + "description": "Learn how to apply transition to properties for smooth changes on state changes.

transition: property duration;\n/* e.g. transition: background-color 0.3s; */
", "task": "Add transition: background-color 0.3s to .btn so the color fades smoothly on hover.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframes", - "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Define a keyframe at 50% with transform: translateY(-20px) and apply animation: bounce 1s infinite to .ball.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }", @@ -102,7 +102,7 @@ }, { "id": "transitions-4", - "title": "Anim Properties", + "title": "Animation Properties", "description": "Fine-tune animations with animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.", "task": "Apply the pulse animation to .box with animation-name: pulse, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2, and animation-fill-mode: forwards.", "previewHTML": "
Pulse
", diff --git a/lessons/uk/06-transitions-animations.json b/lessons/uk/06-transitions-animations.json index 2c10321..5f8280d 100644 --- a/lessons/uk/06-transitions-animations.json +++ b/lessons/uk/06-transitions-animations.json @@ -3,12 +3,12 @@ "id": "transitions-animations", "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", - "difficulty": "beginner", + "difficulty": "intermediate", "lessons": [ { "id": "transitions-1", "title": "Transitions", - "description": "Learn how to apply transition to properties for smooth changes on state changes.

.element {\n  transition: property duration;\n  /* e.g. transition: background-color 0.3s; */\n}
", + "description": "Learn how to apply transition to properties for smooth changes on state changes.

transition: property duration;\n/* e.g. transition: background-color 0.3s; */
", "task": "Add transition: background-color 0.3s to .btn so the color fades smoothly on hover.", "previewHTML": "", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }", @@ -63,7 +63,7 @@ { "id": "transitions-3", "title": "Keyframes", - "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes name {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n.element {\n  animation: name 1s infinite;\n}
", + "description": "Create named animations using @keyframes and apply them via the animation shorthand.

@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}
", "task": "Define a keyframe at 50% with transform: translateY(-20px) and apply animation: bounce 1s infinite to .ball.", "previewHTML": "
", "previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }", @@ -102,7 +102,7 @@ }, { "id": "transitions-4", - "title": "Anim Properties", + "title": "Animation Properties", "description": "Fine-tune animations with animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.", "task": "Apply the pulse animation to .box with animation-name: pulse, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2, and animation-fill-mode: forwards.", "previewHTML": "
Pulse
",