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

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

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.

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

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.

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

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.

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

El profesor “A 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 [email protected]!
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?

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

asi me quedó:

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 “blogs” 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…

,