Skip to content
OverviewSolutions
22
Comments
7
P
DeyanTopalov
@DeyanTopalov

All comments

  • P
    Daniel 🛸•44,790
    @danielmrz-dev
    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 🧾
    • JavaScript 🤖
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    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 😊

    Contact form built with Javascript

    #accessibility#lighthouse
    1
    P
    DeyanTopalov•430
    @DeyanTopalov

    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!

  • Victoria Azola Silva•1,290
    @VickyAzola
    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!

    Manage Landing Page

    #accessibility#tailwind-css#vite#react
    1
    P
    DeyanTopalov•430
    @DeyanTopalov

    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
  • P
    Daniel 🛸•44,790
    @danielmrz-dev
    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!

    Feedback welcome 😊

    Insure Landing Page (TailwindCSS)

    #accessibility#tailwind-css#lighthouse
    3
    P
    DeyanTopalov•430
    @DeyanTopalov

    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
  • P
    DeyanTopalov•430
    @DeyanTopalov

    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
  • P
    DeyanTopalov•430
    @DeyanTopalov

    Hi Amin,

    Great work on this challenge!

    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!

    Marked as helpful
  • P
    DeyanTopalov•430
    @DeyanTopalov

    Hi there,

    Good job on the challenge!

    A have just a few notes:

    • 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:
    .card {
max-width: 21rem;
}

@media (min-width: 600px) {
.card {
max-width: 25rem;
}

    Hope this helps!

    Marked as helpful
  • P
    DeyanTopalov•430
    @DeyanTopalov

    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:

    • 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.

    Overall great solution and a job well done!