-
Speed of resolution. I'm getting used to tailwind classes and architecting the UI in my head before even trying to code
-
I would like to try implementing some animations to the acordion items
Non this time. Progress in skill is clear
Speed of resolution. I'm getting used to tailwind classes and architecting the UI in my head before even trying to code
I would like to try implementing some animations to the acordion items
Non this time. Progress in skill is clear
Good!
I'm proud that I decided to go beyond the original design by adding buttons to open and close the rating component, turning it into a more interactive experience. I challenged myself to build a simple modal, and I’m happy I was able to implement it successfully. However, looking back, I realise that I used <button>
elements to capture the user's selected rating, which isn't the most semantic choice. Next time, I would use <input type="radio">
elements instead, as they are more appropriate for this kind of selection and improve accessibility.
One of the biggest challenges I faced was learning Tailwind CSS for the first time, just as version 4 was released. Most tutorials I found were based on version 3, and even ChatGPT often gave outdated suggestions. I got through it by using the official docs and finding updated YouTube tutorials
What specific areas of your project would you like help with?I’d appreciate feedback on how I can improve my code, especially in terms of best practices and structure. I'm also looking for guidance on accessibility, as I haven’t focused on it yet but plan to make it a priority in future projects.
Nice way to navigate, great job!
The next time in the part of backgrounds do first and then implements the design
What challenges did you encounter, and how did you overcome them?I had problems in the part range when the questions increment also the background should do but I couldn't do it
What specific areas of your project would you like help with?In the part background the images in the body and the parte linear-gradient change the color when the increment the questions
It's great! The functions are fine, but there's a problem when changing the question — the question and the options on the screen don't update.
Great!
Cool!
I'm proud of implementing SWR for efficient data fetching, ensuring the dashboard updates dynamically without excessive network requests. The use of Tailwind CSS made styling intuitive and maintainable.
Next time, I would explore alternative state management solutions(specially Zustand) to improve performance.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges was configuring Webpack properly to bundle scripts for deployment on Vercel. Since Webpack setup can be complex, ensuring everything integrates smoothly required troubleshooting and fine-tuning.
Another challenge was dealing with Tailwind's purging mechanism. To ensure dynamic classes aren't removed, I created a hidden-classes.html
file to reference all the necessary dynamic Tailwind classes. However, I'm unsure if there's a better way to handle this, as it feels like a workaround rather than an optimal solution.
Any suggestion about any aspects of the project would be appreciated.
Good!!!
Flawlessly using flex, learn how to change picture from mobile to desktop, learn use js.
Great!
I loved your function for closing the options when clicking outside. You could try including your code in an article — it's cleaner and looks better on mobile too.
You can create a download button component to avoid repeating the same button in your code. Since it's in a landing page, it might be used multiple times. And the color of the version in the footer is wrong.
But is excelent!
What i would've done differently is made it without React if it was a static page without the need of adding more cards in the future. I'm glad that i got more hands-on practice with React, but it certainly took more time than necessary.
What challenges did you encounter, and how did you overcome them?The hardest challenge was making the layout responsive. I over-engineered it a bit, mainly to allow for the option of adding more cards in the future.
What specific areas of your project would you like help with?Without the Figma design, I might have missed some colors or the box-shadow.
Hey, if you don't have Pro and are having trouble with colors, you can install the ColorZilla extension in Chrome. This tool allows you to pick colors in RGB, HSL, and HEX formats. Just open the free design images in your browser and grab the colors!
Great!
I'm really happy with how this turned out! 😊️
This feels like my cleanest, most professional-looking solution/demo yet.
What specific areas of your project would you like help with?If anyone knows if there is a better way to horizontally center icon and text in the <button>
element, please let me know!
I used display: flex;
with align-items: center;
. It works, but it feels unnecessary to change the display
property to align the items?
Great!
<div class="table"> <div>Calories</div> <div>277kcal</div> <div>Carbs</div> <div>0g</div> <div>Protein</div> <div>20g</div> <div>Fat</div> <div>22g</div> </div> </section>
You will can replace this for a table. but is great!
Greate!
Me parece que esta bien, aunque el HTML podría ser mas semántico. Saludos!
I would pay more attention to the text sizing.
What challenges did you encounter, and how did you overcome them?To nail the text wrapping.
What specific areas of your project would you like help with?None
Esta bien. Lo haria un poco mas semantico, cambiando el
<div class="card">
por <article class="card">
<div class="text-container">
por <div class="text-container">
El <h2>
lo cambiaria por un <p>
El resto me parece perfecto, saludos!