I thoroughly enjoyed every moment of working on this project! Applying the CSS flex display property effectively was great. I’m always eager to improve, so if you have any suggestions, I’d love to hear them!
Hola me gusto mucho como implementaste tu proyecto, tengo algunas sugerias que podrian ayudarte a mejorar e seguido las rutas de aprendizaje aqui en Frontend Mentor y te dan algunas pautas como utilizar rem en vez de px exite una practica para facilitar la conversion de rem a px lo que yo hago es poner. html { font-size: 62.5%; } y un ejemplo que quieras ponerle 16px de font size a un parrafo lo puedes poner asi: p { font-size: 1.6rem; } si te das cuenta 1 rem equivale a 10 px y eso hace muy facil la conversion, saludos espero que te ayude.
Buenos días me encanto tu desarrollo, un tip que tal vez ya lo sepas pero igual no esta de mas mencionarlo podrias hacer los input de forma dinamica con JavaScript. saludos!!!
Me gusto mucho tu desarrollo, auque podrias mejorarlo poniendo un slider en mobile y revisar un poco el diseño ya que en 320px hay algunos elementos que se ven extraños y para tener un poco mas de acessibilidad podras usar mas elementos buttons y menos divs
Podrias cambiar el diseño también cuando este en Focus el elemento asi el diseño se vería mas acorde al diseño en vez de dejar los elementos con el focus predeterminado al igual te falto agregar un elemento a para los titulos de las tarjeta.
Podrias mejorar el diseño en dispositivos pequeños, ya que al ponerle en 320px y darle click sin llenar nada el desarrollo colapsa por que no se ve por completo el formulario, saludos! lo que yo hago es poner el height: 100% en los contenedores y no dar height ni width a mi card, por que con los padding y margin tu los puedes ir controlando.
you could use HTML semantico para hacer el accordion, the tag
<details> <summary> here write the question and image </summary> here write the answer </details> i hope you enjoy, grettings!!!you could use HTML semantic for don´t use div, this help in the accessibility, also use in :root { font-size: 62.5%; } for you could use 1rem = 10px and this makes it easier the conversion. greetings!!!
I managed to complete the task completely on my own in about 10 hours.
What challenges did you encounter, and how did you overcome them?The variable naming and the function naming in the js file need a lot of improvement. The functions I defined maybe are too big in scope. I should have broken them down in more meaningful pieces. I don't know if the overall logic of the js file is good or there is a big space for improvement. With this challenge I understood the repay of writing mantenable css. To change the theme I had to redefine a big part of the file, and I had to boost the specificty on certain selector to work. The overall specificity in some part of the file was too high. I'm happy and frustrated at the same time. Anyway I can't wait to continue my learning journey.
What specific areas of your project would you like help with?If anyone has any suggestions on the challenge I encountered, which I described above, I will be very grateful. I started my journey in web development 4 months ago and I don't know if I am on the right track or I'm behind. Any other suggestions are welcomed too. Thank you all.
Me encanto tu desarrollo, podrias usar const en vez de let cuando declares tus objetos que solo vas a ocupar para la logica y esos objetos los mandas como parametros para poder hacer mas limpias tus fucniones, espero y te sirva, saludos!!!
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?Any feedback is welcome!
your layout i liked it, but the interaction with user could be best if when give click in the checkbox and change the states of strength.
Podrias poner mas puntos de interrupción y hacer que tus centenedores se centren en la mitad de sus padres esto es muy facil con display: flex; y sus propiedades align-item y justify-content
I learned :has() pseudo class in this project. Also I learned how to write less CSS. In JavaScript VALIDATION_STATE is used to validate input fields and values. I have written state management functions in this project.
What challenges did you encounter, and how did you overcome them?State management was little challenging.
What specific areas of your project would you like help with?I want help on my JavaScript code.
Me encanto como resolviste tu proyecto y que tu codigo esta bien entendible.
i learn to use css grid
Me gusto mucho como resolviste tu desafio, yo solo le pondria un poco mas de puntos de interrupción para que fuera menos drsatico el cambio entre pantallas.
Me gusto mucho tu solucion yo solo podria un poco mas de validaciones en el email y al darle click al buton del mesange de gracias, poder regresarlo al logue, en lo que no tenemos una ventana de bienvenida.
Me gusto mucho como resolviste el reto, esta muy entendible, saludos!!!
Me gusto como utilizaste Flexbox auque tengo entendido que cuando son mas de una fila y de una columna es mejor utilizar display: grid;, también podriás utilizar max-heigth y max-width para que las tarjetas no crezcan mas de lo que pide el diseño. Saludos!!
Me gusto mucho tu solución en como usaste el flexbox lo que yo cambiaría es en los font-size cambiar los px por rem para que se adapte mejor tu pagina en diferentes dispositivos y poner mas puntos de interrumpción para que los estilos no cambien tan bruscamente.
Me encanto su solución, solo fijese mas en no poner un width estatico en las diferentes medidas de dispositivos por que apesar que se ve muy bien en dispositivos de 320px no se visualiza de lo mejor, para eso puede no poner una medida al width y solo jugar con los margenes que se tiene.
I am most proud of the fact that I made the website responsive in a way that it odes not require keyframes for mobile view. Next Time I would write out the mobile view keyframes as well for the practice.
What challenges did you encounter, and how did you overcome them?The biggest challenge I faced was the file pathing. I overcame this by creating my on file path.
What specific areas of your project would you like help with?I would like help with simplifying my code. I believe I could accomplish the same look with less code.
Me encanto el efecto que se crea al pasar el mouse sobre la imagen.
