Introducción
¿Ya tomaste el Curso de Frontend Developer?
Buenas prácticas de CSS: reflexión y advertencias
Layout y componentes
Identifica las pantallas de tu proyecto
Sistema de diseño, assets y variables de CSS
Maquetación responsiva: pantallas de autenticación
Crear nueva contraseña: HTML
Crear nueva contraseña: CSS
Email enviado
Login
Crear y editar mi cuenta
Mi cuenta
Maquetación responsiva: vistas principales
Página de inicio: HTML
Página de inicio: CSS
Menú desktop
Menú mobile
Mi orden: HTML
Mi orden: CSS
Mis órdenes
Navbar: HTML
Navbar: CSS
Detalle de producto
Carrito de compras: HTML
Próximos pasos
Cómo continuar aprendiendo desarrollo frontend
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
El carrito de compras es la sección de la página que le permitirá al usuario ver los productos que agregó porque quiere comprarlos. Como puedes ver en la imagen, es una vista muy similar a sección "mi orden", por lo que utilizaremos el mismo código.
Solo nos falta elaborar nuestra pantalla del carrito para terminar nuestra página. Como se mencionó, es un proceso muy similar a los anteriores y podemos reutilizar el código de "my orders" .
Llegó la hora de maquetar esta sección de la plataforma en HTML. Emplea estas líneas de código como guía para verificar que hayas hecho un gran trabajo y recuerda no memorizarlas, para garantizar que hayas aprendido correctamente.
<aside class="product-detail">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
</div>
<div class="my-order-content">
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>
<button class="primary-button">
Checkout
</button>
</div>
</div>
</aside>
Los estilos de CSS para el carrito son, prácticamente, los mismos que para la sección que le muestra al usuario su orden de compra.
El CSS sugerido es:
.product-detail {
width: 360px;
padding: 24px;
box-sizing: border-box;
position: absolute;
right: 0;
}
.title-container {
display: flex;
}
.title-container img {
transform: rotate(180deg);
margin-right: 14px;
}
.title {
font-size: var(--lg);
font-weight: bold;
}
.order {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
background-color: var(--text-input-field);
margin-bottom: 24px;
border-radius: 8px;
padding: 0 24px;
}
.order p:nth-child(1) {
display: flex;
flex-direction: column;
}
.order p span:nth-child(1) {
font-size: var(--md);
font-weight: bold;
}
.order p:nth-child(2) {
text-align: end;
font-weight: bold;
}
.shopping-cart {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 16px;
margin-bottom: 24px;
align-items: center;
}
.shopping-cart figure {
margin: 0;
}
.shopping-cart figure img {
width: 70px;
height: 70px;
border-radius: 20px;
object-fit: cover;
}
.shopping-cart p:nth-child(2) {
color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3) {
font-size: var(--md);
font-weight: bold;
}
.primary-button {
background-color: var(--hospital-green);
border-radius: 8px;
border: none;
color: var(--white);
width: 100%;
cursor: pointer;
font-size: var(--md);
font-weight: bold;
height: 50px;
}
@media (max-width: 640px) {
.product-detail {
width: 100%;
}
}
Transform que es una propiedad de CSS que nos permite trasladar, rotar, escalar o sesgar elementos.
Se implementan principalmente para desarrollar animaciones. Para rotar la flechita lo empleamos.
¿Te gustaría animar con CSS?
Contribución creada por: Guadalupe Monge Barale con los aportes de Alan Alberto Dromundo Arias
Aportes 152
Preguntas 13
Qué tal comunidad!
Fue un curso retador pero me encantó el enfoque y el proyecto! Estoy segurx que me ayudará a desarrollar mis proyectos con más creatividad e incluso mi portafolio para el primer trabajo como web developer que espero vendrá pronto!
Les comparto los resultados, espero ver los suyos! Ánimo!
Pd. El dark mode lo tengo activado en brave xd no añadí esa funcionalidad aunque se podría 👀👀👀
Buen curso, me hubiera gustado una clase donde juntáramos todas las pantallas.
Así quedó mi carrito de compras:
Así se vería con un overflow-y: scroll 😁 ideal para cuando el cliente tenga muchos elementos en el carrito 🖖
En esta clase me enredé demasiado, traer código, subir, bajar… no sé si fue porque el editor de código tiene demasiado zoom.
.
Lo bueno es que al final lo pude resolver y me quedó genial.
Hola! 👾
Les comparto el resultado de la cursada 📚, fue un lindo desafío tomar el curso pero realizarlo con las técnicas y herramientas que nos brindan en la Escuela de Desarrollo Web
~
~
🃏 Estas son las paginas que desarrollamos: Paginas
💼 Y este el repositorio de todo el curso: Repo
Este es mi proyecto terminado:
https://stivenbautista1998.github.io/marketshop/views/home.html
¡Hello! 🖖 Como pudieron ver la maestra reutiliza las clases que ya tenemos estilizadas en otras páginas del sitio, quiero creer que esto lo hace ella por efectos de practicidad y para no demorarnos un poco más re-haciendo los estilos desde cero en cada página, pero si hacemos esto en un proyecto real, será un desastre escalar el sitio web.
😱 Imagínen que modificamos el botón de una de nuestras páginas, al hacer eso también se estarán afectando todos los otros botones en los que utilizamos esa misma clase.
👌 Ahorita que es un proyecto pequeño no hay ningún problema, solo tengan en cuenta eso al estar trabajando con proyectos más grandes, puede evitarles muchos dolores de cabeza 👍
Lo que yo sugiero es hacer sus clases únicas para cáda página, y claro, podemos basarnos en los estilos que hayamos hecho en otras páginas, simplemente copiando y pegando las propiedades 😁
Estefany debe mejorar como profesora…
Hola les comparto mis resultado del curso:
Pantallas 💻: https://kfiguera.github.io/frontend-practico/
Repositorio 💼: https://github.com/kfiguera/frontend-practico
Wooojuuu! Me gustó mucho!
Puse lo que hice en github, es tal cual fue en el curso
https://github.com/Dann-Herz/yard-sale
disfrute mucho este curso y aprendí muchas cosas
Un curso increíble!.
Muchos critican diciendo cosas como que no son las mejores prácticas. Lo que no entienden es que el curso es para aprender a diseñar en CSS. Me encantó todo lo que aprendí: Flex y Grid layout, positioning, display, box model, media queries, estructurar, responsive design, etc. Aprendí muchísimo.
Me sirvió bastante hacer primero el diseño y después ver cómo lo hace la profesora y así ir comparándome y mejorando.
Estos son mis apuntes de esta clase:
¿QUIÉN LLEGÓ HASTA AQUÍ? SIENTETE ORGULLOSO DE TI.
La verdad es que se aprecia que Estefany sabe lo que hace y tiene mucha agilidad en su trabajo, pero…el curso no me agradó tanto (aunque claro que aprendí) porque practicamente lo que hago es seguirle los pasos a lo que va haciendo, pocas veces explica el porque de las cosas. No me animo a compartir mis pantallas porque son literalmente las mismas pantallas que ella tiene ya que lo que hice fue seguir su código casi al 100%. No se, en mi opinión, este curso pudo haber sido muchísimo mejor.
Así me quedó, lo realice antes de las explicación de la maestra.
Yo durante los primeros 3 minutos de clase:
Eh…?
Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test
xd Ahora sí me perdí desde el inicio
Generar un scroll para las
shopping-card
.
.
.
.
transform: rotate(180deg); /* rota la imagen según los grados indicados */
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<title>Product Detail</title>
<style>
:root {
--black: #000000;
--white: #ffffff;
--very-light-pink: #C7C7C7;
--text-input-field: #F7F7F7;
--hospital-green: #acd0b2;
--primary-button-hover: #5ab865;
--sm: 14px;
--md: 16px;
--lg: 18px;
}
html{
font-size: 62.5%;
}
body {
font-family: 'Quicksand', sans-serif;
margin:0;
padding:0;
box-sizing: border-box;
}
.product-detail{
position: absolute;
right: 0;
width: 360px;
padding-bottom: 24px;
}
.title-container{
display: flex;
}
.title-container img {
transform: rotate(180deg);
margin-right:20px;
}
.title {
font-size: var(--lg);
font-weight: bold;
}
.my-order{
display: grid;
place-items: center;
width:100%;
height:100vh;
}
.my-order-content{
display: grid;
/* grid-template-rows: auto 1fr auto; */
}
.order {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
padding: 0 24px;
margin-bottom: 12px;
background-color: var(--text-input-field);
border-radius: 8px;
}
.order p:nth-child(1) {
display: flex;
flex-direction: column;
}
.order p span:nth-child(1) {
font-size: var(--md);
font-weight: bold;
}
.order p:nth-child(2) {
text-align: end;
font-weight: bold;
font-size: var(--md);
padding-right: 24px;
}
.shopping-cart{
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 16px;
margin-bottom: 24px;
align-items: center;
padding: 0 24px 0 0;
}
.shopping-cart figure {
margin: 0;
}
.shopping-cart figure img {
width: 70px;
height: 70px;
border-radius: 10px;
object-fit: cover;
}
.shopping-cart p:nth-child(2) {
font-size: var(--sm);
color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3){
font-size: var(--md);
font-weight: bold;
}
.primary-button{
height: 40px;
width: 100%;
border: none;
border-radius: 12px;
color: var(--white);
font-size: var(--md);
font-weight: bold;
background-color: var(--hospital-green);
cursor: pointer;
}
@media(max-width: 640px){
.product-detail{
width: 100%;
}
}
</style>
</head>
<body>
<aside class='product-detail'>
<div class="title-container">
<img src="./assets/icons/flechita.svg" alt="Back">
<p class="title">My order</p>
</div>
<div class="my-order-content">
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
</figure>
<p>Bike</p>
<p>$120.00</p>
<img src="./assets/icons/icon_close.png" alt="close">
</div>
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
</figure>
<p>Bike</p>
<p>$120.00</p>
<img src="./assets/icons/icon_close.png" alt="close">
</div>
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
</figure>
<p>Bike</p>
<p>$120.00</p>
<img src="./assets/icons/icon_close.png" alt="close">
</div>
<div class="order">
<p>
<span>
Total
</span>
</p>
<p>$560.00</p>
</div>
<button class='primary-button '>Checkout</button>
</div>
</aside>
</body>
</html>
La verdad me exasperó la forma de dar el curso, va súper rápido, muy improvisado sobre la marcha, lo que hace que uno esté constantemente perdido.
Así quedo
Me ha ido super bie, ya anoté las nuevas propiedas que no conocía y para aplicarlo en los futuros proyectos 😄
Me siento muy emocionado de haber llegado hasta este punto del curso y haber completado todas las vistas y retos de este maravilloso proyecto!
No olviden agregar el media query para que en la vista de mobile el titulo y la flechita desaparezca, ya que es mobile solo s visible en la barra de navegación.
.
@media (max-width: 640px) {
.title-container {
display: none;
}
}
Aprendí bastante, se nota que la profe sabe mucho.
Pudo haber enunciado qué clases eliminar y qué clases permanecen, así no hay que estar pausando el video para ver que fue lo que borró y que dejó.
También cuando usaba la imagen, pudo haber cambiado el tamaño de esta al principio de los videos, así sea solo provisionalmente para entender fácilmente qué está pasando en el HTML.
Comparto algunos de mis resultados (mobile) y el github del proyecto
https://github.com/yessikaplata/yard-sale
El objetivo de este proyecto es practicar HTML y CSS para la elaboración del diseño de referencia, por esta razón los estilos se crearon dentro de las páginas HTML de tal manera que los elementos queraran de acuerdo al diseño. Para un evolutivo de este proyecto se espera tener hojas de estilos siguiendo metodologias CSS como BEM
buena tarde excelente curso aqui dejo mi aporte
![navbar-desktop.PNG]
(https://static.platzi.com/media/user_upload/navbar-desktop-c5fbdfa0-617d-471e-a5a8-3e5611b4c6ac.jpg)
Personalmente le agregue un hover al icono que esta al lado de shopping cart:
.title-container img:hover{
cursor: pointer;
}
Listo!
Así quedó. Intenté hacerlo todo yo sola antes de que ella lo explicara. Casi lo logro pero me trabé cuando no pude agregar padding al contenedor principal. Y ya vi que se resolvió con box-sizing: border-box
Mi aporte! llevadito de la mano, pero lo más importante es obtener el resultado y sorbetodo coger los tips que nos dió la instructura! Gracias!
Hola Equipo,
para ser honesto decidi realizar la actividad sin ver el video, solo basandome en lo que ya habiamos hecho en las clases pasadas y con el conocimiento adquirido. Pues bien, este fue el resultado y me siento satisfecho por todo lo aprendido hasta el momento. Hay que continuar fortaleciendo los conocimientos en html y CSS.
Les comparto mi resultado
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<title>Document</title>
<style>
:root{
--white: #FFFFFF;
--black: #000000;
--very-light-pink: #C7C7C7;
--text-input-field: #F7F7F7;
--hospital-green: #ACD9B2;
--dark: #232830;
--dark-ligth: #5d626a;
--sm: 14px;
--md: 16px;
--lg: 18px;
}
body {
margin: 0;
font-family: 'Quicksand', sans-serif;
}
.my-order{
width: 360px;
height: 100vh;
display: block;
place-items: center;
position: absolute;
right: 0;
}
.my-order-container{
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.my-order-content{
display: flex;
flex-direction: row;
justify-content: space-between;
background: var(--text-input-field);
border-radius: 10px;
align-items: center;
margin-bottom: 24px;
margin-left: 20px;
width: 90%;
}
.my-order-content p:nth-child(1){
display: flex;
flex-direction: column;
margin: 20px;
}
.my-order-content p span:nth-child(1){
font-weight: bold;
margin-bottom: 4px;
font-size: var(--md);
color: var(--black);
}
.my-order-content p span:nth-child(2){
color: var(--very-light-pink);
}
.my-order-content p:nth-child(2){
margin: 20px;
font-weight: bold;
color: var(--dark-ligth);
}
.tittle{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.tittle figure:nth-child(1){
margin-left: 12px;
}
.tittle figure:nth-child(2){
display: none;
}
.tittle p{
font-size: var(--md);
font-weight: bold;
}
.shopping-card{
width: 92%;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.shopping-card figure{
margin: 10px 25px 10px 10px;
}
.shopping-card figure img{
width: 80px;
height: 80px;
border-radius: 20px;
object-fit: cover;
}
.parr-shopping{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.parr-shopping p:nth-child(1){
color: var(--very-light-pink);
width: 50%;
font-size: var(--sm);
}
.parr-shopping p:nth-child(2){
font-size: var(--md);
font-weight: bold;
color: var(--dark-ligth);
}
.parr-shopping img{
width: 15px;
height: 15px;
margin: 17px 10px 10px 10px;
}
.separator{
height: 10vh;
}
.primary-button{
width: 80%;
background: var(--hospital-green);
color: var(--white);
font-weight: bold;
font-size: var(--lg);
height: 70px;
border: none;
border-radius: 8px;
cursor: pointer;
margin: 0px;
}
.checkout{
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 640px){
.my-order{
width: 100%;
}
.tittle{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.tittle p{
display: block;
}
.tittle figure:nth-child(1){
display: none;
}
.tittle figure:nth-child(2){
display: block;
}
}
</style>
</head>
<body>
<div class="my-order">
<div class="my-order-container">
<div class="tittle">
<figure>
<img src="./icons/Vector.png" alt="atras">
</figure>
<figure>
<img src="./icons/icon_menu.svg" alt="menu">
</figure>
<p>
Shoping Cart
</p>
</div>
<div class="shopping-card">
<figure>
<img src="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="">
</figure>
<div class="parr-shopping">
<p>
Lipstick
</p>
<p>
$120,00
</p>
<img src="./icons/icon_close.png" alt="close">
</div>
</div>
<div class="shopping-card">
<figure>
<img src="https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</figure>
<div class="parr-shopping">
<p>
Alexa
</p>
<p>
$120,00
</p>
<img src="./icons/icon_close.png" alt="close">
</div>
</div>
<div class="shopping-card">
<figure>
<img src="https://images.pexels.com/photos/2633986/pexels-photo-2633986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</figure>
<div class="parr-shopping">
<p>
Make Up
</p>
<p>
$100,00
</p>
<img src="./icons/icon_close.png" alt="close">
</div>
</div>
<div class="shopping-card">
<figure>
<img src="https://images.pexels.com/photos/4464481/pexels-photo-4464481.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</figure>
<div class="parr-shopping">
<p>
Notebook
</p>
<p>
$140,00
</p>
<img src="./icons/icon_close.png" alt="close">
</div>
</div>
<div class="separator">
<p> </p>
</div>
<div class="my-order-content">
<p>
<span>Total</span>
</p>
<p>
$480.00
</p>
</div>
<div class="checkout">
<button class="primary-button">
Checkout
</button>
</div>
</div>
</div>
</body>
</html>
Saludos y espero les sirva
Agregue unas cositas.
Aspiro y espero que así se comparta una dirección de github
https://github.com/LuisSan2003/Curso-Practico-de-Frontend-Development-de-Platzi/tree/main/Capturas
me confundio esta clase
Quedo genial!!
Comparto mi carrito de compras:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap"
rel="stylesheet"
/>
<title>Document</title>
<style>
:root {
--sm: 1.6rem;
--md: 1.8rem;
--lg: 2rem;
--very-light-pink: #c7c7c7;
--white: #ffffff;
--text-input-field: #f7f7f7;
--black: #000000;
--hospital-green: #acd9b2;
--dark: #232830;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "Quicksand", sans-serif;
}
.aside-container {
display: grid;
justify-items: center;
position: absolute;
width: 100%;
min-height: 100%;
background: #fff;
}
.shopping-cart {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 16px;
width: inherit;
max-width: 400px;
}
.shopping-cart__title-arrow-container {
display: none;
}
.shopping-cart__title {
font-size: var(--lg);
}
.shopping-cart__product-container {
padding-right: 20px;
overflow-y: auto;
height: 60vh;
}
.shopping-cart__product {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.shopping-cart__product-image-container {
display: flex;
align-items: center;
}
.shopping-cart__product-image {
margin-right: 16px;
border-radius: 20px;
width: 75px;
height: 75px;
object-fit: cover;
}
.shopping-cart__product-name {
margin-right: 4px;
text-wrap: wrap;
font-size: 1.4rem;
font-weight: 400;
color: var(--very-light-pink);
}
.shopping-cart__price-container {
display: flex;
align-items: baseline;
}
.shopping-cart__product-price {
margin-right: 16px;
font-size: var(--sm);
font-weight: bold;
text-wrap: nowrap;
}
.shopping-cart__total-to-pay-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 28px 16px;
border-radius: 10px;
font-size: var(--sm);
font-weight: bold;
color: var(--black);
background-color: var(--text-input-field);
}
.shopping-cart__button-checkout {
border: none;
border-radius: 6px;
font-family: inherit;
font-weight: bold;
font-size: var(--md);
width: 100%;
height: 56px;
color: var(--white);
background-color: var(--hospital-green);
cursor: pointer;
}
@media (min-width: 980px) {
.aside-container {
top: 0;
right: 0;
border-radius: 5px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
width: 400px;
height: auto;
}
.shopping-cart__title-arrow-container {
display: flex;
align-items: baseline;
}
.shopping-cart__arrow-left {
cursor: pointer;
}
.shopping-cart__title {
margin-left: 24px;
}
}
</style>
</head>
<body>
<aside class="aside-container">
<div class="shopping-cart">
<div class="shopping-cart__title-arrow-container">
<figure class="shopping-cart__arrow-left-container">
<img
class="shopping-cart__arrow-left"
src="./assets/icons/arrow-left.svg"
alt="Arrow left"
/>
</figure>
<h2 class="shopping-cart__title">Shopping cart</h2>
</div>
<div class="shopping-cart__product-container">
<div class="shopping-cart__product">
<figure class="shopping-cart__product-image-container">
<img
src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="A bike"
class="shopping-cart__product-image"
/>
<figcaption class="shopping-cart__product-name">Bike</figcaption>
</figure>
<div class="shopping-cart__price-container">
<p class="shopping-cart__product-price">$ 120.00</p>
<figure class="shopping-cart__delete-icon-container">
<img
class="shopping-cart__delete-icon"
src="./assets/icons/icon_close.png"
alt="Delete icon"
/>
</figure>
</div>
</div>
<div class="shopping-cart__product">
<figure class="shopping-cart__product-image-container">
<img
src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="A bike"
class="shopping-cart__product-image"
/>
<figcaption class="shopping-cart__product-name">Bike</figcaption>
</figure>
<div class="shopping-cart__price-container">
<p class="shopping-cart__product-price">$ 120.00</p>
<figure class="shopping-cart__delete-icon-container">
<img
class="shopping-cart__delete-icon"
src="./assets/icons/icon_close.png"
alt="Delete icon"
/>
</figure>
</div>
</div>
<div class="shopping-cart__product">
<figure class="shopping-cart__product-image-container">
<img
src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="A bike"
class="shopping-cart__product-image"
/>
<figcaption class="shopping-cart__product-name">Bike</figcaption>
</figure>
<div class="shopping-cart__price-container">
<p class="shopping-cart__product-price">$ 120.00</p>
<figure class="shopping-cart__delete-icon-container">
<img
class="shopping-cart__delete-icon"
src="./assets/icons/icon_close.png"
alt="Delete icon"
/>
</figure>
</div>
</div>
<div class="shopping-cart__product">
<figure class="shopping-cart__product-image-container">
<img
src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="A bike"
class="shopping-cart__product-image"
/>
<figcaption class="shopping-cart__product-name">Bike</figcaption>
</figure>
<div class="shopping-cart__price-container">
<p class="shopping-cart__product-price">$ 120.00</p>
<figure class="shopping-cart__delete-icon-container">
<img
class="shopping-cart__delete-icon"
src="./assets/icons/icon_close.png"
alt="Delete icon"
/>
</figure>
</div>
</div>
</div>
<div class="shopping-cart__total-value-container">
<div class="shopping-cart__total-to-pay-container">
<p class="shopping-cart__total-text">Total</p>
<p class="shopping-cart__total-value">$ 560.00</p>
</div>
<button class="shopping-cart__button-checkout">Checkout</button>
</div>
</div>
</aside>
</body>
</html>
Además, gracias al comentario de un compañero le agregué la propiedad overflow: auto para que aparezca una barra de scroll si hay más elementos por debajo. Quedaría así:
Mi aporte de la clase:
(
Asi me queo la de esta clase este curso me encanto hojala los curso que siguen sea asi aunque me erredaba mucho jajaj con lo qu explicaba la profe pero me gusto
Lo admito, se ve bien bonix
Mobile:
Nice, me fue bien
tambien pueden agreguar el cursor poiner a la “<” para hacer la pagina mas interactiva:
.title-container img{
transform: rotate(180deg);
cursor: pointer;
margin-right: 14px;
}
un pequeño aporte creo qe hizo falta estilizar la “x” para qe el cursor se viera destacado
se qe es algo facil pero queria compartirlo como lo hice yo no pude sacar el pantallazo con el cursor encima de la x pero uds entenderan la idea
Que buen curso:
Uuuff fue largo el camino. Pensé que no lo iba a lograr. Al final termino gustandome el curso
Pense que no iba a quedar tal cual, pero asi me quedo…
Esto del Frontend me esta gustando cada vez mas!!
.
Me ha gustado mucho el curso, ha sido muy interesante el aprendizaje.
Aqui mi aporte de la ultima clase:
así fue mi resultado 🤩
Fue un curso maravilloso que me despejo varias dudas
Después de interiorizarme mucho en el tema de diseño web, ver otros cursos mas básicos con Diego y con Estefany también, al fin pude terminar este curso, ya que las veces que lo intente se me hacia imposible seguirle el ritmo. Pero esta vez lo disfrute mucho! feliz de seguir aprendiendo, va muy rápido cuando hace estas operaciones, etc
Usa cosas de sass que no ha mencionado para nada, simplemente lo pone ahí y no explica. Lo mismo pasaba cuando se usó la etiquet <figure>…
El curso es muy interesante, el método, cuestionable.
Uff, ha sido un camino largo. Pero por fin terminé. No me arrepiento de nada.
Un Curso muy genial, ayuda a desarrollar muchas habilidades, muchas gracias y a seguir practicando
Y quedo la ultima pantalla!! me gusto el curso! vamos a lo que sigue =D
Lo único que no me funcionó fue el box-sizing: border-box. No se porqué, lo demás todo muy bien.
Lo organize a mi manera pero siguiendo los pasos de la profe, fue impresionante asombroso y frustrante pero lo logramos
Me encantó este curso, soy un ingeniero de sistemas que decidió tomar una línea de trabajo diferente, como todo los temas de agilidad y la gerencia de proyectos…pero decidí robustecer mis habilidades con desarrollo de software FrontEnd y ha sido un éxito, seguro podré ser mucho mas competitivo en el mundo laboral.
Asi quedo mi shopping cart
mi aporte : D
excelente, hubo un par de clases que se me dificultó pero revisé y corregí y todo quedo bien cuco!
Les comparto mi resultado, hice una hoja de estilo para cada clase.
https://github.com/Josetruyolm/Frontend-Mobile.git
Genial el curso y así me quedo el resultado de la ultima clase
Así me quedo:
así es como quedo la ultima pantalla.
MUY CONTENTO !!!
con algunos tropiezos pero muchos aprendizajes
para agregar el icono que aparece en el diseño podemos usar font awesome, agregar esto en el head:
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css” integrity=“sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==” crossorigin=“anonymous” referrerpolicy=“no-referrer” />
y luego en vez de usar una imagen podemos utilizar esto:
<i class=“fas fa-long-arrow-left”></i>
espero les ayude, igual cuando se pase este proyecto a react también se puede importar font awesome.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?