You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
10 Hrs
53 Min
48 Seg

Maquetando perfil HTML

23/26
Resources

How to structure a profile page using HTML and CSS?

Have you ever wondered how to create a profile page from scratch? Let's explore how to design and structure a simple profile web page. In this guide, I'll show you how to replicate key elements of the page, such as the header, contact and portfolio sections, and even projects. We'll start with the HTML foundation and then add CSS styles.

What elements does the profile page include?

The profile page is the place where you can show who you are and the projects you have done. The main elements we will include are:

  • Header: with your name or greeting.
  • Profile image: a photo that represents who you are.
  • Description: a brief introduction about yourself.
  • Contact section: contact information or direct reference.
  • Project portfolio: a list of projects you have worked on.

How to replicate the structure of the page?

To start, you need to replicate the basic structure using HTML. Below, I show you the HTML code you can use:

<!DOCTYPE html><html><html><head> <title>ProfilePage</title></head><body>
 <!-- Page header --> <header id="profile-header"> <h1>Hello, my name is Diego de Granda</h1> </header>
 <!-- Profile image and description --> <section id="profile-main"> <div class="profile-image-container"> <img src="your-image.jpg" alt="Profile Image"> </div> <div class="profile-description"> <h2>WhoIam</h2> <p>Alittle bit of my history and career path.</p> </div> </section></section>
 <!-- Contact section --> <section id="contact-section"> <h3>Contact</h3> <p>Addyour contact details here.</p> </section>
 <!-- Projects portfolio --> <section id="projects-section"> <h3>Projects</h3> <div class="projects-container">            
 <!-- Project 1 --> <article class="project"> <h4>Project1</h4> <p>Descriptionof project 1</p> </article>
 <!-- Project 2 --> <article class="project"> <h4>Project2</h4> <p>Descriptionof project 2</p> </article>
 <!-- Project 3 --> <article class="project"> <h4>Project3</h4> <p>Descriptionof project 3</p> </article>
 </div> </section>
</body></html></html>

How to style the page with CSS?

After setting up the HTML structure, the next step is to add CSS styles to give an attractive look to your profile page. Make sure to include an external CSS file or add them inside the <style> section in your HTML file.

Example of basic CSS for the profile page:

body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;}
header { background: #f4f4f4f4; padding: 20px; text-align: center;}
.profile-image-container img { width: 150px; border-radius: 50%; display: block; margin: 10px auto;}
.profile-description,.contact-section,.projects-section { padding: 20px;}
.projects-container { display: flex; justify-content: space-between;}
.project { padding: 10px; border: 1px solid #ddd; border-radius: 5px; width: 30%;}

Can I customize my page even more?

Of course you can! You can expand and customize your profile page to suit your needs. Consider adding:

  • CSS transitions and animations to create visual effects.
  • Social media icons to increase interactivity.
  • Additional sections such as a blog or customer testimonials.

It's always important to apply best practices in web design and make sure your page is easy to navigate and visually appealing - experiment with colors, fonts and layout until you find what works best for you!

Creating an effective profile page is a big step in building your online presence. With these elements well structured, you'll be ready to get your story and projects out to the world.

Contributions 95

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

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) ;```

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

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

reto: un perfil diferente

Les comparto mi avance compañeros.

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

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

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.

![](

Listo!

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

Les comparto mi página:

![](

projects?

Como va quedando mi proyecto?

CSS solo del perfil

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-family: 'Roboto mono', monospace;
    font-size: 62.5%;
}
a {
    text-decoration: none;
    display: inline;
    color: black;
}
/* Header */
header {
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 1fr;
}
header .header-icons-container {
    width: 100%;
    height: 50px;
    display: grid;
    background-color: #47cfac;
}
header .header-icons-container .icons {
    width: 300px;
    height: auto;
    display: flex;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
header .icons span {
    color: white;
}
nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 90px;
}
nav .nav-logo-container {
    margin-left: 50px;
}
nav .nav-logo-container img {
    width: 220px;
    margin-top: 10px;
}
nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
nav .profile-link a {
    font-size: 1.4rem;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid black;
}
/* main */
.blogpost-main-container {
    width: 100%;
    min-height: 700px;
    text-align: center;
    padding-bottom: 50px;
}
.blogpost-main-container .blogpost-main-profile { 
    display: flex;
    align-items: center;
    text-align: initial;
    padding: 80px;
    gap: 30px;
    background-color: #e6e9ed;
}
.blogpost-main-profile img {
    width: 350px;
    margin-left: 50px;
}
.blogpost-main-profile div h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.blogpost-main-profile div p {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 2.5rem;
    margin-right: 50px;
}
.blogpost-main-projects {
    min-height: 350px;
}
.blogpost-main-projects > h2 {
    font-size: 2rem;
    padding: 20px;
    border-bottom: 1px solid #cdd2da;
}
.blogpost-main-projects section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 20px;
    gap: 20px;
    margin: 0 50px;
}
.blogpost-main-projects section div {
    text-align: initial;
}
.blogpost-main-projects section div p {
    font-size: 1.5rem;
    margin-top: 15px;
}

/* contacto */
.contact-main-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 250px;
    background-color: #e6e9ed;
    padding-bottom: 50px;
}
.contact-main-container img {
    height: 100px;
    margin-bottom: 40px;
}
.contact-main-container div {
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.contact-main-container .contact-left, .contact-main-container .contact-right {
    display: block;
    width: 250px;
    margin-left: 10px;
    font-size: 1.4rem;
    font-weight: bold;
}
.contact-left a, .contact-right a {
    border-bottom: 1px solid black;
}
.contact-left p, .contact-right p {
    margin-top: 10px;
}
/* footer */
footer {
    width: 100%;
    height: 80px;
    background-color: #22272d;
    border-top: 35px solid #47cfac;
    text-align: center;
}
footer p {
    color: white;
    margin-top: 17px;
}

//- Aporte

Listo!!, terminado el reto!

Reto cumplido.

Listo!!!

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

Reto:

HTML:

<!DOCTYPE html>
<html lang="es-MX">
    <head>
        <title>Perfil</title>
        <link rel="stylesheet" href="./css/profile.css" />
        <link rel="stylesheet" href="./assets/fonts/flaticon.css" />
        <meta charset="UTF-8" />
        <meta name="description" content="Pagina del perfil" />
        <meta name="robots" content="index,follow" />
        <meta 
            name="viewport"
            content="
                width=device-width, 
                user-scalable=no, 
                initial-scale=1.0, 
                maximum-scale=1.0, 
                minimum-scale=1.0"
        />
    </head>
    <body>
        <header>
            <section class="header-icons-container">
                <div class="icons">
                    <a href="#"><span class="flaticon-001-facebook"></span></a>
                    <a href="#"><span class="flaticon-002-twitter"></span></a>
                    <a href="#"><span class="flaticon-011-instagram"></span></a>
                    <a href="#"><span class="flaticon-010-linkedin"></span></a>
                    <a href="#"><span class="flaticon-008-youtube"></span></a>
                </div>
            </section>
            <nav>
                <section class="nav-logo-container">
                    <a href="./index.html"><img src="./assets/img/Logo-negro.png" alt="Logo de mi blog" /></a>
                </section>
                <section class="profile-link">
                    <a href="./perfil.html">Sobre mi</a>
                </section>
            </nav>
        </header>
        <main class="main-profile">
            <section class="profile-info">
                <div class="profile-picture">
                    <img src="./assets/img/profile-pic.jpg" alt="Imagen de persona" />
                </div>
                <div class="profile-desc">
                    <h1>Hola!</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error incidunt, earum magni nobis ab qui repellat ut, odit quam ratione animi asperiores quia atque quas explicabo. Quaerat, corrupti id!</p>
                </div>
            </section>
            <section class="profile-proyects">
                <div class="grid-container">
                    <h3>Proyectos</h3>
                    <div>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                    </div>
                </div>
            </section>
            <section class="contact-main-container">
                <div>
                    <div>
                        <img src="./assets/img/013-newsletter.png" alt="Imagen de correo" />
                        <div>
                            <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="Imagen de corazón" />
                        <div>
                            <a href="">Escribe</a>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </footer>
    </body>
</html>

SCSS:

@import 'reset';
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';
@import 'global';
@import 'contact';
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap');

.main-profile{

    font-family: 'Roboto mono', monospace;

    .profile-info{

        background-color: $gray-color;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 80px;

        .profile-picture{

            width: 30%;

            img{

                width: 100%;

            }

        }

        .profile-desc{

            width: 60%;

            h1{

                font-size: 36px;
                font-weight: bolder;

            }

            p{

                font-size: 16px;

            }

        }

    }

    .profile-proyects{

        padding: 0 50px 40px;

        div{

            h3{

                border-bottom: 1px solid $gray-color;
                padding-bottom: 20px;
                padding-top: 20px;
                text-align: center;
                font-size: 35px;
    
            }

            div{

                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 20px 20px;

                article{

                    h2{
        
                        font-size: 30px;
                        margin: 25px 0;
        
                    }
        
                    p{
        
                        margin-bottom: 15px;
        
                    }
        
                }

            }

        }   

    }

}

mi reto:

Aquí está mi reto completado

Reto superado! logre hacerlo de la siguiente manera: ![](https://static.platzi.com/media/user_upload/FireShot%20Capture%20001%20-%20Perfil%20-%20127.0.0.1-9d40ec49-c65d-4626-91da-7fc60ca3ac0d.jpg) ```css /* ---------- PROFILE ---------- */ .about-me__Container { height: 300px; background-color: var(--gray-blue); align-content: center; } .about-me__Container .about-me-grid { width: 80%; margin-inline: auto; display: grid; grid-template-columns: 1fr 2fr; align-items: center; } .about-me-grid .about-me__Text { margin-inline: 1rem; padding: 1rem; } .about-me__Img-Contaniner picture img { width: 300px; } .my-projects__Container h2 { width: 80%; margin: 2rem auto; padding: 2rem 0; border-bottom: 1px solid var(--gray-blue); text-align: center; } .my-projects__Container .projects-text__grid { width: 85%; margin: 3rem auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .projects-text__grid article h4 { margin: 2rem 1rem; } ```

Reto completado:

<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>```

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

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

Continuemos. 😄

Vamos 😄

aqui esta hecho el reto

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

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

Acercándonos mas y mas y aprendiendo bastante

Aqui esta el mio

Reto terminado!!

para recordar:

Projects ✅
proyects ❌

Asi va mi proyecto:

RETO CUMPLIDO!

Reto cumplido:

listo

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

genial

Soy profesor de primaria y siento lo que mis alumnos padecen en ciertas materias, llevo ya varias semanas y siento que no la estoy haciendo.

Le dedico más de 20 horas a la semana y nomas no doy con ninguna. Soy la vergüenza andando, pero eso sí, no voy a parar hasta que aprenda.

Maquetado de la página de perfil.

![](

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

estupendo 😄

Reto. 😋

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!

A darle 😄

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

así quedo mi reto de crear el perfil;

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!!!

reto cumplido 😃


Reto cumplido

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

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

![](

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 cumplido:

bien lo dijo el master, solo debíamos reutilizar código ahora lo personalizare a mi manera y terminare los blogs.

Reto cumplido mi bro




Con responsive desing y toda la cosa.

Cumpliendo el reto

Esta fue la más rápida que hice xd, ya estaban todos los estilos hechos asdlñasdkjñljasd

![](https://static.platzi.com/media/user_upload/image-93141684-9e32-4474-8c6b-a1891d3b1c78.jpg)woooooo!!! como me sorprende estar aprendiendo tanto y tan rapido! hace 2 semanas era solo un Barista, AHORA sigo siendo un Buen Barista, pero estoy aprendiendo a maquetar paginas web! muchas gracias profe!

despues de esta clase ire directamente a cojer clases para saber cuales colores convinan mejor… pero fuera de lo demas me la estoy pasando bien siempre paro la clase y para intentar hacer el diseño por mi cuenta primero.

Reto: No puse una foto mía porque no tengo, seguí la del curso

Reto cumplido, hice algunas modificaciones del diseño inicial.

Listo, no hay nada mejor que la sensación de hacerlo solo

reto finalizado con unas ligeras modificaciones:

Completado!

Puliendo,puliendo. 😃

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

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

Reto listo: