Skip to content
OverviewSolutions
7
Comments
16
Aecio Neto
@aecio-neto

All comments

  • Laerice Dessouassi•450
    @dinadess
    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

    #react#tailwind-css#vite
    1
    Aecio Neto•340
    @aecio-neto

    Nice solution. Notification/toast is so cool!

    Well done!

  • Salah Najem•350
    @Salah1221
    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

    Wow, nice!

    I liked the transitions and dark mode. Congrats!

    How long does it take for completion?

  • Aecio Neto•340
    @aecio-neto

    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
  • Aecio Neto•340
    @aecio-neto

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

    Marked as helpful
  • Aecio Neto•340
    @aecio-neto

    It's looking awesome!

    Congrats!

  • Aecio Neto•340
    @aecio-neto

    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.

  • Aecio Neto•340
    @aecio-neto

    Looks nice!

    Congrats!

  • Aecio Neto•340
    @aecio-neto

    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
  • Aecio Neto•340
    @aecio-neto

    Jim,

    Your solution isn't working.

    Double check your repositories/live preview links.

    Thanks

  • Aecio Neto•340
    @aecio-neto

    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
  • Aecio Neto•340
    @aecio-neto

    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
  • Aecio Neto•340
    @aecio-neto

    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
  • Aecio Neto•340
    @aecio-neto

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

    Here are some considerations:

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

    As you already said, semantic html (main, article) 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.

    Your page takes up more than the first fold, you can make it smaller and eliminate scrolling. This would improve usability.

    Hope this helps.

    Marked as helpful
  • Aecio Neto•340
    @aecio-neto

    Hi, congratulations on completing the project.

    Here are some considerations:

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

    I saw that you are using flex. Maybe you can eliminate margin: 0 auto; and translate. Search for flex-direction.

    There is a link with only one /, you need to use two (https://). check there.

    Hope this helps.

    Marked as helpful
  • Aecio Neto•340
    @aecio-neto

    Hi, Lyub's, congratulations on completing the project.

    Here are some considerations:

    What would be a better way to practice? a) semantic html - you can replace or remove some divs with semantic tags. Such as main and article. It's a good practice when thinking about SEO.

    Using css frame work? In such a small application, there is no need. It would be like using a cannon to kill a mosquito.

    Would using a grid template be easier than flexbox? It is possible to do the project with both. But flexbox is a better solution as this application is just one column. Grid, helps us create more complex layouts. (multiple columns and rows).

    In bigger applications, it is possible to use both (grid and flexbox) to achieve the results we want.

    Hope this helps.

  • Aecio Neto•340
    @aecio-neto

    Hi Funsho, congratulations on finishing the project.

    Here are some considerations:

    Semantic HTML - you can remove or replace some divs and use <main> and <article> tags instead. It is also possible to use an h1 in place of the h3, as it is the main title of the page.

    The CSS looks pretty good to me.

    See ya

    Marked as helpful