@DeyanTopalov
@danielmrz-dev
Submitted
What are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
Very nice accessibility test. I think I managed to add all the required features.
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@DeyanTopalov
Posted
Hey @danielmrz-dev, congrats on yet another great solution!
Just one small thing on my end - currently your text inputs have font-size of 11px. Perhaps you are following the design (tbh I have not checked the challenge details yet).
But on mobile when the input has smaller than 16px font size, the browser automatically zooms in (A LOT) when the input is selected, without automatically zooming back to normal view. This might lead to not the best UX on mobile. The best way to avoid this is to always have font size of 16px or bigger on your text input areas.
Hope this helps & keep the good work!
@VickyAzola
Submitted
What specific areas of your project would you like help with?
Hi there! I would like some help with the carousel on desktop. For now, I create a copy of the array and concatenate it with the original array, but then it goes back to the first element. I want to know if there is a way to make the carousel on desktop infinite.
Thanks!
@DeyanTopalov
Posted
Hey @VickyAzola, congrats on another great solution!
A small tip on my end - consider providing a max width of your body (usually those are around 1440 - 1600px, but depends on the design and purpose of the site). If no max width is set, then the layout becomes a bit weird on ultra wide screens.
Regarding the infinite scroll on desktop, there is a great video from Kevin Powell "Create an infinite horizontal scroll animation". But my personal advice is to also consider working with component libraries as they can save a lot of time, but can be tricky at first.
Hope this helps!
Keep the good work!
Marked as helpful
@danielmrz-dev
Submitted
What are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
I tried Tailwind again on this one. I've been trying to finish bigger projects using only Tailwind, but there's always one thing or two that I'm not able to create with it so I have to use a bit of pure CSS too.
Anyway, it took me a few hours to finish, but I enjoyed every minute of it.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@DeyanTopalov
Posted
Hi @danielmrz-dev job well done once again!
Just one little thing - the layout get's a bit weird on ultra-wide screens. If you decide to update the code, the solutions are many and super simple. A simple scenario can be:
<body className="grid place-items-center">
<main className="max-w-[90rem]">
{rest of the code}
</main>
</body>
Marked as helpful
@GreenCitrus6
Submitted
I had some trouble with importing fonts into Tailwind. My paths to the font files are relative and when I ctrl + click them it leads me to the file in VS Code. The import statements for the fonts in globals.css are as follows:
@layer base {
@font-face {
font-family: WorkSans;
font-weight: 400;
src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
}
@font-face {
font-family: WorkSans;
font-weight: 400;
font-style: italic;
src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
}
@font-face {
font-family: WorkSans;
font-weight: 600;
src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
}
@font-face {
font-family: WorkSans;
font-weight: 600;
font-style: italic;
src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
}
@font-face {
font-family: WorkSans;
font-weight: 700;
src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
}
@font-face {
font-family: WorkSans;
font-weight: 700;
font-style: italic;
src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
}
}
Additionally, I found that Tailwind would only animate the accordion expanding if I explicitly defined the height of the container (h-0 to h-32 works, but h-0 to h-auto didn't). However, this means the container for the answer text will either be too small or too large depending on the screen size/amount of text. Is there a way to animate from h-0 to h-auto with Tailwind, or would the best solution be to animate the expanding and collapsing from scratch?
@DeyanTopalov
Posted
Hey Daniel,
Great work on the Challenge!
Regarding the trouble with the fonts, I recommend using next fonts as it is super easy and has much more benefits. Please find a a great YouTube video about Next fonts:
https://www.youtube.com/watch?v=L8_98i_bMMA
Regarding the animation from h-0 to h-auto, I have this implemented in my solution. Feel free to check it out (it's in the accordion.jsx component).
I hope you find this helpful, and keep the good work!
Marked as helpful
@AMINKHALAJI
Submitted
Appreciate any help or feedback. I had a challenge hovering over part of the image.
@DeyanTopalov
Posted
Hi Amin,
Great work on this challenge!
Few notes after looking at your solution and code:
In case you are interested, feel free to review my solution for the same challenge.
It is worth noting that I am no expert by any means, and this feedback is just my opinion.
Overall great work and keep on coding!
P.s. If you find this comment helpful, please mark it as such - this will help me understand when my feedback is useful and it's a much appreciated gesture!
Marked as helpful
@Nachoho
Submitted
@DeyanTopalov
Posted
Hi there,
Good job on the challenge!
A have just a few notes:
.card {
max-width: 21rem;
}
@media (min-width: 600px) {
.card {
max-width: 25rem;
}
Hope this helps!
Marked as helpful
@arrejoria
Submitted
Results Summary es mi segundo trabajito con Frontend Mentor, estoy bastante contento con esta plataforma ya que pude descubrir su potencial realizando algo un poco más interesante que una maquetación.
Estuve pensando mucho en poner en practica este proyecto y subsiguientes con React pero siento que me voy a robar mucho tiempo comenzando desde el inicio con otra tecnología.
Seguiré impulsado por javascript puro, le tengo el ojo a Laravel con estos proyectitos 😁
Cualquier feedback será recibido con brazos abiertos y mucho agradecimiento.
Un abrazo!
@DeyanTopalov
Posted
Hi There!
Very nice solutions, congratulations!
Few notes on the code, that might seem interesting for you: This is part of a design, so you can play and test CSS custom variables. Some of the benefits are:
Another thing that may interest you is using :is(), :where() for the cases where you have multiple selectors sharing the same rule set. There are some interesting videos from Kevin Powell.
Overall great solution and a job well done!
