A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones

Empezar tutorial interactivo

Página de producto con HTML/CSS

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Construye la Página de inicio de un producto con HTML/CSS

Product Landing Page Exercise for HTML/CSS

Diseñar o hacer layouts es una de la cosas más difíciles en CSS/HMTL, nunca ha sido una buena tecnología para facilitar este proceso, lo que es extraño y triste pues era su principal objetivo.

Sin embargo, en los últimos años las cosas han mejorado, desde el año 2018 podemos usa las reglas CSS display: flex; y display: grid;.

Hay algunos frameworks de css como Bootstrap que se utiliza ampliamente en ~ 30% de los sitios web del mundo., Foundation, Material UI, etc. El objetivo de este ejercicio es pulir tus habilidades en CSS/HTML puro.

📝 Instrucciones

  1. Reproduce exactamente la página de este producto en HTML/CSS. No puedes usar ningún framework CSS y la página de inicio no debe ser interactiva.
  2. Usa la imágenes de la carpeta ./assets.
  3. Usa las reglas de CSS flex-box, aquí hay un muy buen documento que explica todo al respecto: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

🌱 Cómo iniciar este proyecto

Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

b) Clonar este repositorio localmente en tu computador:

1$ git clone https://github.com/breatheco-de/exercise-product-landing-page-plain-css.git

Asegúrate de tener instalado node.js en tu computador y ejecutar el siguiente comando en tu terminal para previsualizar tu sitio web:

1npx --yes http-server -c-1

💡 Importante:

  • Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

  • Nota: tendrás que actualizar tu navegador cada vez que actualices tu código.

Nadie te dice esto:

  • El 40% de los errores al hacer HTML son tags o etiquetas de cierre faltantes o mal puestas, para evitarlo abre y cierra la etiqueta o tag al mismo tiempo y luego agrega el contenido de la etiqueta.

  • Elegir los nombres de las clases de CSS es el verdadero truco: los nombres de las clases le dan forma a tu forma de pensar. En lugar de usar nombres orientados a los negocios como producto1, producto2, nosotros, etc. Deberías usar nombres orientados al comportamiento como menú o lista-horizontal, etc. Eso te ayudará a reutilizar mucho las clases.

  • Don't use the <img> for images that will be uploaded later by a user, you should instead use <div> with background images, the image tag is only used for little things.

No uses el <img> para imágenes que más tarde cargará un usuario, en su lugar deberías usar un <div> con imágenes de fondo, la etiqueta de imagen solo se usa para pequeñas cosas.

Regístrate para obtener acceso gratis a este proyecto

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

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Próximos workshops

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Regístrate para obtener acceso gratis a este proyecto

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

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías