Empezar tutorial interactivo

← Volver a ejercicios
  • css

  • HTML and CSS

  • CSS Grid

Construye diseños de sitios web con CSS

Aprende a construir diseños con un tutorial interactivo y auto-corregido. Domina las propiedades CSS como display, position, float y z-index. Entiende cómo centrar contenido, crear barras laterales y usar pseudo-elementos. Mejora tus habilidades de diseño web con tutoriales prácticos y auto-corregidos.

Trabaja en entornos de codificación reales con LearnPack.

Obtén ayuda instantánea con nuestro mentor de IA: Rigobot.

Sin instalación, vas directamente a programar

Dificultad

  • easy

Duración promedio

8 hrs

Dificultad

  • easy

Duración promedio

8 hrs

Regístrate para obtener acceso gratis al tutorial interactivo

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

8 hrs

Dificultad

  • easy

Duración promedio

8 hrs

Dificultad

  • easy

Duración promedio

8 hrs

Dificultad

  • easy

Duración promedio

8 hrs

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.

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

Regístrate para obtener acceso gratis al tutorial interactivo

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

8 hrs

Dificultad

  • easy

Duración promedio

8 hrs