Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Crear nueva contraseña: HTML

5/22
Recursos

En este curso decidimos NO crear archivos con extensión .css para guardar nuestros estilos, sino guardarlos en los mismos archivos .html (dentro de la etiqueta <style>).

Si lo prefieres, puedes hacer esta división con tus propios archivos .css. De hecho, es la forma más recomendada de trabajar profesionalmente con HTML y CSS.

Pero con nuestra profesora Estefanny Aguilar lo haremos sin esta separación para facilitar la migración a componentes en el Curso Práctico de React.js (que muy pronto tomarás si continúas con la Escuela de JavaScript).

¡Mucha suerte durante tu maquetación!

Aportes 53

Preguntas 21

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Una shortcut para escribir una etiqueta y su clase en VisualStudio Code es por ejemplo: div.principal (donde “div” es el nombre de la etiqueta y “principal” el de la clase). Das tabulador y listo.

Pueden instalar la extensión de Live Server para que no tengan que recargar la página cada que hagan cambios, y a mi se me hace más fácil abrir el proyecto en el navegador. 😃

Comparto este link de los comandos y atajos de html y otros lenguajes en VSC
Emmet en acción

Sería bueno poner el atributo “required” en cada uno de los inputs para que el usuario no se vaya sin poner nada en la contraseña

Atributos de Label

Label: Es una etiqueta para un elemento en una interfaz de usuario, en este caso es utilizado para indicar el funcionamiento de la casilla password “input type=password class=input-password”

<label for="password" class="label">Password</label>
<input type="password" id="password" placeholder="✱✱✱✱" class="input-password">

For
Ademas de ayudarnos a nivel semantico con el posicionamiento en google, nos ayuda a redirigir el puntero hacia el input relacionando estas 2 etiquetas.
Ejemplo:

Si ponemos Name en el for de label y Name en el id de input, el navegador entiende la relacion entre ellos 2 y al momento de hacer clip en el label directamente te lleva al input.

<label for="Name">Click me</label>
<input type="text" id="Name" name="Name"/>

Referencia
Class
Es un identificador que nos ayuda a acceder a elementos especificos dentro de un HTML
Ejemplo:

Podemos nombrar a un button como Button1 para luego ubicarlo facilmente

<input type="button" class="Button1">

Referencia

¿porque utilizar <div> si es mala practica? Cuando podria utilizarse <main> por ejemplo, no me agrada que se contradiga y en un ejemplo basico del curso, porque no es necesario

Por mas que lo he intentado nomás no puedo aprender a usar bien la terminal 😵‍💫

Les recomiendo que aprendan como usar las abreviación emmet, son muy útiles y rápidas al momento de crear estructuras complejas, por ejemplo la siguiente abreviatura:

div.login>div.form-container>img+h1+p+form>(label+input#password.input.input-password)*2

Da como resultado esta estructura:

<div class="login">
        <div class="form-container">
            <img src="" alt="">
            <h1></h1>
            <p></p>
            <form action="">
                <label for=""></label>
                <input type="text" id="password" class="input input-password">
                <label for=""></label>
                <input type="text" id="password" class="input input-password">
            </form>
        </div>
    </div>

Al principio es algo fastidioso pero despues de que te acostumbras escribes cualquier estructura html mucho más rápido, aquí les dejo un enlace a la documentación:

https://docs.emmet.io/abbreviations/syntax/

Me encanta este curso, de verdad que me siento super profesional y voy avanando poco a poco. Gracias, Estefany.

Tip pro

Mejora tu productividad con abreviaturas emmet, escribe menos, obtén el mismo resultado

Emmet usa la sintaxis de los selectores de CSS para hacer tu vida más fácil cuando debas tratar con HTML

.container>img.logo+h1.title{Create a new password}+p.subtitle{Enter a new password for youraccount}+form.form>label.label{Password}+input:password+label.label{Re-enter password}+input:password^button:submit{Confirm password

Copia el texto de arriba, cierra la ultima llave con un _}_y presiona tab, el editor te debería autogenerar todo este maquetado:

<div class="container">
	<img src="" alt="" class="logo">
	<h1 class="title">Create a new password</h1>
	<p class="subtitle">Enter a new password for youraccount</p>
	<form action="" class="form">
		<label for="" class="label">Password</label>
		<input type="password" name="" id="">
		<label for="" class="label">Re-enter password</label>
		<input type="password" name="" id="">
	</form>
	<button type="submit">Confirm password</button>
</div>

Espero te sirva

CSS DE LA CLASE.

: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: 48px;
      justify-self: center;
      display: none;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 12px;
      text-align: center;
    }
    .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;
    }
    .label {
      font-size: var(--sm);
      font-weight: bold;
      margin-bottom: 4px;
    }
    .input {
      background-color: var(--text-input-field);
      border: none;
      border-radius: 8px;
      height: 30px;
      font-size: var(--md);
      padding: 6px;
      margin-bottom: 12px;
    }
    .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;
    }
    .login-button {
      margin-top: 14px;
      margin-bottom: 30px;
    }
    @media (max-width: 640px) {
      .logo {
        display: block;
      }
    }

Aqui les dejo como lo hice con HTML semantico, no quedo parecido al de la profe, ya que lo hice siguiendo las enseñanzas del Curso definitivo de HTML y CSS, pero por si les interesa 😉.

<!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">
    <title>Create a new Password</title>
    <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:[email protected];400;500;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
        <!-- font-family: 'Quicksand', sans-serif; -->
        <!-- font-family: 'Roboto', sans-serif; -->
    <link rel="stylesheet" href="./css/create_new_password/phone.css">
</head>
<body class="container">
    <main class="main">
        <section class="main__pass-cont">
            <img src="./src/svg/logo_yard_sale.svg" alt="">
            <h1>Create a new password</h1>
            <h2>Enter a new password for your acount</h2>
            <section class="pass__form-cont">
                <form action="" class="pass__form">
                    <label for="password" class="form__pswd">
                        <span>Password</span>
                        <input type="text" id="password" name="password" placeholder="*********">
                    </label>
                    <label for="re-password">
                        <span>Re-enter password</span>
                        <input type="text" id="re-password" name="re-password" placeholder="*********">
                    </label>
                    <input type="submit">
                </form>
            </section>
        </section>
    </main>
</body>
</html>

Sobre nuestro querido visual studio code:
si queremos escribir

<div class="login">

Basta con escribir div.login y presionamos tab (tabulador).

Si deseamos escribir

<div id="login">

Basta con escribir div#login
Y finalmente podemos ir combinando, por ejemplo:

<input type="password" class="input input-passw" id="password">

Lo hacemos escrbiendo: div.input.input-passw#password

Creo que no estas aplicando las buenas practicas que aprendimos en cursos pasados, principalmente el HTML semántico, pero bueno lo aplicare en el mio

A continuación, os dejo el código HTML que he escrito yo para esta clase. No es del todo similar al que dejó la profe, simplemente es “como yo he aprendido a hacerlo”, utilizando BEM y dando la estructura que yo veía oportuna. Si tenéis alguna duda, preguntad, os ayudaré en todo lo que pueda, compañ[email protected]!

<!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">
  <title>Create a new Password</title>
  <!-- Forms CSS -->
  <link rel="stylesheet" href="assets/css/forms.css">


</head>

<body>
  <main class="c-main">

    <div class="c-create-password">
      <div class="o-container">

        <h1 class="c-main__title">Create a new Password</h1>
        <p class="c-main__subtitle">Enter a new password for your account</p>

        <div class="c-form__container">
          <form action="" class="c-form">
            
            <div class="c-form__control">
              <label for="password" class="c-form__input">Password</label>
              <input class="c-form__input" placeholder="*********" type="password" name="password" id="password">
            </div>
            <div class="c-form__control">
              <label for="new-password" class="c-form__input">Re-enter password</label>
              <input class="c-form__input" placeholder="*********" type="password" name="new-password" id="new-password">
            </div>
            
            <input type="submit" value="Confirm" class="c-btn c-btn--primary">

          </form>
        </div>

      </div>
    </div>

  </main>
</body>

</html>

Recomiendo la extension Live Server de VS Code para que no tengan que actualizar el navegador para ver los cambios, si no este se encargue de hacerlo de manera automatica

Mi trabajo 😃

si tienen que desplazar de izq a der y vs para ver el código

alt + z. ajusta el código al viewport

Para quien se le dificulte entender el código o lo que la profe Estefany está haciendo, le recomiendo pasarse por el curso definitivo de html y css que pertenece a la escuela de desarrollo web, es excelente yo lo he hecho antes de venir aquí y me ha ayudado muchísimo.

Esto son partes de mi apuntes para considerar hacer la pagina de New Password:
Deben considerar que crearan en la estructura un DIV principal de Login, luego un div para el container, luego la sección del logo con los primeros parrafos y por ultimo la seccion del formulario que tendrá el label, input, label, input e input para el boton.

Para los laberl, considerar poner class=label y luego colocar el nombre visual.

Por otro lado, Display: Flex; sirve para ubicarse uno al lado del otro y poder reestablecerlo con flex-direction: column;

@media sirve para hacer responsivo.

Display: block; para bloquear la visualización de esa clase o elemento seleccionado.

Aqui en la parte señalada, no podremos poner mas bien “Repeat password” en vez de solo “password”

para que sirve al etiqueta label:
El Elemento HTML <label> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label. Tal control es llamado “el control etiquetado” del elemento label.

para que sirve la etiqueta form:
El elemento HTML form ( <form> ) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.

Dejo un fragmento de un aporte del curso pasado que me parece importante remarcar, ya que he visto muchos comentarios negativos por el uso de <div>

¿Eso significa que nunca debería usar <div>? ¡No! Por supuesto que puedes usar <div>, esta etiqueta es muy útil cuando queremos hacer estilos con CSS, por ejemplo. Cuando decimos “no uses <div>” nos referimos a que no deberíamos usarlo para organizar el contenido de tu página, porque simplemente Google ignora cualquier <div> mientras lee tu página. Si tú pones un menú de navegación usando <div> Google lo va a ignorar, pero si tú pones un menú de navegación usando <nav> Google sabrá que tu página web tiene un menú de navegación (y te tomará en cuenta para posicionarte 7u7).
.
En cambio, si tú quieres mostrar un contenido dividido en 2 partes (izquierda y derecha) y usas <div> para hacerlo, entonces está súper bien, porque a Google no le importa cómo muestres (visualmente) tu contenido, así que en estos casos, <div> nos ayuda mucho cuando queremos hacer cosas visuales con nuestra página.

Desde VSC si deseamos usar las abreviaciones de emmet para escribir un div que lleve una clase o un ID, podemos escribir directamente esto:

.fondo  // ó 
#fondo

para obtener:

<div class="fondo"></div>
//ó
<div id="fondo"></div>

para poder ver en tiempo real los cambios que hacemos en un archivo HTML, podemos instalar en VSCode la extensión LiveServer:

Para los que vengan de la clase anterior del curso teórico de frontend, una manera muy buena de prácticar y ayudar en los conocimientos en cuánto a dominio de sectores es utilizando los shortcuts.

div.login>div.form-container>img[src=logo][alt=logo]+h1.title+p.subtitle+form.form

Al darle tab, como se vio en el curso anterior . es para asignar una clase, es para identificar a los hijos que provienen de un padre, + es el selector adyacente el que le sigue a una etiqueta.

Traté de probar con ~ que es el general de hermanos pero no funcionó

Pero notarán que generará esto en HTML lo cual es más rápido escribir html en vs de esa forma y una buena forma de agarrar el hábito e interiorizar conceptos.

div.login>div.form-container>img[src=logo][alt=logo]+h1.title+p.subtitle+form.form + tabulador

    <div class="login">
        <div class="form-container">
            <img src="logo" alt="logo">
            <h1 class="title"></h1>
            <p class="subtitle"></p>
            <form action="" class="form"></form>
        </div>
    </div>

Para quienes estan trabajando con WSL2 Ubuntu, si quieren visualizar su avance en el archivo html, pueden hacer click derecho con el ratón y dar click en Open with live server
o con las teclas
Alt + L
Alt + O

Cualquiera de las dos os servirá.

Esta facil el proyecto en cuanto a maquetacion, sin embargo seria buena practica usar Grid y Flexbox para practicar.
PD: Casi nunca uso Gris. (Debo comenzar a usarlo y practicar)

En algunas ocasiones es necesario utilizar la etiqueta <div>⁣, ya que en mi experiencia me ayuda mucho a poder manipular elementos, los cuales me ayuda en ciertos casos, por ejemplo si hablamos de elementos hijos y estos elementos tienen dentro etiquetas semánticas como un <h1>, <p>, etc. Más que nada en mi caso simplemente me ayuda a poder tener un orden y así poder manipular el contenido y poder lograr hacer que se vea más estética la estructura de mi diseño o página.

Versión 1.0 XD

Es interesante ver como cada persona tiene su forma distinta de maquetar, en mi caso fue parecido pero diferente a la vez como lo propuso estefany, ya que yo lo estructuro en mi mente para poder trabajar con Grid Layout que me facilita mucho la vida

El código de 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">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="login"> 
        <div class="form-container"> 
            <img src="" alt="logo" class="logo">
 
            <h1 class="title">Create a new password</h1>
            <p class="subtitle">Enter a new password for you account</p>

            <form action="/" class="form">
                <label for="password" class="label">Password</label>
                <input type="password" id="password" placeholder="*********" class="input input-password">

                <label for="new-password" class="label">Password</label>
                <input type="password" id="new-password" placeholder="*********" class="input input-password">

                <input type="submit" value="Confirm" class="primary-button login-button">
            </form>
        </div>
    </div>
</body>
</html>
¿Porqué utiliza “clase1.html” como nombre de archivo en vez de utilizar un nombre descriptivo como sería en el mundo real, tal como “login-page.html” o inicio-de-sesion.html”? “Que alguien me explique”🤷🏻‍♂️

Usando la guia

pueden usar ! que es la abreviación de emmet en vs code y crea la estructura de html basica completa.

Me encanta el curso. Hasta el momento la mejor profe por lejos.

Me emocionó mucho esta clase, esto de la estructuración es talón de aquiles para mí pero ahí vamos integrandolo

No se usará BEM en el proyecto, digo por que hay dos clases llamadas: primary-button y login-button.
En BEM supongo que serían button–primary y button–login.
button es el elemento y login y primary el modificador.
Supongo

Muy buena clase estoy entendiedo mas la estructura del html . Aun no tomo el curso definitivo.

Recuerden que siempre pueden consultar el código del ejercicio dentro del perfil de Github de JuanDC por si tienen alguna duda o no saben cómo realizar el ejercicio en cuestión.

https://github.com/platzi/curso-frontend-developer-practico/blob/main/clase1.html

Si aprenden emmet se ahorran el trabajo de tener que nomber Clases/ID’s/Atributos con solamente colocar su equivalente en CSS al lado del nombre de la etiqueta.

si lo que necesitas es crear varios div con la misma clase lo puedes hacer con div.rojo*4 (te crea 4 div con la clase rojo)

Para no estar refrescando a cada rato la pagina pueden instalar la extensión Live Server en el VSC

😁

HTML es de suma importancia, tanto así que si no lo estructuramos de manera correcta, será un poco tedioso poder posicionar los elementos al momento de ir al CSS.

Para escribir la estructura general de html5 solo tememos que escribir ! y tabular

Good class. We already have the structure. 👨🏻‍💻

un atajo para generar la estructura de html5 en visual studio code es: escribir ! + tabulador y listo, se genera automáticamente

Dentro de un formulario (form) un input de tipo submit hace la función de botón

Comandos para clonar el proyecto con Git

git init  (para inicializar el proyecto) 
git clone git@github.com:platzi/curso-frontend-developer-practico.git 

Podrian utilizar Live Server para que cuando se actualice el html, tambien se haga en el navegador. Dejo la extension para vsCode:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer