Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sección de introducción con menú desplegable con HTML, CSS y JS

@IgnacioEncina

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

@ezexgonzalez

Posted

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 helpful

1

@IgnacioEncina

Posted

@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
David 8,000

@DavidMorgade

Posted

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 en div puedes utilizar mejor la etiqueta section.

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 helpful

1

@IgnacioEncina

Posted

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 GitHub
Discord logo

Join 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