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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
La estructuración de una página de blogs puede sonar igual de desafiante que fascinante. Sin embargo, con la planificación adecuada, se puede lograr una apariencia profesional y ordenada. En este segmento, exploraremos paso a paso cómo configurar la página de blogs empleando HTML y CSS, basándonos en la metodología expuesta.
Antes de empezar a codificar, es crucial definir las secciones clave que contendrá la página de blogs. En este caso, comenzamos con:
Esta clara división facilita la organización y permite centrarse en secciones específicas al momento de aplicar estilos.
Un principio fundamental en desarrollo es DRY (Don't Repeat Yourself). Aunque en este proyecto se reutilizan fragmentos de código HTML y CSS, lo importante es reconocer cuándo es adecuado hacerlo. Esto permite ahorrar tiempo y mantener la consistencia visual.
Para crear la sección principal del blog, utilizamos etiquetas HTML básicas, siguiendo los pasos abajo:
<div class="blog-principal">
<div class="contenido">
<h3> Título del Blog </h3>
</div>
<div class="imagen">
<img src="ruta/de/la/imagen" alt="Imagen del Blog">
</div>
<h2> Subtítulo del Blog </h2>
<p> Un breve resumen del contenido del blog. </p>
<a href="link-al-completo-blog"> Leer más </a>
</div>
Los elementos h2, h3, p y a sirven para estructurar bien los títulos, descripciones y el acceso al contenido completo del blog, respectivamente.
Una vez que las etiquetas HTML están listas, aplicamos estilos adecuados para mejorar la apariencia visual:
.blog-principal {
display: flex;
flex-direction: column;
align-items: center;
}
.imagen img {
width: 100%;
height: auto;
}
.contenido,
h2,
p,
a {
margin: 10px 0;
text-align: center;
}
Estos estilos logran que el contenido sea visualmente atractivo y responsivo en diferentes dispositivos.
Para el listado de blogs, empleamos una estructura repetitiva que ayuda a presentar múltiples entradas similares. Aquí un ejemplo de cómo crear un artículo individual que se duplicará:
<div class="blog-list">
<article>
<h3> Título del Blog </h3>
<img src="ruta/de/la/imagen" alt="Imagen del Blog">
<h4> Subtítulo </h4>
<p> Una breve introducción del blog. </p>
<a href="link-al-blog-detallado"> Leer más </a>
</article>
<!-- Repetir artículo conforme sea necesario -->
</div>
Un estilo simple asegura que cada blog tenga una apariencia consistente:
.blog-list article {
border: 1px solid #e0e0e0;
margin-bottom: 20px;
padding: 15px;
text-align: left;
}
.blog-list img {
width: 100%;
height: auto;
}
.blog-list h3,
h4,
p,
a {
margin: 5px 0;
}
Este enfoque hace que cada artículo en la lista se vea ordenado y profesional, mejorando la experiencia del usuario.
El pie de página suele ser una de las últimas partes a construir, pero no menos importante. Aquí se muestra cómo podrá estructurarse:
<footer>
<div class="pie-uno">
<p> Texto del primer contenedor del pie. </p>
</div>
<div class="pie-dos">
<p> Algo más de información relevante. </p>
</div>
</footer>
footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #222;
color: #fff;
}
.pie-uno, .pie-dos {
flex: 1;
padding: 10px;
text-align: center;
border-top: 10px solid green; /* Para obtener el efecto destacado */
}
Este diseño ayuda a cerrar cada página de manera estéticamente agradable.
A través de cada paso, hemos cubierto los elementos necesarios para construir una página de blogs robusta y atractiva. Al mantenerse enfocado en la estructura, el estilo y la accesibilidad, se puede lograr una experiencia de usuario eficiente y visualmente agradable. ¡Ánimo, y sigue adelante en tu camino hacia la maestría en diseño web!
Aportes 128
Preguntas 13
Ahi esta el Emmet de los 6 articulos.
div*6>h3+article>img+p*2+a
Copien borren la a vuelvanla a colocar y presionen Enter.
Se ahoran copiar y pegar 6 veces.
Funciona bien en VSCode. Creo que en sublime tienes que instalar emmet en el gestor de paquetes.
Así quedó cumpliendo el reto de hacerlo por mi cuenta:
Reto parte 1:
Lo hice practicando lo aprendido en CSS Grid Layout
el mio :'3 lo deje un tanto diferente al original XD
Con cada curso voy teniendo más soltura a la hora de realizar retos. 😄
aquí pueden ver el código si desean.
Para clonar o duplicar el codigo, lo marcas y presionas ALT + SHIFT + ↓
Me emocione y me puse a maquetar y darle el diseño de una vez a toda la pagina de blogs.
Ahora ver las clases y ver que mejorar 😄
Mi reto terminado, estuve como 3 horas xD, ahora ire a dormir y mañana lo are desde el video!, vale la pena es esfuerzo! 😄
Reto completado.
Aqui les dejo el repo de mis avances: https://github.com/abulnes16/personal-blog
.
Si ustedes son de los que peleaban para tomarle fotos a un sitio completo les dejo esta extensión: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl
Les comparto mi resultado
Mobile
PC
Tablet
Me tomé muy a pecho el reto del profe y creo que terminé lo que él va a mostrar hasta la clase 19; sin embargo, quise asumir el reto y aquí les muestro… eso sí, optimizado para los tres dispositivos.
MOBILE
TABLET
DESKTOP
COmparto mi resultado en la primera parte del blogs menu
Reto cumplido
Estoy contentisimo porque a noche por fin acabe el proyecto casi por mi cuenta, tuve unos problemas con la propiedad grid y por eso tuve que investigar por mi cuenta como funciona y observar como la usaba el profe pero como pase mucho trabajo probando en la consola con esta propiedad realmente puedo decir que aunque usé un poco de ayuda del profe me puedo ir contento porque tengo mucho mas conocimiento sobre grid.
No sabia que podiamos usar grid, con las propiedades de modelo de caja osea:
1.justify-content
2.justify-items
3.justtify-self
4.alig-items
Cómo quedó mi intento 🙂
excelente la forma de seccionar yo lo haria un poco distinto pero en este punto busco seguir el curso para mejorar mi forma de hacer css
yo directamente hice las 4 paginas antes de continuar el curso.
Al terminar me di cuenta que podia usar variables y hacer cosas para no repetir tanto el codigo, igualmente me sirvio mucho para practicar los estilos y trate de seguir la metodologia BEM.
Asi quedaron mis paginas.
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/css/font/flaticon.css">
<title>landing</title>
</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>
<div class="nav-logo-container">
<a href="/">
<img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
</a>
</div>
<div class="profile-link">
<a href="/perfil.html">Sobre mi</a>
</div>
</nav>
</header>
<main class="home-main">
<section class="main-text">
<h2>Conoce las novedades y<br> noticias del mundo Tech</h2>
</section>
<button class="main-button"><a href="/blogs.html">entra ya!</a></button>
</main>
</body>
</html>```
‘’’
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');
html {
font-size: 6.25%;
}
body {
margin: 0px;
padding: 0px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-family: 'Roboto mono', monospace;
}
a {
text-decoration: none;
display: inline;
color: black;
}
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-self: end;
align-items: center;
justify-content: space-between;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
background-color: white;
}
header nav {
height: 90px;
display: grid;
grid-template-columns: 1fr 1fr;
}
header nav .nav-logo-container {
margin-left: 40px;
}
nav .nav-logo-container img{
width: 220px;
margin-top: 10px;
}
header nav .profile-link {
display: flex;
align-items: center;
justify-content: end;
margin-right: 50px;
font-size: 20rem;
}
header nav .profile-link a {
color: black;
border-bottom: 1px solid black;
}
.home-main {
height: 80vh;
background-image: url(/assets/img/Cover.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column ;
align-items: center;
}
.home-main .main-text {
margin-top: 20px;
color: white;
font-size: 24rem;
text-align:center;
letter-spacing: 5rem;
}
.home-main .main-button {
margin-top: 30px;
background-color: #47cfac;
height: 40px;
width: 120px;
border-radius: 5px;
font-size: 18rem;
display: flex;
align-items: center;
justify-content: center;
}
.home-main .main-button a {
font-weight: 700;
font-size: 18rem;
}
blogs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/font/flaticon.css">
<link rel="stylesheet" href="/styles/blogs.css">
<title>Noticias</title>
</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>
<div class="nav-logo-container">
<a href="/">
<img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
</a>
</div>
<div class="profile-link">
<a href="/perfil.html">Sobre mi</a>
</div>
</nav>
</header>
<main>
<section class="noticias">
<div class="noticias-photo">
<h2 class="noticias-photo_title">
Noticias
</h2>
<picture class="noticias-photo_photo">
<img src="/assets/img/main-news-img.png" alt="foto de noticias">
</picture>
</div>
<div class="noticias-text">
<h1 class="noticias-text_tittle">Titulo del Blog</h1>
<p class="noticias-text_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat maiores accusamus id odit inventore earum saepe? Deserunt sunt pariatur est odit doloremque, unde, dignissimos facere iusto ratione alias vel! Optio?</p>
<a class="noticias-text_button" href="/blogPost.html">Leer mas</a>
</div>
</section>
<section class="articulos">
<section class="articulos-container">
<p class="articulos-container_title">últimos Blogpost</p>
<div class="articulos-container_posts">
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-1.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-2.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-3.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-1.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-2.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<img class="posts-articles_img" src="/assets/img/post-3.png" alt="imagen">
<p class="posts-articles_t">Titulo del Blogpost</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
</div>
</section>
</section>
</main>
<footer>
<section class="footerC">
<div class="footerC-colorBar"></div>
<div class="footerc-box">
<p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');
html {
font-size: 62.5%;
}
body {
margin: 0px;
padding: 0px;
font-family: 'Roboto mono', monospace;
}
a {
text-decoration: none;
display: inline;
color: black;
}
/*estilos 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-self: end;
align-items: center;
justify-content: space-between;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
background-color: white;
}
header nav {
height: 90px;
display: grid;
grid-template-columns: 1fr 1fr;
}
header nav .nav-logo-container {
margin-left: 40px;
}
nav .nav-logo-container img{
width: 220px;
margin-top: 10px;
}
header nav .profile-link {
display: flex;
align-items: center;
justify-content: end;
margin-right: 50px;
font-size: 2.4rem;
font-weight: bold;
}
header nav .profile-link a {
color: black;
border-bottom: 1px solid black;
}
/*final del header*/
/*estilos main*/
.noticias {
background-color: #e6e9ed;
width: 100%;
height: 70vh;
padding-top: 0px;
display: flex;
justify-content: center;
}
.noticias .noticias-photo_title {
font-size: 2.4rem;
font-weight: 700;
}
.noticias .noticias-photo {
width: 40vw;
margin-right: 150px;
}
.noticias .noticias-photo .noticias-photo_photo img{
width: 100%;
}
.noticias .noticias-text {
width: 30vw;
}
.noticias .noticias-text .noticias-text_tittle {
padding-top: 30px;
font-size: 4rem;
}
.noticias .noticias-text .noticias-text_text {
padding-top: 0px;
font-weight: bold;
font-size: 2rem;
padding-top: 0;
margin-bottom: 40px;
}
.noticias .noticias-text .noticias-text_button{
font-size: 1.8rem;
font-weight: 700;
border: 1px solid #48cfad;
padding: 15px;
}
.articulos {
width: 100%;
height: auto;
margin-bottom: 50px;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
background-color: white;
}
.articulos .articulos-container {
width: 100%;
grid-column-start: 2;
grid-column-end: 3;
display: flex;
align-content: center;
flex-flow: column wrap;
}
.articulos .articulos-container .articulos-container_title {
width: 100%;
font-size: 2.5rem;
font-weight: 900;
text-align: center;
letter-spacing: 3px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.274);
}
.articulos .articulos-container .articulos-container_posts {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: auto;
}
.articulos-container_posts .post-articles{
margin-top: 50px;
width: 30%;
height: auto;
}
.articulos-container_posts .post-articles .posts-articles_img {
width: 100%;
}
.articulos-container_posts .post-articles p {
font-size: 2rem;
font-weight: bold;
margin-bottom: 40px;
}
.articulos-container_posts .post-articles a {
border: 1px solid #47cfac;
font-size: 1.6rem;
font-weight: bold;
padding: 10px 20px;
}
/*final del main*/
/*estilos foooter*/
.footerC {
display: grid;
font-size: 1.6rem;
grid-template-rows: 1fr 3fr;
background-color: #48cfad;
}
.footerC .footerc-box {
background-color: #22272d;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
‘’
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');
html {
font-size: 62.5%;
}
body {
margin: 0px;
padding: 0px;
font-family: 'Roboto mono', monospace;
}
a {
text-decoration: none;
display: inline;
color: black;
}
/*estilos 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-self: end;
align-items: center;
justify-content: space-between;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
background-color: white;
}
header nav {
height: 90px;
display: grid;
grid-template-columns: 1fr 1fr;
}
header nav .nav-logo-container {
margin-left: 40px;
}
nav .nav-logo-container img{
width: 220px;
margin-top: 10px;
}
header nav .profile-link {
display: flex;
align-items: center;
justify-content: end;
margin-right: 50px;
font-size: 2.4rem;
font-weight: bold;
}
header nav .profile-link a {
color: black;
border-bottom: 1px solid black;
}
/*final del header*/
/*estilos main*/
.postImgCon {
display: flex;
justify-self: center;
margin: 0 auto;
width: 95vw;
height: auto ;
flex-flow: column wrap;
}
.postImgCon img {
width: 100%;
}
.postImgCon p {
font-size: 2rem;
font-weight:900;
margin-top: 100px;
margin-left: 9%;
}
.post {
width: 80%;
height: auto;
display: flex;
flex-flow: column wrap;
margin: 0 auto;
border-top: 1px solid #22272d69;
}
.post .post-title {
font-size: 3rem;
font-weight: 900;
}
.post .post-text {
font-size: 1.6rem;
font-weight: 700;
}
/*final del main*/
/*estilos foooter*/
.contactMe {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #e6e9ed;
height: 30vh;
justify-items: center;
}
.contactMe .contact {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 5%;
}
.contactMe .contact .contact-imgContainer {
display: flex;
justify-content: center;
margin-right: 10px;
}
.contactMe .contact img {
height: 100px;
}
.contactMe .contact .contact-textContainer {
margin-left: -70px;
}
.contactMe .contact a {
font-size: 2rem;
font-weight: 900;
border-bottom: 2px solid black;
}
.contactMe .contact p {
font-size: 2rem;
font-weight: 900;
}
.footerC {
display: grid;
font-size: 1.6rem;
grid-template-rows: 1fr 3fr;
background-color: #48cfad;
}
.footerC .footerc-box {
background-color: #22272d;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/font/flaticon.css">
<link rel="stylesheet" href="/styles/blogPost.css">
<title>Lo Ultimo en Tech</title>
</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>
<div class="nav-logo-container">
<a href="/">
<img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
</a>
</div>
<div class="profile-link">
<a href="/perfil.html">Sobre mi</a>
</div>
</nav>
</header>
<main>
<section class="postImgCon">
<img src="/assets/img/main-news-img.png" alt="Imagen principal del post">
<p>Noticias</p>
</section>
<section class="post">
<p class="post-title">Titulo Del blogpost</p>
<p class="post-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem mollitia harum quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus. <br> <br>
quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus. <br><br>
quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.
</p>
</section>
</main>
<aside class="contactMe">
<div class="contact">
<div class="contact-imgContainer">
<img src="/assets/img/013-newsletter.png" alt="013-newsletter">
</div>
<div class="contact-textContainer">
<a href="#">contacto</a>
<p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
</div>
</div>
<div class="contact">
<div class="contact-imgContainer">
<img src="/assets/img/006-like.png" alt="like">
</div>
<div class="contact-textContainer">
<a href="#">Escribe</a>
<p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
</div>
</div>
</aside>
<footer>
<section class="footerC">
<div class="footerC-colorBar"></div>
<div class="footerc-box">
<p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</footer>
</body>
</html>
perfil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/font/flaticon.css">
<link rel="stylesheet" href="/styles/perfil.css">
<title>Perfil</title>
</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>
<div class="nav-logo-container">
<a href="/">
<img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
</a>
</div>
<div class="profile-link">
<a href="/perfil.html">Sobre mi</a>
</div>
</nav>
</header>
<main>
<section class="profile">
<div class="profile-container">
<img class="profile-container_img" src="/assets/img/perfil.jpeg" alt="">
<div class="profile-container_TC">
<p class="profile-title">Hola!</p>
<p class="profile-text">Soy emanuel urquiola estoy aprendiendo programacion en Platzi, quiero especializarme en bases de datos. Amo las pringles y trabajar en sitios frios para estar bien abrigado 😂.</p>
</div>
</div>
</section>
<section class="articulos">
<section class="articulos-container">
<p class="articulos-container_title">Proyectos</p>
<div class="articulos-container_posts">
<article class="post-articles">
<p class="posts-articles_t">Titulo del proyecto</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<p class="posts-articles_t">Titulo del proyecto</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
<article class="post-articles">
<p class="posts-articles_t">Titulo del proyecto</p>
<p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
<a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
</article>
</div>
</section>
</main>
<aside class="contactMe">
<div class="contact">
<div class="contact-imgContainer">
<img src="/assets/img/013-newsletter.png" alt="013-newsletter">
</div>
<div class="contact-textContainer">
<a href="#">Contacto</a>
<p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
</div>
</div>
<div class="contact">
<div class="contact-imgContainer">
<img src="/assets/img/006-like.png" alt="like">
</div>
<div class="contact-textContainer">
<a href="#">Escribe</a>
<p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
</div>
</div>
</aside>
<footer>
<section class="footerC">
<div class="footerC-colorBar"></div>
<div class="footerc-box">
<p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');
html {
font-size: 62.5%;
}
body {
margin: 0px;
padding: 0px;
font-family: 'Roboto mono', monospace;
}
a {
text-decoration: none;
display: inline;
color: black;
}
/*estilos 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-self: end;
align-items: center;
justify-content: space-between;
margin-right: 50px;
}
header .icons span {
color: white;
}
nav {
background-color: white;
}
header nav {
height: 90px;
display: grid;
grid-template-columns: 1fr 1fr;
}
header nav .nav-logo-container {
margin-left: 40px;
}
nav .nav-logo-container img{
width: 220px;
margin-top: 10px;
}
header nav .profile-link {
display: flex;
align-items: center;
justify-content: end;
margin-right: 50px;
font-size: 2.4rem;
font-weight: bold;
}
header nav .profile-link a {
color: black;
border-bottom: 1px solid black;
}
/*final del header*/
/*estilos main*/
.profile {
width: 100%;
height: auto;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
background-color: #e6e9ed;
}
.profile .profile-container {
grid-column-start: 2;
display: flex;
flex-wrap: wrap;
padding: 50px 0;
}
.profile .profile-container img {
width: 19%;
border-radius: 15px;
}
.profile .profile-container .profile-container_TC {
width: 75%;
margin-left: 6%;
}
.profile .profile-container .profile-container_TC .profile-title{
font-size: 2.4rem;
font-weight: 700;
}
.profile .profile-container .profile-container_TC .profile-text{
font-size: 1.6rem;
font-weight: 700;
}
.articulos {
width: 100%;
height: auto;
margin-bottom: 50px;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
background-color: white;
}
.articulos .articulos-container {
width: 100%;
grid-column-start: 2;
grid-column-end: 3;
display: flex;
align-content: center;
flex-flow: column wrap;
}
.articulos .articulos-container .articulos-container_title {
width: 100%;
font-size: 2.5rem;
font-weight: 900;
text-align: center;
letter-spacing: 3px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.274);
}
.articulos .articulos-container .articulos-container_posts {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: auto;
}
.articulos-container_posts .post-articles{
margin-top: 50px;
width: 30%;
height: auto;
}
.articulos-container_posts .post-articles .posts-articles_img {
width: 100%;
}
.articulos-container_posts .post-articles p {
font-size: 2rem;
font-weight: bold;
margin-bottom: 40px;
}
.articulos-container_posts .post-articles a {
border: 1px solid #47cfac;
font-size: 1.6rem;
font-weight: bold;
padding: 10px 20px;
}
/*final del main*/
/*estilos foooter*/
.contactMe {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #e6e9ed;
height: 30vh;
justify-items: center;
}
.contactMe .contact {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 5%;
}
.contactMe .contact .contact-imgContainer {
display: flex;
justify-content: center;
margin-right: 10px;
}
.contactMe .contact img {
height: 100px;
}
.contactMe .contact .contact-textContainer {
margin-left: -70px;
}
.contactMe .contact a {
font-size: 2rem;
font-weight: 900;
border-bottom: 2px solid black;
}
.contactMe .contact p {
font-size: 2rem;
font-weight: 900;
}
.footerC {
display: grid;
font-size: 1.6rem;
grid-template-rows: 1fr 3fr;
background-color: #48cfad;
}
.footerC .footerc-box {
background-color: #22272d;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
Me anime gracias a los demas compañeros a realizar la pagina de un jalon. Asi quedo:
Mira mamá ya puedo hacerlo solo 😃
lo hice todo sin ver el video vamos a ver cuantas correcciones hago
Reto cumplido. Le di mi propio estilo. Al principio lo vi como un error en la parte del post mas importante o ultimo pero me agrado no se que les parece a ustedes.
Terminado
Asi ha quedado mi versión, veré las siguientes clases para ver que puedo mejorar 😃
Resultado del reto:
Recuerda siempre estar SECO, o mejor dicho DRY, DONT REPEAT YOURSELF
Mi reto
Yo lo hice con css grid xD
Pude resolver el desafio, las buenas practicas que aprendi del profesor degranda realmente me han ayudado muchisimo a mejorar mi trabajo en css.
Creo que ha sido la primera vez que consigo cumplir un reto sin complicaciones, sin errores, sabiendo lo que estaba haciendo y sin revisar tanto código anterior o de otros. Cada vez mejores skills. ¡Excelente profesor! Me hizo sentir orgulloso de mi código
Ahi vamos con mi progreso
Aquí mi versión del proyecto!
(Si bien no quedó igual y le faltó estilos al preview del blogpost, pude practicar CSS Grid y estoy satisfecho con el resultado! 😄)
Muy práctico el curso. Recordar que, es un curso para mejorar (html, css), y practicar.
Cuando se dice no repitas tu codigo es no copiar y pegar?
tengo que escribir todo el codigo?
o a que se refieren ?
Espero respuestas gracias… 😃
asi voy
Diagramas de árbol de los elementos HTML
Algo que me ayuda a estilizar los elementos html es construir árboles lógicos de los elementos HTML y así tener una visión panorámica que me permita agregar estilos de afuera hacia adentro.
Estoy intentando llevar este proyecto a mi manera ;_;
RETO CUMPLIDO
.
Mobile desing
Reto cumplido casi quedo loco pero lo logre, ahora a ver las clases para ver como hacer el codigo mas entendible.
y aqui os dejo el link
https://sartheghost.github.io/BLOG-POST/
div*6>h3{titulo de la primera seccion}+article>img+p{titulo del articulo}+p{contenido del parrafo}+a
Mobile version
Desktop Version:
PD: No cuesta nada si prácticas mucho rato, recomiendo los vídeos de Jordan Alexander en Youtube.
Antes de comenzar…
Aquí mi intento Gg 💆♂️
Uno quisiera que todos los cursos los dictara el profesor degranda, se le entiende todo lo que explica, ¡Excelente docente!
Completando el reto de hacerlo por mi cuenta:
Nailed it! ✨💜
<main>
<!-- PRINCIPAL BLOG -->
<section>
<div>
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
<div>
<img src="" alt="">
</div>
</div>
<div>
<h2></h2>
<p></p>
<a href=""></a>
</div>
</section>
<!-- ALL BLOGS -->
<section>
<div>
<h3></h3>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
<article>
<img src="" alt="">
<p></p>
<p></p>
<a href=""></a>
</article>
</div>
</section>
</main>
<footer>
<p></p>
</footer>
</body>
</html>
Hola comunidad!
Aquí mi diseño antes de ver la resolución de Diego.
Saludos!
Quise adelantarme un poco con el diseño y así me quedó:
Challenge Done! everything on my own!
El intento que hice por mi cuenta antes de ver la clase
mobile
tablet
desktop
Terminado
Reto
Estoy llevando este curso aplicando los preprocesadores del curso anterior, realmente es más cómodo y organizado solamente hacer un **include **y tener todo el componente de header, **footer **o lo que tengas modularizado.
Los que usamos VScode tenemos la opcion de escribir:
div>h3+article*6>img+p*2+a
y nos va a generar automaticamente todo el texto del div para no tener que estar copiando las 6 veces.
Reto completo.
Reto completado antes de ver la clase, lo realice según el diseño que decidí implementar.
Buena clase!
Trate de hacer el primer section por mi cuenta Imagen tarea
Practicando con Emmet
div > h3 + article * 6 > img + p * 2 + a
resultado del reto:
gran clase
excelente
Reto Cumplido !
Otro tip, para ponerle el nombre de clase a un <div> de manera rapida es .nombredelaclase + tab
ejem: .container
Resultado:
<div class="container">
</div>
Es la forma rapida para crear <div> con su nombre de clase
Lo logre jaja mucho CSS Grid:
Reto cumplido! 😄
Segunda parte:
Que emocion. 😃
el diseño de este proyecto me recuerda a la de Arduino jeje
a estilizar 🖌
Va quedando super nuestro blog!
Genial
A darle con todo.
porfin me salio algo wiiiiiiiiiii!!!
reto completado
Listo!!
Post principal.
listo el mio
Que hermoso como maqueta en el Html… me imagino que eso se gana con la experiencia…
Intenté hacerla por mi cuenta y este fue el resultado 😃
Excelente clase
Por buenas prácticas no debió meter el botón dentro de una etiqueta semántica de <button></button>?
Excelente clase!
parte 1
parte 2
parte 3
Reto cumplido!!
Poco a poco ya se visualiza la maquetación, sin la necesidad de guía del instructor!! 😃
Esta es mi solución al reto y este mi repositorio.
Reto
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?