No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Manejando estilos en la p谩gina de perfil

24/26
Recursos

Aportes 73

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

no mames se que debo de prestar atencion a las cosas mas relevantes pero el min 3:15 me dio risa no soy yo no esta tan guapo jajajjajaja

min 7:54 dejaste de usar el color picker, la decepci贸n la traici贸n hermano 馃挃

Yo utilizar铆a gap para separar las columnas nobel padding ero imagino que es otra forma de hacerlo.

No entiendo el malestar de otras personas con el curso, aqui se esta utilizando las m煤ltiples posibles soluciones que puedes dar a una maquetaci贸n, cada quien lo hace a su forma y a su manera, no hay un solo camino y no est谩 mal.

Personalmente me encantan estos cursos!
En donde se refuerzan contenidos con proyectos pr谩cticos, que puedes adaptar a lo que quieras o necesites 馃槃

Esta instrucci贸n;

grid-template-columns: 1fr 1fr 1fr;

Se puede sustituir por;

grid-template-columns: repeat(3, 1fr);

Perfil terminado

Minuto 3:15 la guapura del profe diego equivale a este meme

Definitivamente este curso marca un antes y un despu茅s en mi formaci贸n, totalmente claro la explicaci贸n de los conceptos y dominio profundo del conocimiento. Excelente la forma en la que invita y motiva para realizar retos. Este curso excede las expectativas

Esta muy buena y f谩cil la clase. Pero no puedo pasar por alto que el profesor us贸 鈥減royect鈥 para traducir 鈥減royecto鈥, la traducci贸n correct es 鈥減roject鈥. Es como un peque帽o golpe para mi yo que habla ingl茅s.

Nuevamente no usaste grid, este curso efectivamente NO es CSS Grid, se us贸 alguna vez pero no fue el foco. Lo agregaste en los textos debajo de proyecto pero tienen practicamente la misma l贸gica que los posts de la parte de blog solo que ahi como eran m谩s seguro no se te ocurri贸 como aplicarlo, ac谩 como es algo m谩s acotado se te pareci贸 necesario. Realmente ten铆a mucha expectativa de este curso y lo estaba esperando porque me gust贸 todo lo que vi de otros cursos de platzi, pero este en particular me result贸 que de el tema del t铆tulo del curso, fue pedirle a alguien que maquete sin confirmar sin revisar previamente que iba a hacer y como implementar Grid.

Me encantan las explicaciones de este prof, s煤per claras, igual que las de teffcode 馃槂

Perfil Terminado 馃殌
Falta hacerlo Responsivo 馃槃
Pero esta clase Diego estuvo muy gracioso jaja

este curso me ha ayudado mucho para aprender peque帽os detalles en los cuales estaba fallando, gracias Diego.

Una peque帽ita observaci贸n: proyecto en ingl茅s se escribe 鈥減roject鈥

El profe dejo de usar el color picker!!! nooooooooo ya nada tiene sentido. Mentira mi aporte es el siguiente, en lo personal me pierdo mucho en el CSS porque le estoy dando estilos en un mismo documento a varias paginas, LO QUE ME AYUDA es colocar comentarios definiendo cada seccion y cada pagina ejemplo /Estilos Main/ y luego todos los estilos, visualmente me ayuda mucho y pues buscar con ctrl+f las clases especificas en todo el documento,

Este curso me ayud贸 mucho a asentar conocimientos.

En vez de agregar padding a la clase (.proyecto-container).
Mejor agreguen la propiedad grid-gap: 20px; a la clase project-main-container. Quedar铆a as铆:

.projects-main-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

llego al mismo resultado pero con un monton de estilos y digo como con 4 lineas ya lo acabo

asi me qued贸:

Para que sus cards sean responsive, es mejor agregarles:

.cards {
    margin: 0 auto;
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 20px;
} 

en el min 11:34 en ves de usar:
.proyect-container {
padding: 0 5 px;
}
le agreg茅 al
.proyects-main-container {
gap: 50px;
}
hace lo mismo ya que estaba como grib.

El profesor 鈥淎 mi me gusta sufrir鈥, JAJAJAJA lo amo

Tambien podemos usar la funcion repeat.

display: grid;
grid-template-columns: repeat(3,1fr);

RETO TERMINADO
Faltar铆a solo hacerlo responsive





en la misma clase .proyects-main-container puedes agregar un gap para dar el espacio sin utilizar el padding dentro de la clase .proyect-container

Buenas noches a tod@s!
Una pregunta, yo lo que hice es reutilizar codigo de blogs.html y agregue unas peque帽as clases simplemente para modificar minimamente el css que ya se tenia para lograr el resultado que se queria.
Es una mala practica? o puede usarse ese 鈥渕etodo鈥 a nivel profesional?

esta seccion la hice con display:inline-block

Dejo mi versi贸n de la secci贸n de proyectos. Esta tiene un efecto glass, y adem谩s una animaci贸n en hover que hace que los elementos se agranden en una escala de 1.1

tkm mucho grid 鉂わ笍

Excelente, gracias

Los pasos que se deben seguir para maquetar pueden ser los siguientes:

  1. Identificar o maquetar mentalmente
  2. Estructurar
  3. Agregar clases
  4. Rellenar de contenido (textos u otros recursos)
  5. Implementar estilos

clases de los proyectos

CSS

/*  */
.profile-main-container{
    padding: 70px 40px;
    background-color: #E6E9ED;
    margin-bottom: 50px;
}
.profile-main-container img{
    width: 320px;
    margin-right: 30px;
}
.profile-main-container .profile-container{
    display: flex;
}
.profile-main-projects{
    padding: 0 50px 40px;
}
.profile-main-projects h3{
    border-bottom: 1px solid #CDD2DA;
    padding-bottom: 35px;
    text-align: center;
}
.projects-main-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.project-container{
    padding: 0 5px;
}

me quedo de esta manera:

Comparto mi avance

Para que no tengas que colocar 1fr 1fr 1fr puedes hacer lo siguiente.

grid-template-columns: repeat(3, 1fr)
<code> 

Creo que se podr铆a reutilizar el c贸digo de 鈥渂logs鈥 pr谩cticamente es lo mismo.

Que tal, buen dia campoen, 鈥 increible reto鈥

creo que lo mas conveniente es empezar desde mobile first, a mi ver鈥 ok.

asi quedo mi blog, claro le hace falta pullir unos detalles como animaciones etc.

3:15 hahahaha xD

jajajajaj

va quedando bien

Me gust贸 mucho el curso, aqu铆 un avance del proyecto:
http://notigalileo.epizy.com/blogs.html

Loco me andaba quedando con esto de las columnas. Grid es muy pr谩ctico.

Genial. Fantastico Curso

Muy buen curso

Buen profesor.

genial

Este ha sido un gran curso!

estupendo 馃槃

Excelente clase!!

Practicar, practicar y 鈥

Practicar! 馃挭

Me gusto mucho los trucos de trabajar grid layout y flex juntos.

Creo que soy solo yo, he colocado el css tal cual como el profe lo tiene y no me agarra bien algunos estilos como al profe.

Muy buen proyecto !! mas los retos que pone el profe, para asimilar lo aprendido durante las clases dadas.

He aprendido mucho en un proyecto tan sencillo, es genial!!!

Se viene la introducci贸n a mi pr贸ximo curso 馃コ

Genial!!!

Hola a todos! en minuto 9:35 el profesor crea tres columnas con grid y en el minuto 11:00 duplica el article solo dos veces pero el resultado es tres columnas llenas con la informacion duplicada. Alguien sabe porque se da esto?

Excelente!!!

Muy practico este curso. Genial!

Genial 馃槃

Muchas gracias por explicar los detalles a tener en cuenta al momento de desarrolla la p谩gina de perfil instructor Diego.

Entre el uso de variables y el uso del display grid, nos ahorramos tiempo y tenemos mayores probabilidades de mantener la est茅tica del sitio web. 隆Gran profe!

pr谩cticamente ya quedo el proyecto, muy buen curso, e tomado dos cursos con este profe y aprend铆 mucho!

Perfecto, ya casi queda! 馃槃

Cool, que excelente clase.

Ando super contento con este curso, ya casi terminamos!

Comenzando a dar estilos a

Hola!!! Lo logr茅 hacer antes del video鈥

,