-
Materialize sugiere la siguiente estructura para los inputs tipo
checkbox:
<label class=“col s12 m4”>
<input type=“checkbox”>
<span>Política</span>
</label> -
Sirven para dar diseño especial a los botones:
waves-effect waves-light
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
You don't have access to this class
Keep learning! Join and start boosting your career
When creating web forms, clarity and organization are crucial aspects that reinforce the user experience. In this case, we will build sections using div
and h3
for a perfect cohesion between content and visual design.
To add a checkbox section to your form, start by creating a div
container with a specific class, for example, Section
. This approach makes it easier to organize the different parts of the form. Within this div, use an h3
for the section title with a class that facilitates the centering of the text, such as center
.
Once the basic structure is created, add label
and input
checkbox
elements for each desired option:
<div class="section"> <h3 class="center">Are youinterested in receiving news from?</h3> <div class="checkbox-row"> <label class="col full-width med-4"> <input type="checkbox"> <span>Politics</span> </label> <label class="col full-width med-4"> <input type="checkbox"> <span>Economy</span> </label> <label class="col full-width med-4"> <input type="checkbox"> <span>Finance</span> </label> </div> <!-- More options can be added here --></div></div>.
Creating an attractive button is essential for a functional form. To start, insert a new div
for the button section. Then, add a button with a distinctive class to apply CSS styles that highlight its appearance. Integrate visual effects or animations to enhance interaction:
<div class="button-section"> <button class="btn material-effect"> <i class="icon-right">Send</i> </button></button></div>.
Optimize the layout by adjusting the margins and size as needed. For example, if you notice excess space or want to adjust the layout, modify the corresponding CSS properties:
.record-header { height: 400px; /* Adjust height to reduce space */}
Also, make sure that the columns of your form fit correctly to the responsive design by using a column system, for example, with size classes like col full-width med-4.
Finalizing a web project offers a lot of room to implement improvements or customizations. Among the tasks that can help you consolidate your skills, consider:
Linking blog screens: Make sure that the blog, registration and index pages are properly connected for easy navigation.
Include images in titles: Use images in form headers to add visual interest and personalization.
Add more links and create custom views: Fill in additional links in the navigation menu and create unique views that fit your vision for the blog.
Keep a proactive mindset as you work on your form design; every challenge is an opportunity to learn and improve your web development skills - move forward with confidence and enthusiasm!
Contributions 10
Questions 2
Materialize sugiere la siguiente estructura para los inputs tipo
checkbox:
<label class=“col s12 m4”>
<input type=“checkbox”>
<span>Política</span>
</label>
Sirven para dar diseño especial a los botones:
waves-effect waves-light
Reto: 1) Enlazar todas las páginas, 2) Crear las otras páginas 3) En la pantalla de registro había opción de poner imagen.
El desarrollo Front-end se puede agilizar sustancialmente utilizando el framework materialize la cual se podria definir como la herramienta que se guía por las líneas de diseño de Material Design de Google
"Entre las cosas que te ofrece Materialize encuentras todo tipo de interfaces, como colores, transiciones, tipografías, botones, navegadores, cabeceras, base de datos de iconos, elementos de formulario, tarjetas, tooltips, acordeones, menús desplegables, botones flotantes, migas de pan, menús con pestañas, sistemas de paginación, listas, así como un sistema de rejilla y mucho más. Por supuesto, todos los componentes y las utilidades de layout son responsive y a se adaptan a todo tipo de pantallas, grandes y pequeñas. Por todo, este framework de diseño web es un auténtico regalo para el desarrollador."
Tomado de:
https://desarrolloweb.com/articulos/materialize-framework-css.html
Para eliminar el mismo texto en VSCode que se repite varias veces, seleccionas el texto y presionas Control + D las veces necesarias. Esto seleccionará el texto que se repite y luego borras una sola vez.
Hay un fallo en la parte de separar nombre apellidos y correo contraseña en rows distintas, si te das cuenta cuando haces la pantalla del movil hay un padding entre los dos rows todos esto fields tendrian que haber ido al mismo row de esa forma no habría el padding
Quedo muy bien la parte de registro.
Perfecto! Ahora a hacer los retos para terminar el proyecto y de paso practico y continuo con el cierre del curso!
Me hizo falta en el curso la parte del toggler para el menú
Durante la clase se aplicó la clase center-align al button pero este permaneció en la parte izquierda, para lograr centrarlo mi solución fué la siguiente:
<div class="section">
<div class="row">
<div class="col s12">
<div class="center-align">
<button class="btn waves-effect waves-light">Enviar
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
Want to see more contributions, questions and answers from the community?