Reto:
Introducción
Lo que aprenderás sobre maquetación en CSS
Chrome Devtools
Análisis y creación del proyecto
Diseño del proyecto
Setup del proyecto
Creando la página principal
Arquitectura del header en HTML
Estilos en el header
Agregando íconos
Agregando imágenes al header
Manejo de Grid para posicionar contenedores
Manejo de imágenes de Background
Agregando fuentes
Terminando el Home
Creando página de Blogs
Blog page
Manejo de clases
Estilos en blogs html
Agregando imagen
Estilos del botón
Trabajando la sección de post
Grid Container
Creando página de Blog
Crear la pantalla de blog
Agregando estilos a la página de blog
Creando página de perfil
Sección de contacto
Maquetando perfil HTML
Manejando estilos en la página de perfil
Blog responsivo
Media Queries
Cierre
Cierre del curso
You don't have access to this class
Keep learning! Join and start boosting your career
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.
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:
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>
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.
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%;}
Of course you can! You can expand and customize your profile page to suit your needs. Consider adding:
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
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😆;
* {
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 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.
{
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;
}
 {
.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
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:
Want to see more contributions, questions and answers from the community?