Introducción
Proyecto Práctico de Frontend Developer con HTML y CSS
Buenas Prácticas en Desarrollo Frontend
Layout y componentes
Maquetación de Proyecto Web "YardZelle" con Diseño UI/UX
Sistemas de Diseño: Uso de Variables CSS y Gestión de Assets
Maquetación responsiva: pantallas de autenticación
Maquetación Responsive de Formulario de Creación de Contraseña
Estilización de Formularios con CSS Grid y Flexbox
Construcción de Pantalla de Confirmación de Email Enviado
Maquetación de Pantalla de Login en HTML y CSS
Maquetación de Formulario para Crear Cuenta en HTML y CSS
Edición de Cuenta: Cambios en Inputs y Botones en Pantalla
Maquetación responsiva: vistas principales
Estructuración HTML para Aplicaciones con Grids y Cards
Estilización de Cartas con CSS y Responsive Design
Creación de Menú Desktop con HTML y CSS Básico
Creación de Menú Responsive en HTML y CSS para Móviles
Maquetación de Pantalla "Mi Orden" en HTML y CSS
Estilos CSS para Pantalla de Orden en HTML
Creación de Pantalla "Mis Órdenes" en HTML y CSS
Estructuración de Navbar con HTML para Desktop y Mobile
Estilos Responsivos para Navbar en HTML y CSS
Maquetación de Detalle de Productos en HTML y CSS
Estructura y Estilo de Pantalla del Carrito de Compras
Próximos pasos
Evaluación y Siguientes Pasos en la Escuela de JavaScript
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 52
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">
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>
\
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!!
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");
}
*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:
.logo {
width: 150px;
margin-bottom: 48px;
justify-self: center;
display: none;
}
Camila Yokoo
<label for="email" class="label">Email</label> <label for="password" class="label">Password</label>*********
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="[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?