Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/4GeeksAcademy/css-tutorial-exercises-course

Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.
https://github.com/4GeeksAcademy/css-tutorial-exercises-course

aprende-css breathecode css css-course css-exercises css-tutorial curso-de-css ejercicios-de-css interactive-tutorial learn-css learn-to-code learning learning-by-doing learning-exercise practica-de-css tutorial tutorial-exercises tutorial-interactivo tutoriales tutorials

Last synced: about 2 months ago
JSON representation

Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.

Awesome Lists containing this project

README

        

# Tutorial de Ejercicios de CSS de 4Geeks Academy






follow on Twitter


¡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. Cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta `` o usando una hoja de estilos externa `<link>`.

2. Seleccionar elementos HTML de su sitio web para aplicar los estilos.

3. Aplicar Reglas CSS (estilos) a esos elementos.

4. Utilizar las reglas CSS más populares.

5. Aprender los trucos CSS más populares.

<!-- hide -->
#### Antes de empezar... hay otros tutoriales

<ol>
<li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a></li>
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5 </a></li>
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>← 🔥 Estás aquí</li>
<li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
<li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
</ol>

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-tutorial-exercises-course) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.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 install css-tutorial-exercises-course
```

> 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
```

<!-- endhide -->
## ¿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:** representa el archivo de entrada para el ejercicio.
2. **styles.css:** contiene los estilos y reglas de CSS
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: Los ejercicios son autograduados, pero 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) 🤔, (run-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖

2. [David Hay (haydavid23)](https://github.com/haydavid23), contribución: (tests) ⚠️

3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (run-tutorial) ✅, Traducción 🌍

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).