https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises
https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises
- Owner: 4GeeksAcademy
- Created: 2019-10-14T20:14:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T23:11:41.000Z (8 months ago)
- Last Synced: 2024-08-29T00:26:22.781Z (8 months ago)
- Language: JavaScript
- Size: 1.79 MB
- Stars: 20
- Watchers: 3
- Forks: 183
- Open Issues: 1
-
Metadata Files:
- Readme: README.es.md
Awesome Lists containing this project
- jimsghstars - 4GeeksAcademy/css-layouts-tutorial-exercises - (JavaScript)
README
# Ejercicios CSS Layouts
Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises/graphs/contributors) de [4Geeks Academy](http://4geeksacademy.co/)
[](https://breatheco.de)
[](https://twitter.com/4geeksacademy)
¡Hola! Soy [Alejandro Sanchez @alesanchezr](https://github.com/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
- Aprende HTML
- Aprende Formularios HTML
- Aprende CSS
-
Aprende CSS Layouts← 🔥 Estás aquí
- 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](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git).
> 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+:
```bash
$ npm i learnpack -g
$ learnpack plugins:install learnpack-html
```
2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta:
```bash
$ 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.
3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
```bash
$ npm i [email protected] -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](https://github.com/kentcdodds/all-contributors#emoji-key)):
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) ⚠️
Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).