Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Laerice Dessouassi• 450

    @dinadess

    Submitted

    What are you most proud of, and what would you do differently next time?

    This was my first solo project with React so I am proud of it all in general.

    I built it with :

    • ❄ React
    • 🌄 Tailwind CSS
    • 🎊 React Confetti Explosion &
    • 🦚🖼React Toastify

    I am proud of the little pieces I added to the website especially the confetti explosion at checkout.

    What I would do differently ? I don't know if it was because of the project or React but I found it very easy to overlook accessibility (when opening and closing the menu for example or the cart). So I think I will make that a primary focus in upcoming projects.

    What challenges did you encounter, and how did you overcome them?

    I had a hard time when building the gallery. For some reason, I decided to do it with external libraries and it was a pain :(

    I finally reflected and realized it won't be so hard to build so I decided to do it on my own and then I saw that it was part of the challenge to build the gallery ourselves. So I built it and it was wayyy easier than I thought.

    E-commerce product page built w/ React & Tailwind

    1

    Aecio Neto• 340

    @aecio-neto

    Posted

    Nice solution. Notification/toast is so cool!

    Well done!

    0
  • Salah Najem• 350

    @Salah1221

    Submitted

    What are you most proud of, and what would you do differently next time?

    I wanted to create an animation for switching between dark and light themes, similar to the one in the Telegram mobile app, and I'm happy with the result. However, I wish I had organized my code better since it's a mess, especially with the class names in the HTML and CSS.

    What specific areas of your project would you like help with?

    The trick that I've used in my project for the dark/light switching animation depends solely on mix-blend-mode: difference, so I needed to invert most of the colors in the website. Would that impose a problem if used in a real-world project?

    E-commerce Produce Page with Dark mode

    2

    Aecio Neto• 340

    @aecio-neto

    Posted

    Wow, nice!

    I liked the transitions and dark mode. Congrats!

    How long does it take for completion?

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    Amazing work. It's so cool how it's organized.

    I finished this challenge and searched for solutions to see what others have done. I'm glad that I found your solution. Thanks for taking the time to do this.

    Congrats!

    Marked as helpful

    1
  • Aecio Neto• 340

    @aecio-neto

    Posted

    When we click to see code, it's showing a TinnyApp projetct.

    Marked as helpful

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    It's looking awesome!

    Congrats!

    1
  • Glen• 515

    @GlenOttley

    Submitted

    This is my first real attempt at building an accessible project here on FrontendMentor, as such I could use some tips as to what could be improved in this area.

    The drag and drop functionality currently only works on desktop since I used an external library, my plan is to learn how to write some custom drag and drop code which is accessible in future.

    I am aware that this project fails accessibility on color/contrast issues but I wanted to stick to the design as closely as possible. However if there are issues with focus states, labeling etc then I would be glad to hear about them.

    Cheers, Glen

    Accessibility focused, built w/ SvelteKit, Tailwind

    2

    Aecio Neto• 340

    @aecio-neto

    Posted

    It's looking awesome. Great job!

    When we use svelte, where we can see the code on GitHub? I mean, the full html, for example.

    PS - I tried to insert todos, but it didn't work.

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    Looks nice!

    Congrats!

    0
  • wavy• 30

    @wavylmao

    Submitted

    I couldn't get the card to center on the screen. I spent a couple hours on this trying different things like margin-auto and align-items-center on a parent div and looking around online, but to no avail. Hopefully here someone can help me. Also, are there things I can do to tidy up my code? Thanks guys!

    QR Code Component built with React, Tailwind, setup with Vite

    4

    Aecio Neto• 340

    @aecio-neto

    Posted

    Hi Wavy,

    You could use flexbox to center your solution. Search for flex, flex-direction and justify-content.

    I watched a great tutorial when I did this.

    CSS Flexbox in 20 minutes: https://www.youtube.com/watch?v=JJSoEo8JSnc

    Hope this helps.

    Thanks

    Marked as helpful

    1
  • Aecio Neto• 340

    @aecio-neto

    Posted

    Jim,

    Your solution isn't working.

    Double check your repositories/live preview links.

    Thanks

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    E aí, Gilnathan, tudo tranquilo?

    Parabéns por ter finalizado o projeto. Ficou show!

    Seguem algumas considerações:

    Linguagem - você está usando inglês na página, então, seria interessante deixar o lang como inglês mesmo.

    html/css - Não há necessidade de usar as quebras de linha <br>, você terá o mesmo resultado se utilizar padding para ajustar o texto.

    Design - Na guia de estilos há as especificações da fonte a ser utilizada, basta você importar e usar no seu CSS.

    De toda forma, ficou show. Parabéns!

    Espero ter ajudado.

    Abraço

    Marked as helpful

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    Hi, Marko. Congratulations on completing the project. It looks great!

    Here are some considerations:

    • Indentation and space in the code - a good practice is to organize your code in a more readable way. You can eliminate some lines in your html. No need to break lines in the <link> and <img> properties.

    Anyway, the html is very well done. I saw that you used semantic tags, filled in the alt of the image and much more.

    CSS: lean and objective. Excellent.

    Congratulations on the work.

    Hope this helps.

    Marked as helpful

    0
  • Aecio Neto• 340

    @aecio-neto

    Posted

    Hi, Nadir. Congratulations on completing the project. It looks great!

    Here are some considerations:

    • Indentation and space in the code - a good practice is to organize your code in a more readable way. You can eliminate some empty spaces inside your html and css.

    • Semantic HTML (main, article) These are tags that will make your code better. Just replace and/or delete some divs.

    Also, it is possible to replace the h2 with an h1, since it is the only and main title of the page.

    There are shortcuts that can help you when declaring some CSS properties. Example: padding-top: 5px; and padding-bottom: 5px; can be just a shortcut: padding 5px 0px;. less code, same result.

    Anyway, the CSS is very good.

    Congratulations on the work.

    Hope this helps.

    Marked as helpful

    1