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
Aportes 116
Preguntas 11
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 + ↓
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
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! 😄
Les comparto mi resultado
Mobile
PC
Tablet
Reto cumplido
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
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:[email protected];700&family=Roboto:[email protected];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:[email protected];700&family=Roboto:[email protected];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:[email protected];700&family=Roboto:[email protected];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:[email protected];700&family=Roboto:[email protected];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
COmparto mi resultado en la primera parte del blogs menu
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.
Cómo quedó mi intento 🙂
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
Reto completado
Excelente proceso ahí vamos 👍 tenía bastante que no usaba html y css y este curso me sirve para repasar ambos.
Excelente ya tenemos la estructura básica para nuestra página web blogs.
Don’t repeat yourself: ¿Como podemos realizar para no repetir el código del header?, recuerdo que en asp.net hay algo que se llama master page, no se si se pueda hacer algo similar.
Sigo sin convencerme de este curso practico, mucho html innecesario, comentarios sin sentido, el profesor le pone onda, pero no parece tener claro que hacer o no pensó bien la solución de antemano. Estoy hablando faltando varias clases más, espero encontrarme algo mejor en futuras clases.
Excelente clase, continuemos! 😄
div>h3+article.post-container*6>img+p*2+aBuena clase
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.