Sección de introducción con menú desplegable con HTML, CSS y JS
Design comparison
Solution retrospective
Hola! he completado mi segundo desafio, primero lo hice con bootstrap en un par de horas, pero preferí hacerlo otra vez pero sin bootstrap lo cual me llevo mucho tiempo, pero creo que logré desarrollarlo lo mas parecido posible y ademas aprendi mucho. ojalas me ayudaran a optimizar el codigo ya que creo que hice muchas cosas desconociendo otras. Saludos comunidad!
Community feedback
- @ezexgonzalezPosted over 2 years ago
Hola Ignacio, muy bueno tu proyecto, lo único que falta es agregar algunos Hovers. Cuando descargas el material en la parte de diseño hay una foto que te muestra como debería cambiar el input/button cuando el mouse se posiciona por encima. Saludos!!
Marked as helpful1@IgnacioEncinaPosted over 2 years ago@ezexgonzalez Hola Ezequiel, muchas gracias por la aclaración, tenia la duda y al ver otros proyectos solo mostraban el submenu al hacer click, de echo me rompi el ceso con js para mostrarlos, hubiera sido mas facil con hovers XD, pero me sirvio para aprender y/o poner en practica lo aprendido alguna vez. Muchas gracias y tendre muy presente tu comentario. Saludos!!
0 - @DavidMorgadePosted over 2 years ago
Buenas Ignacio, primero que todo, enorabuena por finalizar el proyecto!
Como primer consejo, te podría decir que usaras algunas etiquetas un poco más semanticas en vez de usar
divs
por ejemplo, el main en vez de dividirlo endiv
puedes utilizar mejor la etiquetasection
.En el botton
btnLearn
te falto agregar el hover que le da un efecto bastante chulo, podrías hacer algo así:.btnLearn:hover { background-color: white; transition: background-color 0.5s ease; }
Y así te quedaría incluso con una transición chula, también podrías hacer lo mismo con los botones de Login / Register.
Sobre el tema de bootstrap, puedes usarlo perfectamente e ir añadiendo tus propias clases aparte para darle una forma más personal a tu proyecto, para las clases que propias que crees tu mismo te recomiendo la metodología BEM, puedes ver más información de como funciona, Aquí.
Espero que mis consejos te ayuden, cualquier cosa me dices!, un saludo.
Marked as helpful1 - @IgnacioEncinaPosted over 2 years ago
Hola David!! Muchas gracias por tus comentarios!! La verdad es que lo del hover no lo hice por que, claro, en la imagen no se ve eso XD o no le di importancia, pero si lo tendre muy presente para el proximo desafio. y con respecto a los div, en vez de main tenia un section y lo cambie a ultimo momento y no pense en cambiar los div por section's. De verdad muchas gracias por tus comentarios, los tendre muy presente para mejorar las buenas practicas... Saludos!!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord