Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Maquetando perfil HTML

23/26
Recursos

Aportes 86

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Reto:

reto completado

les comparto el fragmento de codigo para dar efecto de degradado, si colocan el primer valor en top (degradado vertical) left (degradado horizontal) deg (degradado diagonal)

background: linear-gradient(145deg,#41CFAC, #FA5AB5) ;```

Les comparto mi avance compañeros.

Una pequeña corrección para manejar el nombre de las clases en inglés proyects se escribe projects

Reto completado! espero comentarios y feedback. Saludos a todos.
![](

Después de unos 30 minutos estructurando y dando estilos, he aquí el resultado! 😄

reto: un perfil diferente

No es mucho pero es trabajo honesto😆![](

![](

Solución al reto:

Versión Desktop

Versión Tablet

Versión Mobile

Este es mi blog, algo diferente a lo visto en el curso pero basándome en el código:

Personalmente me gusta mucho este curso, tiene muchas cosas que se pueden hacer mejor, pero claro hay que entender que esto es solo para principiantes. Muy buen curso.

Me gusta más el ejercicio de maquetar con display Grid. ¡Excelente clase!

Listo!

Lo hice solo usando display:grid para todas las partes de la maquetación, es recomendable hacer eso o combinarlo con otras propiedades como flexbox o los mismos display block ,block-inline , etc?

![](

//- Aporte

Aquí el resultado de mi blog 😃

projects?

Listo!!, terminado el reto!

Buenas, a continuación comparto el mío:
   

Listo!!!

Reto cumplido.

Mi aporte al reto, siento que utilizando grid area puedes crear breakpoints con una gran facilidad.

Breakpoints

@media screen and (max-width: 768px) {
    
    
    .contact-main-container{
        
        grid-template-areas:    "contact-left"
                                "contact-right";
        
        
    }
    .profile-container{
      
        grid-template-areas:    "profile-img"
                                "profile-description" ;
       
}
    .grid-container{
        grid-template-areas:    "project-1"
                                "project-2"
                                "project-3"; 
}
}

Desktop

Smartphone
Tablet

Smartphone

reto finalizado con unas ligeras modificaciones:

Comparto mi práctica con grid

<section class="profile-container">
            <div>
                <img src="https://media.istockphoto.com/photos/female-student-going-for-class-in-high-school-picture-id1328847023?b=1&k=20&m=1328847023&s=170667a&w=0&h=tEyMJ3IOTqXYG3e_4BEOXpJtz0qITQlf7LtgP8QcxzA=" alt="">
            </div>
            <div>
                <h2>¡Hola!</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni unde pariatur nobis fugit commodi, ullam temporibus nulla natus itaque accusamus beatae voluptatibus sequi! Accusantium.
                </p>
            </div>
        </section>
        <section class="profile-projects-container">
            <div>
                <h4>Proyectos</h4>
            </div>
            <div class="profile-projects">
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                    </p>
                </article>
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur ea placeat laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam architecto iste ducimus, pariatur tempore ea rem laborum, blanditiis deserunt ullam consequuntur illum accusamus numquam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima maxime esse consequatur.
                    </p>
                </article>
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                    </p>
                </article>
            </div>
        </section>
.profile-container {
    display: grid;
    grid-template-columns: 1.5fr 3fr 3fr 1.5fr;
    align-items: center;
    gap: 60px;
    background-color: #ddd;
    padding: 60px 0;
}

.profile-container div:nth-child(1){
    grid-column: 2;
}

.profile-container div:nth-child(2) {
    grid-column: 3;
}

.profile-container div img {
    width: 100%;
}

.profile-projects-container {
    display: grid;
    grid-template-columns: 1.5fr 6fr 1.5fr;
    justify-items: center;
    align-items: center;
    margin: 45px 0;
    /* grid-template: 20px; */
}


.profile-projects-container div:nth-child(1) {
    grid-column: 2;
    text-align: center;
    font-size: 20px;
    /* border-bottom: 1px solid #aaa; */
    padding-bottom: 12px;
    display: inline-block;
}

.profile-projects-container div:nth-child(2) {
    grid-column: 2;
}

.profile-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* align-items: center; */
    border-top: 1px solid #999;
}

.profile-projects article h5 {
    font-size: 16px;
}

![](

Hola a todos, acá terminé el ejercicio total, incluyendo media queries con todas las páginas. Sin embargo lo hice tal cual el ejercicio ya que yo quiero construir mi portafolio en una sola página ya que me parece mejor el uso de story telling a través de esta forma. Segundo el blog prefiero escribirlo en medium mas que en mi página propia :v

Mobile

Tablet

Desktop


Reto cumplido

Completado!

  • proyectzzzzzzzzzz

reto cumplido 😃

Aquí les dejo mi diseño a ver que les parece, Un saludo desde Suiza
My-Profil

genial

Reto cumplido:

así quedo mi reto de crear el perfil;

estupendo 😄

![](

genial voy a ver este video pero pude hacerlo reutlizando codigo anterior excelente reto

<main class="profile-main">
        <section class="profile-news-container">
            <div class="grid-container profile-main-container">
                <div class="profile-img-container">
                    <img src="assets/img/img-perfil.jpg" alt="">
                </div>
                <div class="profile-info-container">
                    <h3>Hola!</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore temporibus quae officia iure quod laboriosam explicabo quasi praesentium quam recusandae. Officia repellat expedita optio voluptatum provident veniam eius blanditiis ratione!</p>
                </div>
            </div>
        </section>
        <section class="profile-projects-container">
            <div class="grid-container">
                <h3>Proyectos</h3>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
            </div>
        </section>
        <section class="contact-main-container">
            <div>
                <img src="assets/img/013-newsletter.png" alt="">
                <div class="contact-left">
                    <a href="">Contacto</a>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
                </div>
            </div>
            <div>
                <img src="assets/img/006-like.png" alt="">
                <div class="contact-right">
                    <a href="">Escribe</a>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
                </div>
            </div>
        </section>
    </main>```
.profile-main{
    display: grid;
}
.profile-news-container {
    background-color: #e6e9ed;
    padding: 30px 50px 40px;
}
.profile-main-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 2fr;
}
.profile-img-container{
    grid-column: 1;
}
.profile-img-container img{
    width: 80%;
    margin-top: 20px;
}
.profile-info-container {
    grid-column: 2;
}
.profile-info-container p{
    margin-bottom: 35px;
}
.profile-projects-container {
    padding: 0px 50px 40px;
}
.profile-projects-container h3{
    border-bottom: 1px solid #cdd2da;
    padding-bottom: 20px;
    text-align: center;
}
.profile-projects-container .project-container{
    display: inline-block;
    padding-left: 20px;
    max-width: 30%;
    margin-bottom: 50px;
}
.profile-projects-container .project-container p{
    margin-bottom: 20px;
}```

Reto terminado!!

Comparto mi proyecto en Github
https://github.com/ArzCorp/Blog

envío de como quedo mi página antes de ver esta clase 😄

Aqui esta el mio

Felicidad es cuando te das cuenta del error y lo tienes corregido, antes que el profe.

para recordar:

Projects ✅
proyects ❌

Puliendo,puliendo. 😃

aqui esta hecho el reto

Pd: gracias a los aportes que hicieron en videos anteriores pude terminarlo con ese degradado ty ❤️

Reto completado:

Reto cumplido.
Repositorio

Pregunta: el profesor para los contenedores de las imagenes siempre usa ‘div’, no sería mejor (o mas correcto, semánticamente) usar un <figure> ? consulto porque en otros cursos si vi que usaban el figure en lugar de div

Reto. 😋

A darle 😄

Saludos!

Este es mi resultado de la página del perfil. Pueden encontrar mi repositorio aquí y la página web aquí

Me parece increíble que para darle estilos a esa simple parte de la página haya hecho tantos <div>, está correcto, eso es saber programar prolijamente

enserio en este curso aprendí mucho sobre html semántico y como hacer la estructura!

Vamos 😄

Asi va mi proyecto:

listo

RETO CUMPLIDO!

Continuemos. 😄

Acercándonos mas y mas y aprendiendo bastante

me agrada mucho entender el código sin necesidad de una explicación, @platzi vale la pena, realmente es indescriptible la sensación de nunca parar de aprender 🤣🤣🤣🤣

Reto terminado!!!

No es más conveniente contener a las imágenes en la etiqueta figure en vez de en un div??


Humildemente terminado XD para ver el proyecto entero click [aquí](file:///home/yanina/Blog/index.html)

Reto Cumplido 💚
Como le batalle en esta pantalla jaja
Se me revolvió todo lo de Grid.
Creo que ire a repasar nuevamente el curso 😄

Reto listo:

Me levante a las 7am para hacer el reto xD, asi cuando termino de trabajar sigo con el curso!!!

j