Manejando estilos en la página de perfil

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

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ó “proyect” para traducir “proyecto”, la traducción correct es “project”. 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 😃

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

Perfil Terminado 🚀
Falta hacerlo Responsivo 😄
Pero esta clase Diego estuvo muy gracioso jaja

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

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,

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;
}

Una pequeñita observación: proyecto en inglés se escribe “project”

Este curso me ayudó mucho a asentar conocimientos.

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 “metodo” a nivel profesional?

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

Tambien podemos usar la funcion repeat.

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

RETO TERMINADO
Faltaría solo hacerlo responsive

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;
} 

El profesor “A mi me gusta sufrir”, JAJAJAJA lo amo

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.

asi me quedó:

Buen profesor.

Muy buen curso

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?

Cool, que excelente clase.

Ando super contento con este curso, ya casi terminamos!

Se viene la introducción a mi próximo curso 🥳

Excelente clase!!

Muy practico este curso. Genial!

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!

Genial 😄

va quedando bien

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.

Creo que se podría reutilizar el código de “blogs” prácticamente es lo mismo.

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

me quedo de esta manera:

Genial. Fantastico Curso

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

Este ha sido un gran curso!

Practicar, practicar y …

Practicar! 💪

genial

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.

estupendo 😄

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

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

Genial!!!

Excelente!!!

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

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

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

Comparto mi avance

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;
}

clases de los proyectos

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

3:15 hahahaha xD

jajajajaj

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

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

Perfecto, ya casi queda! 😄

Hola!!! Lo logré hacer antes del video…

Comenzando a dar estilos a

,