Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
10
Rastislav Hepner
@raswonders

All comments

  • Mesroua Djamel•430
    @MesrouaDjamel
    Submitted 12 months ago
    What specific areas of your project would you like help with?

    I've tried to redirect to social networks when the user clicks on the icon with different methods but it doesn't work. i'm using nextJs if anyone has any suggestions.

    Responsive article preview using flexbox

    #next#react#tailwind-css#typescript
    1
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    Hi, congratulation on finishing this challenge!

    I like your take on shared component and using of inline svgs. They seem to render asap. In my solution I loaded them via <img> but they seem to have some delay to them.

    If i can give you a tip how to make experience little better I'd make ArticleCard more responsive. ArticleCard has currently fixed size which make it quite rigid and hard to reuse. One place where rigidity shows up is distorted Image, which is sized up relative to its parent while ignoring its intrinsic aspect ratio.

    I think solution in general could be to leave elements grow with their content and only cap the extremes either by putting hard stop to it with max-* or by shifting layout.

    I'd also suggest cleaning up the code a little, removing unused code, fixing spelling mistakes like setiSClicked, running code through formatter etc. This would put a little bit of shine to it and showed that you care.

    Hopefully you find my rumblings at least somewhat useful.

    Good luck with future challenges!

    Marked as helpful
  • P
    Darrick Fauvel•490
    @DarrickFauvel
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the responsive positioning and scaling of the hero image. If I were to do this project differently next time, I would probably try another JS framework.

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

    The hero image positioning is tricky. I think I've come up with an okay solution, but there might be a better way.

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

    I am open any helpful constructive feedback that will make me a better developer.

    Meet landing page - Tailwind CSS, Next.js

    #react#tailwind-css#typescript
    1
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    Hi @DarrickFauvel,

    Nicely done I like the result overall. Going over your codebase I found it very interesting that you divided components into different responsive views. I never thought about that. Also, I liked how you've extended tailwind config with fluid typography, I will probably steal that.

    I don't have many tips, only that you can prevent button's content from wrapping by using whitespace-nowrap. And that at width 980px, your layout is breaking as it is not edge-to-edge anymore and then again is. This doesn't look all that pleasant. In my opinion thing to remember is not to strain the design too much with fixed widths. Let it breath even if it means going beyond its original proportions.

    Hope my note will help you in some way.

  • Mesroua Djamel•430
    @MesrouaDjamel
    Submitted 12 months ago

    Responsive Testimonials using Grid

    #tailwind-css#react
    1
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    Hey @MesrouaDjamel,

    Congrats on finishing the challenge! I like the result overall. Thing I'd would try to improve though is code quality in ListTestimonialCard. It can get quite messy when you keep data together with code like this, also the conditional rendering logic could use some simplification as well.

  • Jackson-zablon15•330
    @Jackson-zablon15
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of using grid to make the layout

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

    I encountered the challenge of styling space between paragraphs and component as their appear in the design. How to know the current space between paragraphs so i can know the amount to add up for example i could set margin of paragraphs to zero but still there was some space between them making it difficult to know the space to add so as they could look like in the design. I used developer tool.

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

    I would like help on best ways how to style and calculate space between paragraphs. Is good to use margin, gap or other ways?

    Four-card-web

    2
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    Hi @Jackson-zablon15,

    you've created nice solution. The way you handled the top stripes on those feature cards inspired me 🕵️‍♀️ and I reimplemented mine too .

    Regarding the spacing inside feature cards I'd handle it slightly different. It's better when header of feature is sticking to the start of the flex container and icon to the the end of it. You already using flexbox so its as easy as removing those margins and setting items-justify: between on your flex container.

    Regarding layout shift, i'd propose to use larger width when shift happens. Currently it shifts prematurely and horizontal scrollbars appear between 750px...1150px

    Hope this note will help you in some way.

  • Sean H•90
    @Sean-LH
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of 3 things. 1. Finishing or at least completing this project. I know it's a small one, but it has been a while since I've completed something here. 2. How good the spacing is for the elements. 3. Implementing some functionality with react and typescript in my button element.

    Next time, I will consider both the mobile and laptop screens when deciding how to establish components.

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

    My biggest challenge had been the positioning for the main card, and how to space the elements within the card. I took my time looking for helpful resources and videos about positioning and spacing.

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

    I'm not 100% sure if my spacing is exactly like the example given, so I am open to hearing about that. Specifically, the section that has item details.

    Product Preview Card project

    #react#typescript#vite#web-components
    1
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    Hi @Sean-LH,

    congrats on finishing this solution! I like you approach regarding, responsiveness of an image, it works great here.

    Overall solution looks good on desktop but it falls short on extra wide displays or when I'm resizing from mobile to tablet. I think main culprit here is that you've decided to use absolute positioning as layout building tool. There are much better alternatives like a flexbox or grid. With flexbox page container you can easily control positioning of your card across devices of all sizes. You can also add some margin so there is breath room around the card on small devices.

    Hope i made a sense and it gave you right idea Cheers

    Marked as helpful
  • P
    Carlos Santana•260
    @cacesasa
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy that I was able to finish this challange with no mayor hurdles.

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

    Nothing that I can think of this time.

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

    I'm open to comments and suggestion that will help me to improved as a developer. Thanks

    Responsive product preview card

    2
    Rastislav Hepner•180
    @raswonders
    Posted 11 months ago

    I like your solution, namely how you solved image responsiveness with bg. I was just wondering was there particular reason you went with span instead of div in here?

     <div class="image-container">
            <span class="background-image" role="img" aria-label="Gabrielle Essence Eau De Parfum image"></span>
     </div>
    
  • LuciusCat•40
    @LuciusCat
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Estoy orgulloso de que cada vez me acoplo mejor a react

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

    Desafíos un poco con los componentes de tablas

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

    Creo que me quedó bien

    Página responsiva usando TS y React

    #typescript#react
    1
    Rastislav Hepner•180
    @raswonders
    Posted about 1 year ago

    Hi, I like your work. I had look on your code, it's very neat and organized. I particularly like the component index I'll probably steal that :-). I'd only point out that on wide displays the design gets little too wide. Fix here would be pretty easy just simple max-width on recipe div. Also noticed that mobile gets little crammed together and overflows. Simple layout shift could solve this.

  • Filip Juszczak•710
    @filipjuszczak
    Submitted about 1 year ago

    Social links profile

    #react#tailwind-css
    1
    Rastislav Hepner•180
    @raswonders
    Posted about 1 year ago

    Hey Filip,

    really like your solution. It's well structured and semantically seems correct as well. Thing I liked a lot was that you created structured data and passed it in rather than hard code it. I'll try to steal this O:-). I have no criticism for your work just a thumbs up. Keep rocking. Cheers!

    Marked as helpful
  • Zai Santillan•120
    @plskz
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Blog preview card

    #react#tailwind-css#next
    2
    Rastislav Hepner•180
    @raswonders
    Posted about 1 year ago

    I like your solution, its almost pixel perfect and code is neatly organized. I've also learned about tailwind's apply directive from you. Well done. My only small concern would be regarding hard-coding height on the card. It doesn't really help here and would cause you problems with responsivity if this was a real project.

  • Hiticas Mihai•220
    @hiticas
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Proud of everything.

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

    All the challenges needed.

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

    All of it.

    QR Code Component using React Vite Tailwind

    #react#vite#tailwind-css
    2
    Rastislav Hepner•180
    @raswonders
    Posted about 1 year ago

    Hi Mihai, I like your work, almost a pixel perfect and code organization is so pristine. You inspired me and my next component will be in implemented in react as well.

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

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