@MoepyaCodeSubmitted 3 months ago
SpartanFranco
@SpartanFrancoAll comments
- @SpartanFrancoPosted 3 months ago
Hola,buen trabajo,solo te falta que después de que dan error los inputs, al llenarlos y hacer el submit no se resetean los errores y continúan viéndose
Marked as helpful0 - @GiaBaoDoanSubmitted 3 months ago@SpartanFrancoPosted 3 months ago
1-)Hello, good job!!, you could also validate the sidebar so as not to pass the form step without completing it, you can even confirm it in the last step without completing it, otherwise...super
0 - @xStephxSubmitted 3 months ago@SpartanFrancoPosted 3 months ago
Holaa,buen trabajo !!,me fijé que al hacer el submit con los inputs vacíos se sale del contenedor el botón de submit,porque tienes como clase md:max-h-[770px] ,entonces si sus componentes se mueven como es el caso pueden quedar fuera del main,podrías usar h-fit para que se ajuste a su contenido o aumentar el max-h para evitar ese problema ...y solo te quedaría intentar como hacer que despues de darte error los inputs al escribir en ellos el color de la fuente no sea rojo
Marked as helpful1 - @ArinzeGitSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This is my first project with Tailwind CSS. I am most proud of adding Tailwind CSS to my skills set. I am also proud of creating and using custom React hooks for the first time. I used it for step control. What I would do differently next time is to use less of absolute units (px) and more of relative units (rem, em, %)
What challenges did you encounter, and how did you overcome them?Being my first time using Tailwind, I encountered issues with styling pseudo-classes, pseudo-elements, media queries and some compound CSS properties. I overcame these challenges by using the Tailwind documentation every step of the way.
What specific areas of your project would you like help with?I'd like to know other ways of implementing a multi-step form other than custom react hooks for step control.
@SpartanFrancoPosted 3 months agoHola,excelente trabajo,el único error es que el botón de cambiar a mensual y anual no funciona y las letras del del formulario de registro al escribirlas son de un gris muy claro...te quedó igualito 💪
Marked as helpful0 - @O-Julia-OSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I was able to create working tab switching and extract data from a JSON file.
What challenges did you encounter, and how did you overcome them?It was challenging to adjust the cards to match the specified design. I added margins, paddings to the text, and line height, which helped align the card properly.
What specific areas of your project would you like help with?I need help with grid layout and also with the JS code. Did I place the styles correctly, and is my JS code clear? What can I improve?
@SpartanFrancoPosted 3 months agoHello in layout, @media screen and (min-width: 70rem) { .hero__details { margin-bottom: 8rem; ---remove this rule; } .card__item { height: 300px;---- > height: 15rem; lower the px or change it to this measurement, which is more advisable to use relative measurements,
but you have to play with the height of -.hero_container- to make it as similar as possible; if you are using grid, you could enclose - hero_container- inside cards as well and declare .cards{ grid-template-columns: repeat(4,1fr ); grid-template-rows: 1fr 1fr; }
already:
hero_container { grid-row:1/span 2 } and then you wouldn't have to play so much with the height of the cards and the hero_container
} But still...Good job!!
0 - @sudhanshusingh-gSubmitted 3 months ago@SpartanFrancoPosted 3 months ago
Buen trabajo,solo un poco de gap para separar los elementos y padding en los contenedores
0 - @sakthivel155Submitted 3 months ago
- @oduwa-ASubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of remembering the width element to control the size of it all, as well as using margin-left and margin-right to center it.
What challenges did you encounter, and how did you overcome them?Mainly just getting the specific numbers right, not completely sure I did it since I was eyeballing the whole time.
What specific areas of your project would you like help with?I still don't understand landmarks as much.... Would love assistance on that to make sure accessibility users can maneuver properly.
@SpartanFrancoPosted 3 months agoHola ,te recomiendo usar flex en el body para centrar la tarjeta como en el diseño ,si quieres que se parezca ,por lo demás ...genial💪
Marked as helpful1 - @TeewsPepperSubmitted 3 months ago@SpartanFrancoPosted 3 months ago
Se ve bien,solo te queda de detalle que al body le asignes las propiedades display:flex; + justify-content y align-items center ambos para que la tarjeta quede centrada y un padding a esta y te queda idéntico
0 - @scottyembertonSubmitted 3 months ago@SpartanFrancoPosted 3 months ago
Hola buen trabajo,el único detalle es que la imagen no ocupa todo su espacio,es porque tienes : <picture class="product__content"> ....img
</picture> y <div class="product__content"> ...content </div>con las mismas clases,y en el css la clase : .product__content { display: grid; gap: var(--content-spacing); padding: var(--content-padding); }
estas aplicándole al contenedor de la imagen un padding también, por eso se ve así la imagen, una solución sería quitarle la clase a <picture> y verás el cambio,por lo demás te quedó idéntico 👌
0 - @J-JawadSubmitted 3 months ago
- @Vetrivel-botSubmitted 4 months ago@SpartanFrancoPosted 3 months ago
Buen trabajo,solo tienes que darle unos pequeños ajustes al css y quedará mas parecido, te recomiendo usar unidades relativas como rem,em o % antes de las absolutas,y en vez de usar <div> usa etiquetas semanticas como <main>
Marked as helpful0
