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
Esta vez te enseñaré a maquetar la pantalla que permitirá al usuario editar su cuenta. Como puedes ver, esta vista contiene otros datos relevantes como el email, la contraseña y el nombre de la persona.
Para mostrarle a usuario los datos que ingresó en su registro, usaremos el código de la sección “crear cuenta”. Teniendo presente que la función de esta vista es mostrar información, no obtenerla. Es necesario que modifiquemos lo siguiente al formulario.
<div>
<label for="name" class="label">Name</label>
<p class="value">Camila Yokoo</p>
<label for="email" class="label">Email</label>
<p class="value">camilayokoo@gmail.com</p>
<label for="password" class="label">Password</label>
<p class="value">*********</p>
</div>
.value {
color: var(--very-light-pink);
font-size: var(--md);
margin: 8px 0 32px 0;
}
.secondary-button {
background-color: var(--white);
border-radius: 8px;
border: 1px solid var(--hospital-green);
color: var(--hospital-green);
width: 100%;
cursor: pointer;
font-size: var(--md);
font-weight: bold;
height: 50px;
}
Hemos finalizado el módulo de creación de las pantallas de autenticación. Ahora solo nos falta construir las vistas principales. Recuerda que en el Curso Práctico de React.js uniremos todas las pantallas terminando nuestro frontend.
Si crees que sería bueno darle dinamismo a estas vistas con JavaScript, también lo haremos en el curso Práctico de JavaScript.
Contribución creada por Guadalupe Monge Barale
Aportes 48
Preguntas 14
No se si me adelanto pero si quieren colocar el logo del proyecto en el titulo de la pestaña solo tiene que añadir un link en el <head> con la ruta de la imagen en el caso del proyecto es la
<link rel="shortcut icon" href="./logos/favicon_bota_fora.png.svg" type="img">
Un atajo para escribir una etiqueta junto con una clase o un ID es usar emmet abbreviations. Por ejemplo:
p.value
Presiona la tecla tab:
<p class="value"></p>
HTML
<!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 {
--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;
}
body {
font-family: 'Quicksand', sans-serif;
margin:0;
padding:0
}
.login{
width:100%;
height: 100vh;
display: grid;
place-items: center ;
}
.container{
display: grid;
grid-template-rows: auto 1fr auto;
width: 300px;
}
.title{
font-size: var(--lg);
margin-bottom: 40px;
text-align: start;
}
.form{
display: flex;
flex-direction: column ;
}
.label {
font-size: var(--sm);
font-weight: bold;
margin-bottom: 4px;
}
.value{
color: var(--very-light-pink);
font-size: var(--md);
margin: 8px 0 32px 0;
}
.primary-button{
margin-top: 24px;
height: 40px;
width: 300px;
border: 1px solid var(--hospital-green);
border-radius: 12px;
color: var(--hospital-green);
font-size: var(--md);
font-weight: bold;
background-color: var(--white);
cursor: pointer;
}
.primary-button:hover{
background-color: var(--primary-button-hover);
color: var(--white);
}
@media (max-width: 640px){
.logo{
display: block;
}
.primary-button{
position: absolute;
bottom: 0;
margin-bottom: 24px;
}
}
</style>
</head>
<body>
<div class="login">
<div class="container">
<h1 class="title">
My account
</h1>
<form action="" class="form">
<label for="name" class="label">
Name
</label>
<p class="value">
Camila Yokoo
</p>
<label for="email" class="label">
Email address
</label>
<p class="value" >
[email protected]
</p>
<label for="password" class="label">
Password
</label>
<p class="value">
***********
</p>
<input type='submit' value="Edit" class="primary-button login-button" />
</form>
</div>
</div>
</body>
</html>
Primero, agradecido de todo el conocimiento adquirido hasta el momento.
Segundo, ‘pico paréntesis’ debería pasar a formar parte de la documentación oficial. 😃
Otra pantalla más terminada! Realmente esta siendo muy sencillo ya que una vez tienes una pantalla, la siguiente cambia una que otra cosa.
🌐 Les comparto mi código: https://github.com/iJCode1/frontend_practico_platzi
Hasta aquí mi reporte, he realizado este proyecto con Angular, por si alguien quiera tener una base, lo único que le veo de malo hasta ahora es que realizo un copy-paste de varios estilos en los individuales de cada componente, eso se puede solucionar agregando los estilos en el archivo de styles.sccs y agregar los diferentes en cada hoja de estilos de los componentes.
https://github.com/KevinZav/Frontend-Basic
Prefiero hacerlo con la opción disabled que la etiqueta <p>
\
si teff copia y pega , porque yo no🙈🙈😊
Intenté implementar Javascript para cambiar los datos de la cuenta y este es el resultado.
Aunque ahora me gustaría saber como se guardaría eso en una base de datos 🤔.
Js
const button = document.querySelector(".button__secondary");
console.log(button);
button.addEventListener("click", availableToChangeData);
button.addEventListener("click", changeButtonValue);
function availableToChangeData() {
let dataAccount = document.querySelectorAll(".value");
dataAccount = Array.from(dataAccount);
console.log(dataAccount);
for (i in dataAccount) {
let data = dataAccount[i];
let dataValue = data.textContent;
let loginInput = document.createElement("input");
loginInput.classList.add("login__input");
loginInput.setAttribute(
"style",
"height: 45px;margin-bottom: 20px;padding: 0 12px;border: none;border-radius: 10px;background: var(--text-input-field);color: var(--very-light-pink);font-size: var(--medium);font-weight: 300;outline: none;"
);
if (i === "0") {
loginInput.setAttribute("value", dataValue);
loginInput.setAttribute("type", "text");
loginInput.setAttribute("id", "name");
loginInput.setAttribute("autocomplete", "name");
} else if (i === "1") {
loginInput.setAttribute("value", dataValue);
loginInput.setAttribute("type", "email");
loginInput.setAttribute("id", "email");
loginInput.setAttribute("autocomplete", "email");
} else if (i === "2") {
loginInput.setAttribute("value", dataValue);
loginInput.setAttribute("type", "password");
loginInput.setAttribute("id", "password");
loginInput.setAttribute("autocomplete", "new-password");
}
let dadNode = data.parentNode;
dadNode.replaceChild(loginInput, data);
}
}
function changeButtonValue() {
button.value = "Save";
button.classList.replace("button__secondary", "login__button");
}
Feliz de ver como cada avance que hacemos en el proyecto ayuda a asentar los conocimientos. Cuando empecé pensé que sería mucho más complejo, ahora con cada clase lo veo más simple!!! Esto es adictivo!!
*En esta clase, puedes utilizar la Clase 04 para variar los inputs de los textos.
Con este comando en Windows seleccionas todas las líneas de VScode
ctrl + a
Agregue un pequeño cambio en mi pagina con el atributo disabled en los input para no cambiar a una etiqueta p … Me parece que tambien viene bien mostrar los datos asi y ya cuando se presione el boton de editar habilitarlos
Esto de reutilizar código, me está gustando
Comparto mis resultados:
Gracias profe por la clase…
<!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=Montserrat+Alternates:wght@300&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;
--sm: 14px;
--md: 16px;
--lg: 18px;
}
body {
margin: 0;
font-family: 'Quicksand', sans-serif;
}
.login {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.form-container {
display: grid;
grid-template-rows: auto 1fr auto;
width: 300px;
}
/*.logo {
width: 150px;
margin-bottom: 50px;
justify-self: center;
display: none;
}*/
.title {
font-size: var(--lg);
margin-bottom: 48px;
text-align: start;
color: var(--black);
}
.form {
display: flex;
flex-direction: column;
}
.form div {
display: flex;
flex-direction: column;
}
.label {
font-size: var(--sm);
font-weight: bold;
margin-bottom: 4px;
}
.input {
background-color: var(--withe);
border: none;
/* border-radius: 8px; */
height: 30px;
font-size: var(--md);
padding: 6px;
margin-bottom: 30px;
}
.secundary-button{
background-color: var(--white);
border-radius: 8px;
border: 1px solid var(--hospital-green);
height: 50px;
color: var(--hospital-green);
cursor: pointer;
font-size: var(--md);
font-weight: bold;
}
.login-button {
margin-top: 14px;
margin-bottom: 30px;
}
@media (max-width:640px) {
/*.logo {
display: block;
}*/
.form-container{
height: 100%;
}
.form{
height: 98%;
justify-content: space-between;
}
}
</style>
</head>
<body>
<div class="login">
<div class="form-container">
<h1 class="title">My account</h1>
<form action="/" class="form">
<div>
<label for="name" class="label">Name</label>
<!-- /*<input type="text" id="name" placeholder="Alejandro Parra" class="input input-name">*/ -->
<p class="input">Alejandro Parra</p>
<label for="email" class="label">Email Address</label>
<!-- <input type="text" id="email" placeholder="ejemp[email protected]" class="input input-email"> -->
<p class="input">[email protected]</p>
<label for="password" class="label">Password</label>
<!-- <input type="password" id="password" placeholder="***************" class="input input-password"> -->
<p class="input">**********</p>
</div>
<input type="submit" value="Edit" class="secundary-button">
</form>
</div>
</div>
</body>
</html>
Excelente profesora
Yo en lugar de poner parrafos deje los input con el atributo booleando “disabled” y le agregue la clase disabled
<input disabled type="text" id="name" class="input disabled" placeholder="Camila Yokoo">
Luego en CSS especifique que los elementos que tengan ambas clases “input” y “disabled” el fondo fuera de color blanco.
.input.disabled{
background-color: var(--white);
}
Lo hice antes de ver la clase, el resultado es el mismo, hay algún problema con hacerlo de este modo?
Que bien, me entusiasma mucho ver como se reestructura todo esto en el curso de react 🙈
Comparto los apuntes que he tomado hasta ahora.
Que bueno es reutilizar el código para varías páginas, ya veo un poco el sentido de componentes de los frameworks.
#Básicamente ! Genial =D
respecto a la regla del margin pueden usar como dijo la profe, tanto específicamente a donde los van a asignar. Bottom, left, right, top, o con el general e el sentido de las manecillas del reloj, todo dependerá de como lo trabaja cada uno.
Para agregar el favicon se puede agregar lo siguiente dentro del head
<link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
Esta excelente el tip de las manecillas del reloj para dar tamaño al margin, para tener muy en cuenta
Super todo, me gusta como se hace de rapido cada pantalla solo es cambiar algunas cositas pero porque tiene una barra de navegacion y nosotros aun no :c
Cambien los estilos de los colores, ya que no se ven!!
"Margin Top and Bottom en la etiqueta §"
Para los que resulte raro/extraño que las etiquetas “p” tengan un margen predeterminado, simplemente se debe al motor del navegador. Estos agregan estilos predeterminados y cada navegador es distinto.
Chrome webkit: agrega un margin top y bottom de 1 em
Firefox Gecko: agrega un margin bottom de 1em
Para estos casos (Se verá en los futuros cursos) se deberá resetear los estilos. Un ejemplo muy básico seria en la etiqueta “Body” poner:
margin: 0px;
padding:0px;
https://stackoverflow.com/questions/20850594/what-is-the-default-margin-value-of-p-tag
https://meyerweb.com/eric/tools/css/reset/
Les recomiendo a este youtuber:
https://www.youtube.com/watch?v=Foieq2jTajE&ab_channel=EduardoFierro
Puedes cambiar los estilos cuando el mouse está encima de de los párrafos y el secundary boton con estos estilos:
.secondary-button:hover
{
border: none;
width: 100%;
height: 60px;
font-weight: bold;
cursor: pointer;
border-radius: 12px;
background-color: var(--hospital-green);
font-size: var(--medium);
color: var(--white);
margin-bottom: 32px;
}
.value:hover
{
background-color: gray;
color: var(--text-input-field);
}
Y si al .value original le agregas esta línea te código te queda mucho mejor:
transition: 0.5s all;
Mi resultado desktop:
Resultado mobile:
<!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;
--sm: 14px;
--md: 16px;
--lg: 18px;
}
body{
margin: 0;
}
.login{
width:100%;
height:100vh;
display: grid;
place-items: center;
}
.form-container{
display:grid;
grid-template-rows:auto 1fr
auto;
width:300;
}
.logo{
width: 150px;
margin-bottom: 48px;
justify-self: center;
}
.title{
font-size:var(--lg);
margin-bottom: 36px;
text-align: start;
}
.subtitle{
color:var(--very-light-pink);
font-size:var(--md);
font-weight: 300;
margin-top: 0;
margin-bottom:32px;
text-align: center;
}
.form{
display:flex;
flex-direction: column;
}
.form div {
display:flex;
flex-direction: column;
}
.label{
font-size: var(--sm);
font-weight: bold;
margin-bottom: 4px;
}
.value{
color: var(--very-light-pink);
font-size: var(--md);
margin: 8px 0 32px 0;
}
.secondary-button{
background-color: var(--white);
border-radius: 8px;
border: 1px solid var(--hospital-green);
color:var(--hospital-green);
width: 100%;
cursor: pointer;
font-size: var(--md);
font-weight: bold;
height: 50px;
}
.login-button{
margin-top: 14px;
margin-bottom: 30px;
}
@media(max-width:640px){
.form-container{
height: 100%;
}
.form{
height: 100%;
justify-content: space-between;
}
}
</style>
</head>
<body>
<div class="login">
<div class="form-container">
<h1 class="title" >My account</h1>
<form action="/" class="form">
<div>
<label for="name" class="label">Name</label>
<p class="value">Camila Yokko</p>
<label for="email" class="label">Email</label>
<p class="value">[email protected]</p>
<label for="password" class="label">Password</label>
<p class="value">********</p>
</div>
<input type="submit" value="Edit" class="secondary-button login-button">
</form>
</div>
</div>
</body>
</html>
Dejo mi código 😄
<!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">
<meta name="description" content="This is store of whatever">
<meta name="robots" content="index, follow">
<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;400;500;600;700&family=Roboto:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css" type="text/css">
<link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
<title>Yard Sale</title>
<style>
.myaccount {
display: grid;
place-items: flex-start center;
width: 100%;
height: 100vh;
}
.myaccount__container {
width: 100%;
max-width: 42.5rem;
height: 100%;
padding: 2.4rem;
display: grid;
grid-template-rows: 10% 90%;
}
.myaccount__title {
justify-self: flex-start;
font-size: var(--lg);
}
.form {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.form_text-inputs{
display: flex;
flex-direction: column;
}
.myaccount__label {
margin-bottom: 0.4rem;
margin-top: .4rem;
font-size: var(--sm);
font-weight: bold;
}
.myaccount__text {
margin-top: .4rem;
margin-bottom: 4rem;
font-size: var(--sm);
color: var(--very-light-pink);
font-weight: bold;
}
.myaccount__button--secondary{
align-self: flex-end;
width: 100%;
height: 5rem;
padding: 1.6rem;
border: solid .1rem var(--hospital-green);
border-radius: 0.8rem;
margin-bottom: 1.2rem;
margin-top: 2rem;
font-weight: bold;
background-color: var(--white);
color: var(--hospital-green);
font-size: var(--md);
cursor: pointer;
}
.button--primary:hover {
background-color: #73bf7d;
}
.button--primary:active {
background-color: #4da859;
}
</style>
</head>
<body>
<section class="myaccount">
<div class="myaccount__container">
<h1 class="myaccount__title">My account</h1>
<div action="/" class="form">
<div class="form_text-inputs">
<p class="myaccount__label">Name</p>
<p class="myaccount__name myaccount__text">Someone</p>
<p class="myaccount__label">Email</p>
<p class="myaccount__email myaccount__text">[email protected]</p>
<p class="myaccount__label">Password</p>
<p class="myaccount__password myaccount__text">********</p>
</div>
<input type="submit" value="Edit" class="myaccount__button--secondary">
</div>
</div>
</section>
</body>
</html>
<!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;
–dark: #232830;
–very-light-pink: #c7c7c7;
–text-input-field: #f7f7f7;
–hospital-green: #acd9b2;
–sm: 14px;
–md: 16px;
–lg: 18px;
}
body {
font-family: "font-family: 'Quicksand', sans-serif;";
}
body {
margin: 0;
}
.login {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.container {
display: grid;
grid-template-rows: auto 1fr
auto;
width: 300px;
}
.title {
font-size: var(--lg) ;
margin-bottom: 45px;
text-align: start;
}
.form {
display: flex;
flex-direction: column;
}
.label {
font-size: var(--sm);
font-weight: bold;
margin-bottom: 4px;
}
.value {
color: var(--very-light-pink);
font-size: var(--md);
margin: 8px 0 32px 0;
}
.secundary-buttom {
background-color: var(--white);
border-radius: 8px;
border: 1px solid var(--hospital-green);
color: var(--hospital-green);
width: 100%;
cursor: pointer;
font-size: var(--md);
font-weight: bold;
height: 50px;
}
.login-buttom {
margin-top: 14px;
margin-bottom: 30px;
}
@media (max-width: 640px) {
.form-container{
height: 100%;}
.form {
height: 100%;
justify-content: space-between;
}
}
</style>
</head>
<body>
<div class=“login”>
<div class=“container”>
<h1 class=“title”>My account</h1>
<form action="/" class="form">
<div>
<label for="name" class="label">Name</label>
<p class="value">Camilo Yen </p>
<label for="email" class="label">Email address</label>
<p class="value">[email protected] </p>
<label for="password" class="label">Password</label>
<p class="value">********* </p>
</div>
<input type="submit"value="Edit"
class="secundary-buttom login-buttom">
</form>
</div>
</div>
</body>
</html>
Resultado:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.