Skip to content
OverviewSolutions
7
Comments
7
P

Heath Babb

@hbabbInman, South Carolina60 points

👋 Land Survey CAD Tech with 20 years' experience. Owner of HB Consultants LLC. Passionate about coding and mapping tech. Open to collaboration!

I’m currently learning...

Next.js/React, Tailwind, next-safe-actions

Latest solutions

  • Four Card layout with Flexbox & Grid

    P
    Heath Babb•60
    Submitted about 1 month ago

    I feel like the responsiveness could be improved. I also don't believe the SCSS functions are translating to CSS properly.

    1 comment

  • Responsive Product Preview Card

    P
    Heath Babb•60
    Submitted about 1 month ago

    In future projects, I'd like to further explore:

    • TypeScript integration for component props
    • Creating more reusable components
    • Implementing better accessibility practices
    • Exploring animation and microinteractions
    1 comment

  • Responsive recipe page

    #react#typescript#vite#tailwind-css
    P
    Heath Babb•60
    Submitted about 1 month ago

    I think this would be a great one to build a full-stack project. It would be a lot of work to have to code out each recipe, so if anyone has a way to map it to a database and could give some pointers, I would appreciate it.

    0 comments

  • Responsive personal social links (system crashed)

    P
    Heath Babb•60
    Submitted about 1 month ago
    1 comment

  • Personal Social Links

    #react#vite#tailwind-css
    P
    Heath Babb•60
    Submitted about 1 month ago

    Areas for help

    • I think the design is outdated and could use a refresh
      • I would like to setup a version for both a light and dark mode
      • I would like to learn more about design so that I can use this in my personal portfolio as an "all links" tab

    I am always open to collaborate and welcome constructive criticism, maybe you see something that I can improve that I didn't notice. Remember, ask questions - it's the only way to learn.

    0 comments

  • Responsive Blog Preview Card

    P
    Heath Babb•60
    Submitted about 2 months ago

    I think I could do more with adding media queries to help the responsiveness be smoother.

    1 comment
View more solutions

Latest comments

  • P
    Heath Babb•60
    @hbabb

    Clean code

    The code is cleanly written and the deployed project looks good.

    Issues

    • I believe you are missing the tablet to desktop switch, the cards are arranged differently from one layout to the next.

    • The "responsiveness" is very rigid, you could add some css code in your queries to help things shift more smoothly

    Conclusion

    Overall an excellent and cleanly written project. Keep up the good work and let's keep creating.

  • Miguel Bruce•240
    @FMB237
    What are you most proud of, and what would you do differently next time?

    I'm mainly proud of the way i change a desktop designes i made into a fully mobile designed.

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

    Responsiveness was more difficult than what i was imagining. But now i know always mobile first

    product-preview-card-component-main

    1
    P
    Heath Babb•60
    @hbabb

    Overall this is an excellent job. The only real issue I see is that the card dimensions are off from the original design. I'm not sure if you had access to the figma design, but it really helps with these. I like the footer you added as well. Excellent work

  • HepinSuthar•30
    @hepinsuthar
    What are you most proud of, and what would you do differently next time?

    ✅ What are you most proud of?

    I'm proud of how clean and responsive the final result turned out using Tailwind CSS.This was my first time:

    Using custom fonts via @font-face

    Customizing a Tailwind configuration for colors and fonts

    Building a fully mobile-first layout that works on all screen sizes

    The hover states and color consistency really matched the original design well.

    🔄 What would you do differently next time?

    Next time, I would:

    Set up a faster development environment using Vite or Parcel

    Write modular components (maybe with React)

    Focus more on accessibility and semantic HTML

    I also want to learn how to add dark/light theme toggling for future projects.

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

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

    One of the main challenges was configuring and applying custom fonts using @font-face. It took some trial and error to ensure the fonts loaded correctly across all weights and were picked up by Tailwind's font-family classes. I solved it by double-checking the font file paths and defining both variable and static font families in the CSS.

    Another challenge was making sure the design looked consistent across different screen sizes. Initially, the card was too wide on larger screens. I fixed this by applying Tailwind’s max-w-xs and mx-auto classes to constrain width and center the card.

    Lastly, getting the hover states and color contrast right was a bit tricky. I used Tailwind's custom color configuration and added manual hover styles in the CSS to achieve the desired interaction.

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

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

    One of the main challenges was configuring and applying custom fonts using @font-face. It took some trial and error to ensure the fonts loaded correctly across all weights and were picked up by Tailwind's font-family classes. I solved it by double-checking the font file paths and defining both variable and static font families in the CSS.

    Another challenge was making sure the design looked consistent across different screen sizes. Initially, the card was too wide on larger screens. I fixed this by applying Tailwind’s max-w-xs and mx-auto classes to constrain width and center the card.

    Lastly, getting the hover states and color contrast right was a bit tricky. I used Tailwind's custom color configuration and added manual hover styles in the CSS to achieve the desired interaction.

    🙋 Where would you like help or feedback?

    Please review the following areas and provide feedback where possible:

    • Font loading: Are the @font-face declarations and font usage optimized for performance and compatibility?

    • Accessibility: Are there areas where I could improve accessibility (e.g., contrast, focus states, alt text, semantic HTML)?

    • Responsiveness: Do all elements adapt well across breakpoints (mobile, tablet, desktop)? Any layout shifts or overflow issues I missed?

    • Tailwind usage: Am I using utility classes efficiently, or could any sections be simplified or improved with better Tailwind practices?

    • Structure and naming: Are my class names and layout structure clean, scalable, and easy to understand for future edits?

    • Font loading: Are my font loading practices optimal for performance?

    • Accessibility: Are there any accessibility improvements I could make (e.g., keyboard navigation, color contrast, semantic HTML)?

    • Responsive behavior: Does the layout scale well on all screen sizes? Are there any issues on tablets or large desktops?

    • Tailwind configuration: Is my use of custom tailwind.config and utility classes clean and efficient?

    • Code structure: Could I organize or name my classes better for clarity and reusability?

    • Font loading: Are my font loading practices optimal for performance?

    • Accessibility: Are there any acce

    Responsive Social Links Profile Card with Tailwind CSS

    #accessibility#tailwind-css
    1
    P
    Heath Babb•60
    @hbabb

    Feedback from a developer that just completed this project

    Clean code

    - Excellent job writing some very clean code
- Easy to read and understand

    The good

    - Interesting choice of using tailwind without a framework, I might have to try that sometime. I personally use Vite or Next with tailwind for the majority of my projects.
- The @font-face is mostly correct, but I believe the url is slightly off, the font directory is inside the assets directory

    The Ok but could be improved

    - By using max-w-* in Tailwind, you are fixing the width of the card. Try setting this up as a mobile first design.
  - Wrap the card in a div with a max width for the desktop
  - Use tailwind w-full on the card
  - max-w-* for mobile on the card
  - lg:max-w-* for desktop

    By doing this, you will have the breakpoints from tailwind correctly set on the card. As it is right now, the card is too small on a desktop screen.

    Excellent job overall, one final note though it may have been a design choice by you. The colors are a little off from the design. Keep up the good work and keep building. Hope we can work together on projects in the future.

  • P
    Ricardo Geada•100
    @RicardoGeada
    What specific areas of your project would you like help with?

    I'm happy to receive feedback on any part of the project. Feel free to share thoughts on code structure, UI/UX, or anything else you notice.

    Recipe Page with React, TypeScript and SCSS

    #react#typescript#sass/scss
    1
    P
    Heath Babb•60
    @hbabb

    I think this was a great job. It looks like you had some of the same issues I did with getting the image and spacing size exactly like the design, but you can really only see it with the comparison viewer.

  • P
    Heath Babb•60
    @hbabb

    Looking good

    Looks very close to the design

    • I think maybe the padding and margin are a little different
    • Looks like the avatar is slightly smaller than design
      • You could use size: XXpx; to set both the height and width
      • You would then need to set the photo to cover with rounded full

    Suggestion

    • Make it personal and use the base in your portfolio
  • P
    Heath Babb•60
    @hbabb

    I think this is looking good, but as with my own project, there are things to improve.

    • Learning should be gray-950 (Not sure if this was a design change or just overlooked it, but I do like the white)
    • I noticed that you didn't import the Figtree font into the CSS or HTML, doesn't this default the font to the system sans-serif?
    • It appears that the sizing is a little off from the design files. If you are guessing from the jpegs, that would account for this.

    Other than these small things, I think you have done an excellent job. Hope we can work together on some projects in the future.

View more comments