diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c38568c6..18991c69 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@4.0.10 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.13 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", diff --git a/.github/workflows/learnpack-audit.yml b/.github/workflows/learnpack-audit.yml index 52644d89..95814c2a 100644 --- a/.github/workflows/learnpack-audit.yml +++ b/.github/workflows/learnpack-audit.yml @@ -5,9 +5,9 @@ name: Learnpack audit on: push: - branches: [ master ] + branches: [ main ] pull_request: - branches: [ master ] + branches: [ main ] jobs: build: @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [14.x] + node-version: [20.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md index c09d4976..f67abca2 100644 --- a/exercises/04-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -22,18 +22,21 @@ Eliminará los números o viñetas y moverá el texto hacia la izquierda para qu **Nota:** -Construye el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. +Ejecuta el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. ## 📝 Instrucciones: -1. Convierte los números de las bebidas de Coca Cola en letras minúsculas. -2. Convierte los números de las bebidas de Pepsi en viñetas cuadradas. -3. Convierte las viñetas de las bebidas Saludables en números armenios. -4. Elimina completamente las viñetas de las bebidas de web-developer. +La regla `list-style-type` tiene muchos valores interesantes, utilizala para lograr: + +1. Conviertir los números de las bebidas de Coca Cola en letras minúsculas (Usa `lower-alpha`). +2. Conviertir los números de las bebidas de Pepsi en viñetas cuadradas. +3. Conviertir las viñetas de las bebidas Saludables en números armenios. +4. Eliminar completamente las viñetas de las bebidas de web-developer. ## 💡 Pistas: - Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp - Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. - `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp +- `lower-alpha` es un valor posible real de `list-style-type`. diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md index 1d3309a4..6a9cb5d7 100644 --- a/exercises/04-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -27,8 +27,10 @@ Then make the changes below and run again. ## 📝 Instructions: -1. Make the Coca Cola drinks numbers into lowercase letters. -2. Make the Pepsi drinks numbers into square bullets. +Use the CSS rule `list-style-type` and CSS to: + +1. Turn the Coca Cola drinks numbers into lowercase letters (Use `lower-alpha`) +2. Turn the Pepsi drinks numbers into square bullets. 3. Make the Healthy drinks bullets into Armenian numbers. 4. Completely remove the bullets from the web-developer drinks. diff --git a/learn.json b/learn.json index b9087243..b914a96c 100644 --- a/learn.json +++ b/learn.json @@ -1,36 +1,37 @@ { -"language": "html", -"slug": "css-tutorial-exercises-course", -"skills": ["css-styling"], -"preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", -"repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", -"title": { - "us": "Learn CSS Interactively", - "es": "Aprende CSS Interactivamente" -}, -"intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", -"description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", - "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" -}, -"duration": 8, -"difficulty": "easy", -"videoSolutions": true, -"bugsLink": "https://github.com/learnpack/learnpack/issues/new", -"projectType": "tutorial", -"graded": true, -"disabledActions": [], -"disableGrading": false, -"editor": { - "version": "4.0.0" -}, -"telemetry": { - "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" -}, -"video": { - "intro": { - "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "slug": "css-tutorial-exercises-course", + "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", + "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", + "title": { + "us": "Learn CSS with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" + }, + "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", + "description": { + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners learning and practicing fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." + }, + "duration": 8, + "difficulty": "easy", + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", + "autoPlay": "true", + "graded": true, + "disabledActions": [], + "technologies": ["web-development", "desarrollo-web", "front-end", "css"], + "disableGrading": false, + "editor": { + "version": "5.0", + "agent": "vscode" + }, + "telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" + }, + "video": { + "intro": { + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } } -}