P
@Towbee05
Latest solutions
Product-preview-card-component HTML TAILWIND
PSubmitted 8 months agoThe project was small, so I didn't notice any specific areas that needed particular attention. However, any feedback, no matter how minor, would be greatly appreciated and valued.
Recipe-page HTML CSS
PSubmitted 8 months agoEvery piece of advice is invaluable to me. I'm open to any feedback or suggestions that could help improve my project, especially in areas where I might not have noticed potential issues or where there's room for optimization. Your insights will greatly contribute to my learning and development process.
Social link profile HTML CSS
PSubmitted 8 months agoEvery piece of advice is invaluable to me. I'm open to any feedback or suggestions that could help improve my project, especially in areas where I might not have noticed potential issues or where there's room for optimization. Your insights will greatly contribute to my learning and development process.
Latest comments
- P@Kaczupinko
Great job! 🌟 Just a couple of small things—don't forget to add the opacity in the footer section, and it looks like one image is missing from the content section. Other than that, everything else is spot on! 👍
- @LarisaKampeWhat are you most proud of, and what would you do differently next time?
My second tailwind project, but first tailwind grid exercise. Very fun!
- @laura-nguyenWhat are you most proud of, and what would you do differently next time?
I'm proud that I'm getting used to Tailwind CSS. It's my 2nd time using it. What I would do differently next time is revert back to using Sass for now. I feel like Tailwind CSS may be more advantageous to use for more significant projects such as a landing page. Since this task was simpler i.e. components, it would have been more time efficient to style with regular CSS or Sass
What challenges did you encounter, and how did you overcome them?For the desktop layout I wasn't sure how to get the two cards to be in the same column in the middle. A solution I did was to wrap the two middle cards in a div and then do a 3-column grid. I'm open to other solutions
What specific areas of your project would you like help with?Any resources about flex would be great i.e. what is flex grow, flex shrink, etc
P@KaczupinkoYou can add a custom box shadow to your Tailwind configuration like this:
module. exports = { theme: { extend: { boxShadow: { 'custom-blue': '0px 15px 30px -11px rgba(131, 166, 210, 0.5)', } } } }And make sure the background in your <div> is white. Other than that, the project looks very nice, and personally, I like it. You can find everything you need regarding Tailwind at tailwindcss.com.
- @vitordevlopesWhat are you most proud of, and what would you do differently next time?
It was a nice challenge, I got to learn more about how to use width, heights properties and I also used more flexbox in this project, which was really good. Next time would try to make a responsive layout but I still don't know much about it.
What challenges did you encounter, and how did you overcome them?I couldn't make my page fit some different screens widths, the content disappeared in small screens (like mobile), I asked chatGPT and it taught me about using "max-width", based on this I managed to solve the problem (it still isn't perfect). I also used discord to ask about it, I got a good reply that helped me a lot.
What specific areas of your project would you like help with?Any tips about responsive layout are welcome! Also, I'm not sure if the active states are right, I didn't understand what was in Figma.
P@KaczupinkoIt looks good overall. The 'Learning' button should have a black background with yellow text when hovered over. Additionally, the <div class="attribution"> shouldn't interfere with the main content of the page; it can be positioned at the bottom to avoid affecting the layout.
- P@KMS56135P@Kaczupinko
Semantic HTML: Your code generally uses the right HTML elements, but you could improve it by wrapping the title and description in a <header> tag for better structure.
Accessibility: It's pretty accessible, but adding some aria-label attributes to the button would make it even better for screen readers.
Responsive Design: Your layout adjusts nicely across different screen sizes. The use of Tailwind's responsive classes makes it easy to manage.
Code Structure: Your code is clean and easy to read, thanks to Tailwind. However, the inline SVG in the button might be better as a reusable component.
Design Consistency: You did a great job sticking to the design. The spacing and alignment are spot on.
Improvements:
Use <header> and <section> tags to better structure your content. Add aria-label attributes for better accessibility. Consider moving the SVG icon into a reusable component. Overall, your code is solid, responsive, and well-organized. Just a few tweaks, and it’ll be even better!
- @Danish030What are you most proud of, and what would you do differently next time?
main part i have learned here to destructure design into chunks and starting making structure in html, and i have used htm sematic tags wisely here
What challenges did you encounter, and how did you overcome them?it's challenging to figure out about structure, else part is not that much hard
What specific areas of your project would you like help with?i have worked with html semantics and css grid
P@KaczupinkoThe project looks good, but work on improving the padding and make sure to consistently use either px or rem throughout your styles. Additionally, I noticed that your font sizes vary between px and rem—it might be beneficial to stick to one unit for consistency and better scalability, especially for responsive design. Consistency in your CSS will make your code easier to maintain and read. Keep up the good work, and these adjustments will enhance the overall quality of your project!
Marked as helpful
