Skip to content
OverviewSolutions
7
Comments
6
P
Manjunatha C
@manjunathagee

All comments

  • P
    Manjunatha C•150
    @manjunathagee

    Hey hi, Looks awesome

    • Set max-width for subheading for desktop devices "Our Artificial powered..."
  • anasmubashar•50
    @anasmubashar
    What are you most proud of, and what would you do differently next time?

    I am proud that I used tailwind and flexbox for this challenge.

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

    I encountered challenges when I was trying to make the card responsive using tailwind. So, I took some help from tailwind documentation and web.dev documentation of responsive design.

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

    I would want help with the responsiveness of the card.

    Product preview card component using Flexbox and tailwind CSS

    #tailwind-css
    1
    P
    Manjunatha C•150
    @manjunathagee

    Hey hi, Looks awesome just few things which i noticed.

    • On Tablet devices text overflows the container
  • P
    Manjunatha C•150
    @manjunathagee
    • Subtitle colour is not green
    • Hover styles are missing on social links
  • P
    Manjunatha C•150
    @manjunathagee
    • Image should be rounded
    • Learning should be a button for accessibility
    • Hover styles are missing for card and h1 element
    Marked as helpful
  • P
    Manjunatha C•150
    @manjunathagee

    Hi there, Went through the code and would like to provide some feedback.

    • Learning should be a button rather than a div with styles, it's not semantic and will affect Accessibility
    • Class names are direct string no need to use curly braces to evaluate the expression className={'text-lg'} instead use className="text-lg"
    • Can use box shadow as an alternative to have shadow instead of creating extra div with positioning.
    Marked as helpful
  • ERNEST ANOKYE•80
    @iamernesto14
    What are you most proud of, and what would you do differently next time?

    Reflecting on my recent QR code webpage project using HTML and TailwindCSS, I'm proud of achieving a clean, responsive design. TailwindCSS's utility-first approach made styling efficient and modular, speeding up development and keeping the codebase organized. This project solidified my understanding of responsive web design and TailwindCSS.

    Looking ahead, I see areas for improvement. I plan to enhance accessibility by adding aria-labels and ensuring proper color contrast. Breaking down components further will boost reusability and maintainability. Additionally, optimizing images and assets for faster page loads will improve user experience. These lessons will guide my future projects, ensuring they are more inclusive, efficient, and high-performing.

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

    During my QR code webpage project, I encountered several challenges that required thoughtful solutions.

    One major challenge was ensuring the design was fully responsive across various screen sizes. TailwindCSS’s utility classes needed some tweaking to achieve the desired layout. I extensively used TailwindCSS’s responsive utilities and tested the design on different screen sizes using browser developer tools and real devices to overcome this.

    Another challenge was integrating custom fonts from Google Fonts. Ensuring these fonts were correctly loaded and applied to the right elements required adjustments. By carefully following the documentation and using the @import method in the CSS, I verified the font-family settings in the Tailwind configuration to solve this issue.

    Deploying the project on Netlify also presented initial hiccups, particularly with the build process and referencing all assets correctly. I reviewed the Netlify build settings, ensuring the correct build commands and publish directories were set. I also checked that all files and paths were correctly referenced in the HTML, which helped streamline the deployment process.

    Overall, these challenges provided valuable learning experiences, and overcoming them has strengthened my problem-solving skills and knowledge of TailwindCSS and deployment processes.

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

    In this QR code webpage project, there are a few specific areas where I would appreciate some guidance.

    Firstly, I’m looking for feedback on improving the page’s accessibility. Suggestions on incorporating ARIA roles, labels, and enhancing color contrast would be particularly helpful to make the page more inclusive and user-friendly.

    Secondly, I seek feedback on my use of TailwindCSS. I want to ensure I’m utilizing TailwindCSS efficiently and would appreciate any best practices or patterns I might have overlooked.

    Lastly, tips on refining the deployment process to Netlify would be beneficial. Specifically, I’m interested in setting up continuous deployment and handling environment-specific configurations to streamline the deployment process.

    Overall, any feedback in these areas would be greatly appreciated and would help enhance the quality and performance of my project.

    Responsive webpage with html5, tailwindcss

    #tailwind-css
    1
    P
    Manjunatha C•150
    @manjunathagee

    Use relative units like rem instead of px

    Marked as helpful