@SpecroSubmitted 3 months ago
Latest solutions
- Submitted 2 months ago
Interactive Rating Component | React ⚛️ + Tailwind
#react#tailwind-css- HTML
- CSS
- JS
I'm vaguely familiar with aria-labels. When exactly should I use them and how?
- Submitted 3 months ago
Single Page Dev Portfolio | React ⚛️ + Tailwind 🎨 + Framer-Motion 🎞️
#react#tailwind-css#typescript#framer-motion- HTML
- CSS
- JS
My Questions:
When dealing with small decorative background images, how do you responsively position them fluidly?
Is there a way to do this without assigning abrupt background-positions for each media query?
Thank you for taking the time to review my solution. Any feedback helps!
- Submitted 3 months ago
Tech Book Club Page | React ⚛️ + Tailwind 🎨 + Framer-Motion 🎞️
#react#tailwind-css#typescript#framer-motion- HTML
- CSS
I had a hard time figuring out:
- How to set a max-width for the page while keeping the background images covering the entire screen
I wanted to prevent the webpage from being too wide for large viewports. Setting a max-width cut off the background image and left undesirable whitespace on my page's left and right sides.
How can I get around this next time?
- Submitted 3 months ago
React Tailwind Product Preview Card
#react#tailwind-css#vite- HTML
- CSS
If there is any concept or tool that might make my design better, please let me know!
Latest comments
- @rtambuntPosted 2 months ago
Looks good. You provide a minimal, elegant solution that gets the job done
0 - P@Tomas-1979Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
The first use of tailwindcss is very interesting. I like writing directly into the .html code.
What specific areas of your project would you like help with?For a larger project, tailwindcss seems very confusing. Is this solution really correct? Or is it somehow combined with .css or what?
@rtambuntPosted 2 months agoVery impressed with the sizing of your component cards! It's practically pixel perfect
How did you like Tailwind? It's one of my favorite tools. You're use of it is fine and gets the job done great
I've found Tailwind shines the most when building out webpages with React. React projects often require separating code out into components. Say you have hundreds of components in a project. You can easily manage styles within each individual component without having to create a css file for each.
I highly recommend checking out https://www.tailwind-kit.com/components and https://tailwindui.com/. These pre-made components can speed up your workflow or give you inspiration for your own projects
0 - P@moustafaessamSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud that I could make the website as much responsive as I can using tools like max and min when sitting the width and the height.
I am going to use max and min in next projects to make app more responsive.
What challenges did you encounter, and how did you overcome them?Making the cards responsive using only flexbox without using grid. I solved this problem by using tools like flex-shrink , min-height , etc.
What specific areas of your project would you like help with?Does my app use the right approach to make the website responsive?
@rtambuntPosted 2 months agoWhile not pixel perfect with the design, the solution looks great.
Nice approach using flex box. It's different from the typical grid solution I would have thought of
1 - @learnfullstack-carlosSubmitted 3 months ago@rtambuntPosted 3 months ago
Some padding and text sizes are off.Looks good otherwise! I couldn't check the mobile solution since the site no longer exists, but keep it up
0 - @thomasweitzelSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I found a solution for the image on top for mobile-mode and desktop mode. Since I didn't want to compromise on the padding inside the `` elements. Only one of them is visible, depending on the mode.
What challenges did you encounter, and how did you overcome them?- image on top for different breakpoints
- lines between rows in nutrition table
- pleasing bullet point location (I diverged from the design because it hiders readability - in my opinion)
Especially the problem with the image on top of the recipe page was a challenge for me. I don't know if my solution is good. I'd like to hear about a better one.
@rtambuntPosted 4 months agoThe solution is very close to the design, looks great
0 - @SpecroSubmitted 4 months ago@rtambuntPosted 4 months ago
Your solution is very close to the design. As a Tailwind user, I like your use of the technology. Keep it up
0
