Skip to content

Latest commit

 

History

History
96 lines (60 loc) · 5.08 KB

README.es.md

File metadata and controls

96 lines (60 loc) · 5.08 KB
Raw

Ejercicios CSS Layouts

Por @alesanchezr y otros colaboradores de 4Geeks Academy

last commit build by developers build by developers

¡Hola! Soy Alejandro Sanchez @alesanchezr, ¡muy emocionado de tenerte aquí! 🎉 😂 Aprender a programar es difícil, ¡necesitas entrenamiento! [Envíame un DM en Twitter] (https://twitter.com/alesanchezr) si tienes alguna pregunta.

En este tutorial aprenderás los siguientes conceptos:

  1. Display vs Position.

  2. La propiedad Display: Flex.

  3. La propiedad Float.

  4. Cómo centrar contenido.

  5. Diseños de sidebars.

  6. Usar :before y :after.

Antes de empezar... hay otros tutoriales relacionados

  1. Aprende HTML
  2. Aprende Formularios HTML
  3. Aprende CSS
  4. Aprende CSS Layouts← 🔥 Estás aquí
  5. Aprender Bootstrap

Una completa selección de ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS!

Instalación en un clic (recomendado)

Puedes empezar estos ejercicios en pocos segundos haciendo clic en: Abrir en Codespaces (recomendado) o Abrir en Gitpod.

Una vez ya tengas abierto VSCode, los ejercicios de LearnPack deberían empezar automáticamente; si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: $ learnpack start

Instalación manual

Clona el repositorio en tu ambiente local y sigue los siguientes pasos:

  1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+:
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
  1. Descarga estos ejercicios en particular usando LearnPack y luego cd para entrar en la carpeta:
$ learnpack download css-layouts-tutorial-exercises
$ cd css-layouts-tutorial-exercises

Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.

  1. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
$ npm i jest@24.8.0 -g
$ learnpack start

¿Cómo están organizados los ejercicios?

Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:

  1. index.html: tu código HTML va aquí.
  2. styles.css: tu código CSS va aquí.
  3. README.md: contiene las instrucciones de los ejercicios.
  4. test.js: no tienes que abrir este archivo, contiene el script del test para el ejercicio.

Nota: Estos ejercicios tienen calificación automática. Los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.

Colaboradores

Gracias a estas personas maravillosas (emoji key):

  1. Alejandro Sanchez (alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖

  2. Paolo Lucano (plucodev), contribution: (coder), (build-tests) ⚠️

Este proyecto sigue la especificación all-contributors. ¡Todas las contribuciones son bienvenidas!

Este y otros ejercicios son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.