Tutorial de Ejercicios de CSS de 4Geeks Academy

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

En este tutorial aprenderás los siguientes conceptos:

Cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta <style> o usando una hoja de estilos externa <link>.
Seleccionar elementos HTML de su sitio web para aplicar los estilos.
Aplicar Reglas CSS (estilos) a esos elementos.
Utilizar las reglas CSS más populares.
Aprender los trucos CSS más populares.

Antes de empezar... hay otros tutoriales

Aprende HTML
Aprende Formularios HTML5
Aprende CSS← 🔥 Estás aquí
Aprende CSS Layouts
Aprende 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:

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

Descarga estos ejercicios en particular usando LearnPack y luego cd para entrar en la carpeta:

$ learnpack install css-tutorial-exercises-course

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

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:

index.html: representa el archivo de entrada para el ejercicio.
styles.css: contiene los estilos y reglas de CSS
README.md: contiene las instrucciones de los ejercicios.
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):

Alejandro Sanchez (alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (run-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
David Hay (haydavid23), contribución: (tests) ⚠️
Daniel Machota (@d4rkm0nst3r), contribución: (run-tutorial) ✅, Traducción 🌍

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!