Construye diseños de sitios web con CSS

En este tutorial aprenderás los siguientes conceptos:

1. Display vs Position

2. Display: Flex property.

3. Float property.

4. Center Content.

5. Sidebar Layouts.

6. Using :before y :after.

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

Instalación en un clic

Instalación manual

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 bc.json:

1$ npm i jest@24.8.0 -g
2$ learnpack start

Nota: Los ejercicios tienen calificación automática pero los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y los uses solo como una recomendación o pueden frustrarte.

¿Cómo están organizados los ejercicios?

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

1. index.js: representa el archivo de entrada para toda la aplicación.
2. README.md: contiene las instrucciones de los ejercicios.
3. test.js: no tienes que abrir este archivo, contiene el script del test para el ejercicio.

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!