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.
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.
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.
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:
HTML 🧾
Tailwind 👾
JavaScript 🤖
Mobile first workflow approach 📲
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!
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>
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:
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?
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!
Few notes after looking at your solution and code:
It is a good practice to use relative units (like em, rem etc) and not pixels. This is in order to optimize the design and therefore user experience across different screen sizes. If you have you measurements in pixels, you can use any px to rem calculator found by google search.
It is a good practice to set custom variables for commonly used values across your code base (eg. font-size, font-weight, spacing, colors etc). Usually the design is build with a pattern/system in mind and by doing this - you will have consistency, and in case of an update - you will need to change the value only in your custom variables declaration and it will update in every place it is being used.
Use layout tools like flexbox and grid for, instead of margins etc. For spacing you can use gap and padding.
It seems there are some areas of improvements for the hover you have implemented - when you have a img that is to have a hover effect you can place that <img> inside a <div> and apply the hover to that one. It is a good practice to have both :hover & :focus.
also for the hover effect you can use pseudo elements like :before. They might be a bit tricky at start, but with a bit of practice those can provide some clever solutions.
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!
Your active state on the img is not working, and the active state on the name at the bottom as well;
Your card has far greater width than the provided challenge design. A nice tip I found somewhere in YouTube is to measure the distances from a screenshot (if on mac you can do that with the screenshot tool or straight in the Preview app). Then you can convert them to rem by using any web px to rem converter and set them as max-width + adjusting with @media query. Example:
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.
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:
less repetition;
more clean code;
if the design theme changes, it is easy to update just few variables on the top and then the changes will be applied to all the places that are using them.
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.
