Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5

Long Mai

@looonnng90 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

  • Product preview card component (HTML & CSS)


    Long Mai•90
    Submitted 6 months ago

    Still confuse about adding margins and paddings. For example, I developed for mobile-first. So, I tried to add paddings for the <main>. Then for the desktop-layout, the paddings become obsolete. Same for the margins for each of the item in <section>. I could get some help with this.


    2 comments
  • Responsive Recipe Page (HTML & CSS)


    Long Mai•90
    Submitted 6 months ago

    The more projects I do, the more I keep breaking the DRY rule. If I could improve upon this, I think it would make me better.


    0 comments
  • Social Links Profile (HTML & CSS)


    Long Mai•90
    Submitted 6 months ago

    Feels free to drop a feedback or comments! Cheers


    1 comment
  • Blog Card (HTML & CSS)


    Long Mai•90
    Submitted 6 months ago

    Any feedbacks or refactoring are welcome!


    1 comment
  • Responsive Image QR Code Card


    Long Mai•90
    Submitted 7 months ago

    Any feedback or comments are welcome!


    1 comment

Latest comments

  • Asmaa•70
    @AsmaaYaareb
    Submitted 7 months ago
    What specific areas of your project would you like help with?

    Any feedback is appreciated.

    Product preview card component

    1
    Long Mai•90
    @looonnng
    Posted 6 months ago

    Your code is very clean and organized! I'm still learning, and I was able to navigate and compare your codebase to mine. Just one small thing I noticed was "prudoct-content" class. It's working and not breaking anything, but could be confusing for later refactoring and debugging. Otherwise, really good work!

  • Kaine•100
    @Kaine665
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that this time I tried writing CSS by organizing styles according to color, li tag styles, and font order, rather than writing from top to bottom corresponding to the HTML. I will try this method again next time.

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

    I encountered issues while working with tables, as it was my first time using tables in a real challenge, and I am not very familiar with it. I learned how to use table CSS by watching others on YouTube.

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

    I would like to get your creative ideas about this project.

    nothing special

    1
    Long Mai•90
    @looonnng
    Posted 6 months ago

    I think you nailed this! The solution and design comparison is a little off-putting, but if you play around more with the spacings, the results will match up. Great work, cheers!

  • P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how closely the final design aligns with the provided mockups. The layout is clean and visually appealing, with well-organized typography and spacing. Using CSS variables for colors, spacing, and typography made the code more maintainable and scalable. Additionally, implementing responsive designs for different screen sizes ensured the layout looks great on mobile and desktop devices.

    Next time, I’d focus on improving accessibility by adding meaningful alt text to images and testing the solution with screen readers. For instance, the alt attribute for the profile picture could include a description, such as “Portrait of Jessica Randall.” I’d also explore making the buttons more interactive by incorporating hover states and animations for a better user experience.

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

    The biggest challenge was ensuring the buttons were properly responsive across all viewports, particularly on smaller screens. Initially, the buttons’ widths didn’t align correctly, so I used width adjustments in media queries to make them adapt seamlessly to narrower viewports. Another challenge was maintaining consistent padding and spacing between elements, which I overcame by using a design system with CSS variables to centralize these values and make them reusable.

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

    I’d like feedback on my approach to responsiveness, especially in ensuring consistent spacing and alignment across all devices. Additionally, I’m interested in learning if there are more efficient ways to handle button states (hover, focus, active) for improved accessibility and interactivity. Finally, I’d appreciate advice on further enhancing the project’s semantic structure and overall accessibility.

    Social links profile

    #tailwind-css
    1
    Long Mai•90
    @looonnng
    Posted 6 months ago

    I definitely agree with your thought on the perfect alignment of your solution and the design. I was struggling with that part, but I think it'll come with practice I guess. Great job on this!

    Marked as helpful
  • Ivan•160
    @Ivansol-21
    Submitted 6 months ago

    Blog-preview-card

    1
    Long Mai•90
    @looonnng
    Posted 6 months ago

    Hello,

    This solution is very good! I don't think I could spot any flaws in the design. I also like the correct usage of semantic HTML and responsive layouts. Well done!

  • P
    Prince Awuah Karikari•170
    @PRINCEKK122
    Submitted about 2 years ago

    QR Component using CSS Flexbox

    1
    Long Mai•90
    @looonnng
    Posted 7 months ago

    Everything looks good!

    In my opinion, the attribution looks better as a footer. And, you might want to make the html/body to be 100% of viewport. It'll get rid of the empty white space at the bottom - Cheers!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub