Totalmente valido copiar, el curso es de Materize pero para las prácticas personales pueden usar PUG del curso de preprocesadores y no repetir.
Saludos!
Introducción a Materialize
Frameworks ¿Qué son?
¿Qué es Material Design y Materialize?
La lógica detrás del Grid system
Documentación y características de Materialize
Componentes de Materialize
Desarrollo del sitio
Presentación del proyecto
Instalación del proyecto
Elaboración del header
Estilos al header
Construcción del main homepage
Finalizando cards en el homepage
Terminando el index.html y estilos en el mainpage
Desarrollo de la página de artículo
Desarrollo del formulario de registro
Desarrollo de checkboxes en el formulario
Despliege del proyecto
Despliegue del proyecto en Firebase
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Desarrollo del formulario de registro
14/17Recursos
Aportes 14
Preguntas 0
Ordenar por:
Creo que al profe se le paso corregir el type=text del input de contraseña a type=password para que al escribir sobre el campo aparezcan los circulitos, pero fue una excelente clase!
Me gusta como esta quedando el formulario
Don’t repeat yourself: Es aconsejable tener dividido el codigo en componentes para no repetir el mismo codigo en las demas paginas. Por este momento, es válido porque solo se esta usando HTML y CSS
-
Aplicar hide al section de la imagen principal para que no aparezca en nuestro
registro.html -
class
containerdelimitara la zona del contenido y se ajustara al tamaño delnav -
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">
<title>Aviation News</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav class="container">
<a href="#" class="brand-logo valign-wrapper"><!-- valing-wrapper centra verticalemnte el contenido -->
<img src="assets/img/Logo.jpg" class="responsive-img left z-depth-2" alt="Logo"> <!-- make responsive images -->
</a>
<ul class="right valign-wrapper">
<li><a href="">About us</a></li>
<li><a href="">Contact us</a></li>
<li><a class="btn" href="registro.html">Register</a></li>
</ul>
</nav>
<!-- Promotional image -->
<section class="header-main-pic z-depth-2 hide">
</section>
<!-- TITLE -->
<section class="container">
<div class="row registro-titulo">
<div class="col s12">
<h1 class="center-align">Register in Aviation News</h1>
</div>
</div>
</section>
</header>
<!-- END OF HEADER -->
<!-- MAIN -->
<main class="container">
<div class="row">
<div class="col s12">
<div class="card-panel">
<form action="">
<div class="row section">
<div class="input-field col s12 m6">
<input type="text" id="first-name" class="activate">
<label for="first-name">Name</label>
</div>
<div class="input-field col s12 m6">
<input type="text" id="last-name" class="activate">
<label for="last-name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6">
<input type="text" id="email" class="activate">
<label for="email">Email</label>
</div>
<div class="input-field col s12 m6">
<input type="password" id="password" class="activate">
<label for="password">Password</label>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
<!-- END OF MAIN -->
<footer class="page-footer"></footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
-
Clase que da estilo a una caja de un formulario
card-panel -
Clase que da estilo a una caja de un input
input-field -
Alinea al centro un texto
center-align
Me encanto el formulario
Estuvo bacán este formulario limpio y agradable
Don’t repeat your self
¿¿Para qué es exactamente la clase “Section”??
Va quedando muy cool ♥
Otro pequeño detalle no olviden cambiar el link del reader de registro en el resto de las páginas.
Don’t repeat yourself!
En la parte del password, deben cambiar el TYPE para que lo que se escriba sea cifrado
<input id="password" type="password" class="validate">
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.