Finalizando el proyecto

Clase 41 de 42 • Curso de Preprocesadores CSS

Clase anteriorSiguiente clase

Resumen

Imagen del reto

Asis Melgarejo Lopez

student•

RETO FINALIZADO P.D: Personalicé un poco el proyecto, espero que no sea un problema:

Geovany Gómez

student•

wow! te quedo genial!!

Jancarlos Santiago

student•

Ahora un reto para llevar tu página al siguiente nivel sería hacer el contenido dinámico con Java Script! Podrías usar alguna API de anime para introducir el contenido dinámicamente dependiendo de la categoría.

Cristian Felipe Patiño Cáceres

student•

Muchachos quiero compartir mis resultados :) Aqui dejo:

Link de Repositorio
Link de la Página web

!imagen1

!Imagen2

!Imagen3

!Imagen4

Kevin Andres Curruchich Xocop

student•

Ufff quedó brutal 👌👌

Fernando Otzoy

student•

belleza <3 .

Jo M

student•

Geovany Gómez

student•

Esos bordes redondeados le dan buen estilo!

Carlos Rodríguez

student•

Hacer responsive una web de manera inversa, de escritotio a mobil es una tortura, lo mejor es empezar a de mobil a resolusiones grandes, y con files css separados!

Fadith Enrique Escorcia Mujica

student•

Reto finalizado, excelente curso y excelente profesor.

Diego Jeanluck Linares Castillo

student•

Reto Finalizado: Link del sitio: Platzi Games

Kevin Andres Curruchich Xocop

student•

Buen trabajo 👌

Julio Loarte Huerto

student•

excelente

Felix Castro

student•

Comparto el reto terminado: pagina resultado github

Jhean Pacheco

student•

Reto completado

Sergio Bernal

student•

Bueno ese reto. Aquí el mío:

Néstor Raúl Guzmán Díaz

student•

Alguien sabe como hago para centrar la imagen? las dimensiones responsive estan perfectas pero al haerla para el movil se recorta la imagen no he podido centrarla para que se vea bien. y alguien sabe como hacer para que el bloque de noticias destacadas quede debajo de esta seccion

![](

Jesus David Duarte

student•

Hay muchas posibles soluciones para resolver este dilema, te recomendaria que pongas la imagen dentro de una etiqueta puede ser <figure> o simplemente un <div> y la imagen adentro te doy un ejemplo

<figure> <img hrf="../ruta_de_tu_imagen'> </figure> defines las dimensiones de la imagen con el figure como padre y el hijo que en este caso seria la etiquta img le pones que su width sea del 100% de su padre y con eso deberia funcionar espero que te sirva

Néstor Raúl Guzmán Díaz

student•

Hola David gracias por tu ayuda exactamente esa es parte de la solución, faltaba también agregar las propiedades, object-fit:cover y height: 100vh y queda perfecta la imagen.

Norma Yamileth Diaz Escobar

student•

Como que es mejor empezar desde mobile, sino esto se vuelve un fastidio.

Wilmar Aldemar Cabezas Pisco

student•

así es!!, toma el curso de mobile first (diego de Granda)

Jo M

student•

Aun no logro mover las noticias destacadas arriba de la caja PS4, alguien tiene alguna idea ?

Enrique Orozco Gaytán

student•

Tuve el mismo problema, en el archivo de footers.scss tienen que ir anidadas las etiquetas de ul, li y a, tal como se muestra:

Para no tome los estilos de ul de forma global.

Efraín Hernández García

student•

Así me quedó el reto, me falta pulir unos detalles (sería más facil si no tuviésemos tantos archivos)

David Loreto

student•

Reto completado!

Daniel Valderrama Mendoza

student•

Reto completado

Usuario anónimo

user•

ESAU JOSUE MARTINEZ CARRASCO

student•

Hola!! Si requiero hacer el deploy a un host, que carpetas o archivos debo subir? Debo incluir también las carpetas PUG y los archivos de Less? Las rutas deben modificarse? AYUDA!!

Jo M

student•

Porque justify-content en el elemento padre de la grilla elimina los grid items ? No encuentro la manera de central los elementos individualmente o la grilla en general Ejm:

.caja-rdr2 {
  align-self: center;
  justify-self: center;
  @include grid-row(1, 2);
  @include grid-column(4, 5);
}```

align-self funciona pero   justify-self: center; no funciona no entiendo xq

andrés eduardo betancourt bescanza

student•

hola, justify-self creo que funciona solo sobre display flex, no estoy seguro

José Ángel Martinez Frias

student•

si ya tiene dysplay flex te debe de dejar con justify content y si no pues inténtalo con margen: auto;

Daniel Ruiz

student•

alguien sabe por que cuando modifico un pug no hace cambios en el html pero si deja compilar

Roger Carlos Ariel Alba

student•

Hola

¿Lo resolviste?, ¿es lo mismo que resolviste en las preguntas anteriores?

Algo que si es cierto es que pug es muy sensible con los errores de "typado" e indentación. Sugiero puedas revisar esos detalles.

Daniel Ruiz

student•

Si, lo logré resolver, resulta que ademas de guardar el modulo que estaba modificando tambien tenia que guardar el archivo donde estaba invocando ese modulo, para que vuelva a compilar todo.

CLAUDIA ANDREA CAMPO GRIJALBA

student•

Finalizando el proyecto

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less

Introducción a Less

Anidamiento e imports

Variables

Funciones

Mixins

Finalizando ejercicio de página de artículos

Sass

Introducción a Sass

Variables

Imports y Extends

Mixins

Funciones

Condicionales y Loops

Finalizando ejercicio de perfil de usuario

Stylus

Introducción a Stylus

Variables

Mixins

Funciones

Condicionales y Loops

Desarrollo del proyecto Platzi Games

Introducción al proyecto

Plantillas modulares con PUG: Header

Plantillas modulares con PUG: Footer

Grid System con Sass

Mixins para manejo de fuentes responsivas

Funciones para media queries

Finalizando el proyecto

Conclusiones y Cierre

Conclusiones y Cierre

Imagen del reto