Skip to content
OverviewSolutions
8
Comments
8
P

Amine

@amine-can-code130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Mirko Zlatunic•250
    @mirkozlatunic
    What are you most proud of, and what would you do differently next time?

    That i was able to use the the tailwind styling to create the image background as well as the transition from mobile to desktop. What i need to do better is the refactoring of the code. I think i still need to a better job by cleaeing up the code in one component.

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

    The background picture as well as the hero picture. I was able to setup all the correct code without the picture but than i needed to overlap the text over a picture in the footer.

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

    The hero section pictures to have the styled the same way as the solution.

    Responsive Landing Page using TalwindCSS for Grid

    #tailwind-css#vite#react
    1
    P
    Amine•130
    @amine-can-code

    Project Feedback

    Overview

    You did a great job on this project! It's evident that you have an advanced understanding, especially noticeable in the hero section where you used a combination between CSS Grid and Flexbox. I opted for Flexbox only in my project and encountered some complications, so your clean and clever approach was particularly impressive.

    Specific Observations

    Hero Section

    • Responsive Issues: In Google Chrome's DevTools responsive mode, the images on the left and right appear to be cut off on larger screens. Could you take a look at that?
    • Overflow Usage: You managed to use overflow: hidden effectively, which perfectly matched the original design.

    Download Button

    • Hover Effect Issue: There's a small issue with the hover effect over the text in version 1.3 on the download button. The effect causes the text to blend into the background, making it seem like it disappears, which might not be the intended interaction.
    • Footer Button Consistency: The hover effect on the footer's download button doesn't present a problem, although it might not be necessary, but it's something to consider for consistency.

    Layout Issues

    • Horizontal Scrollbar: Additionally, I encountered an issue with a horizontal scrollbar appearing on my 16-inch screen laptop. This seems to persist across different browsers, suggesting it might be a consistent problem with the layout or certain CSS properties causing overflow.
      • Possible Cause: I suspect that the footer might be contributing to this issue, but I'm not entirely sure.
      • Recommendation: Checking the widths and overflow properties of your containers, especially the footer, could help identify and resolve this issue.

    Conclusion

    Overall, your work is outstanding, and my comments are not meant as criticism but rather as points for fine-tuning. Reviewing your solution inspired me to revisit my own project to enhance it further. I've learned some valuable tricks and ideas from your code, which really help. This is why I'm taking the time to give detailed feedback—focusing on minor aspects that might have gone unnoticed can significantly refine a project.

    Remember, no one is perfect, but striving for perfection is what makes each of us unique. Keep up the excellent work!

  • P
    Amine•130
    @amine-can-code

    Great work on using Tailwind CSS and Vite for your project! These tools really streamline the development process and it’s fantastic to see them implemented so effectively in your work. However, I noticed that the GitHub link to your repository isn’t working. Could you please check it? It would be wonderful to explore your code and learn more about your approach. Perfection isn't the goal, progress is!

    Marked as helpful
  • fuergloria•210
    @fuergloria
    What are you most proud of, and what would you do differently next time?

    successfully using css grid

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

    didn't really use css grid before, so needed some time to figure out the offset layout of the cards. looked at some resources and ultimately a fresh view of the problem made me able to solve it quite quickly

    four card feature card using next/tailwind with flexbox and grid

    #next#tailwind-css
    1
    P
    Amine•130
    @amine-can-code

    I noticed that the live preview of your project isn't currently working. Could you take a look and check what might be going wrong? I'm really eager to see your implementation in action, especially since you've tackled the challenge using CSS Grid.

    It's impressive to see you opt for CSS Grid in your solution, it's a powerful tool for building complex layouts. When I first saw the challenge, I also considered using Grid, but I ended up using Flexbox instead. It was quite straightforward, I just wrapped the second and third cards in a div and played around with flex-col and flex-row. Although Flexbox handled it well, I know Grid offers more control and capabilities for intricate designs.

    Congratulations on mastering such a robust tool! I'm looking forward to when you get the live preview issue sorted out so I can appreciate your work fully. Remember, the more you practice and experiment, the more skilled you'll become. Keep up the great work!

  • P
    Amine•130
    @amine-can-code

    Great job on this project! Your proficiency with CSS has clearly shown through the polished and responsive design you've implemented. You have a solid grasp of styling, which is evident in how effectively you've managed to adhere to the design specifications.

    As you continue to grow and refine your skills, I'd recommend exploring other CSS frameworks that can further enhance your productivity and design repertoire. While Tailwind CSS is excellent for utility-first design, frameworks like Bootstrap could offer you ready-made components that speed up development even more. Learning Bootstrap will not only diversify your skill set but also give you a broader understanding of responsive design principles.

    Keep up the fantastic work, and consider diving into different technologies that can complement your already impressive skillset. Each new tool you learn opens up more opportunities and potential for creativity. Keep exploring and pushing your limits!

  • P
    Amine•130
    @amine-can-code

    Fantastic job! I'm thoroughly impressed by how seamlessly you've managed to implement the design specifications.

    Mientras sigas avanzando, alcanzarás tus metas tarde o temprano.

  • P
    Amine•130
    @amine-can-code

    Excellent work on your project! It’s clear that you've meticulously adhered to the design guidelines, which has really paid off in the polished look of your final product.

    Sigue adelante con pasión y dedicación ¡cada paso que das es un peldaño hacia tu éxito definitivo!

    Marked as helpful
View more comments