Skip to content
OverviewSolutions
5
Comments
4

Rinzet

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

  • Responsive Blog Card with SCSS and Flexbox

    #sass/scss
    Rinzet•50
    Submitted 3 days ago

    I’d appreciate feedback on the following:

    • How to further optimize my SCSS structure or naming conventions for larger-scale projects.
    • Suggestions for making the layout more scalable in case I wanted to add interactivity or expand this into a full blog page.

    Any tips for improving code readability or consistency in responsive styling would also be welcome.

    0 comments

  • QR Code Component using SCSS and Flexbox

    #sass/scss
    Rinzet•50
    Submitted 4 days ago

    Specific areas I’d like help with

    • Advanced responsive design: Tips on handling multiple breakpoints or fluid typography for better adaptability on different devices.
    • CSS Grid: While I used Flexbox effectively, I want to deepen my understanding and practical use of CSS Grid layouts.
    • SCSS best practices: Advice on modern SCSS architecture, including using @use and @forward instead of @import.
    • Performance optimization: Ideas to optimize loading times and reduce CSS payload without sacrificing design quality.
    1 comment

  • Responsive Results Summary Component with SCSS

    #sass/scss#bem
    Rinzet•50
    Submitted 4 days ago

    This was my first time using SCSS, so I’d really appreciate any feedback on how I structured my files—especially regarding mixins, partials, and maintainability.

    I’m also looking for advice on the scalability of my SCSS setup and how to better structure styles for larger projects.

    Additionally, I’d love tips on how to improve responsiveness, particularly for centering and scaling elements on very large screens.

    If there are any best practices I’ve missed or ways to make the code cleaner or more efficient, I’m all ears!

    0 comments

  • Responsive social links profile using CSS Flexbox and clamp()

    Rinzet•50
    Submitted 6 days ago

    Since this is a Frontend Mentor challenge, I’d appreciate feedback in these areas:

    • Accessibility improvements – how to better support screen readers and keyboard navigation.
    • CSS best practices – any suggestions to make my styles more efficient or scalable.
    • Design accuracy – feedback on how close I got to the original design, especially spacing, colors, and responsiveness.
    • Interactivity ideas – ways I could take the challenge further with simple JavaScript additions (like theme toggling or animations).
    1 comment

  • Responsive Recipe Page using Semantic HTML and Flexbox

    Rinzet•50
    Submitted 7 days ago
    • Improving accessibility, especially for users relying on screen readers or keyboard navigation.
    • Optimizing the responsive design for more device sizes and aspect ratios.
    • Suggestions for better CSS organization or structure for scalability.
    • Ideas for adding interactive features or micro-interactions.
    • Feedback on code quality, performance, or best practices.
    1 comment

Latest comments

  • P
    Alex•70
    @Sprees
    What challenges did you encounter, and how did you overcome them?

    I noticed at small screen sizes, in the design image the bullets on ul li tags were centered vertically with a larger block of text, as well as the ol li's had custom font applied. I applied list-style: none; to both and proceeded to make my own custom markers using ::before.

    Recipe Page CSS HTML

    1
    Rinzet•50
    @Rinzet

    Great observation on the small screen behavior of the list items. Removing the default list-style and using ::before to create custom markers was a smart move—it gives you full control over the visual alignment and styling. Your approach helps ensure consistency across devices and aligns with the design system.

    In particular, centering the custom bullets vertically with multi-line text blocks on smaller screens improves readability and visual balance. Also, applying a custom font to the ol li markers maintains branding and typographic consistency, which is often overlooked.

    One suggestion: make sure to account for proper spacing between the marker and the text, especially with responsive layouts. Consider using display: flex or adjusting line-height and padding-left to maintain alignment across breakpoints.

    Overall, excellent job taking ownership of the styling and refining it beyond the default behavior!

  • Rinzet•50
    @Rinzet

    Nice code 👍

  • P
    João Almeida•40
    @joao-almeida11
    What are you most proud of, and what would you do differently next time?

    Probably need to tweak my css reset because I'm spacing everything with CSS Flexbox/Grid, so end up having to individually remove margins.

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

    I think my CSS classes are too verbose, despite using them to self-document the elements. Does anyone know of a convention/article regarding this?

    React + SCSS

    #react#sass/scss
    1
    Rinzet•50
    @Rinzet

    Hey! First of all, great job noticing those details — that shows you're thinking like a developer already. I’ve also run into the same thing with the default spacing from browsers. Removing margins one by one can get tiring, especially when using Flexbox or Grid. I recently learned that you can add a simple CSS reset at the top of your stylesheet to clear everything out at once. Something like this really helps:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    Honestly, you're doing awesome just by thinking about these things. Keep going!

  • Rinzet•50
    @Rinzet

    Hey, here’s my take on your code:

    I really like how clear and organized your HTML structure is — it makes it easy to understand what everything does. Using Flexbox to center the content on the screen is a good move and works well.

    One thing though: your image has an empty alt attribute. This is important for people using screen readers to understand what the image is about, so it’d be great to add something like "QR code for frontendmentor.io" there.

    If you want, you could also use more semantic HTML tags, like <main> instead of a generic div for your main container, but that’s optional.

    Overall, it’s looking solid — just a few little things to polish.