Skip to content
OverviewSolutions
9
Comments
14
P

Olexii Bulhakov

@bulhakovolexiiKharkiv, Ukraine240 points

Front-end developer • Graduate teaching assistant at NTU «KhPI»

I’m currently learning...

I’ve been working in front-end for two years now, but I still don’t feel fully confident in my skills. That’s why I decided to go through all the learning paths from start to finish — to consolidate and systematize my knowledge.

Latest solutions

  • Article preview component

    #typescript#tailwind-css
    P
    Olexii Bulhakov•240
    Submitted 13 days ago

    The code ended up cluttered with too many utility classes — perhaps it would be better to extract styles for specific component states into separate definitions.

    2 comments

  • Meet landing page

    #tailwind-css
    P
    Olexii Bulhakov•240
    Submitted 16 days ago

    Overall, I’m satisfied with the new experience of working with this framework, though it’s clear I still need more practice.

    1 comment

  • Testimonials grid section

    #sass/scss#bem
    P
    Olexii Bulhakov•240
    Submitted 17 days ago

    I had issues with some cards being overlapped by the shadows of cards that are higher in the document flow. I was able to resolve this by manipulating the order property.

    2 comments

  • Four card feature section

    #sass/scss#bem
    P
    Olexii Bulhakov•240
    Submitted 19 days ago

    What tools do you use to make life easier when a Figma layout isn’t available, or when it lacks a consistent design system

    1 comment

  • Product preview card component

    #sass/scss#bem
    P
    Olexii Bulhakov•240
    Submitted 21 days ago

    What tools do you use to make life easier when a Figma layout isn’t available, or when it lacks a consistent design system?

    1 comment

  • Recipe page

    #sass/scss#bem
    P
    Olexii Bulhakov•240
    Submitted 22 days ago

    Additionally, while comparing the project with the references using the Pixel Perfect Chrome extension, I noticed that the mockups included in the project starter pack did not match the designs in Figma. Therefore, I decided to follow the Figma files instead of relying on the mockup images.

    1 comment
View more solutions

Latest comments

  • P
    Olexii Bulhakov•240
    @bulhakovolexii
    What are you most proud of, and what would you do differently next time?

    This was my second project using Tailwind and my first using TypeScript. I understand that TypeScript doesn’t offer much advantage for such a simple task, but since I already have solid experience with vanilla JavaScript, I decided to switch to a typed language.

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

    The biggest issue I encountered was the inability to override styles using additional Tailwind classes. To make the tooltip’s visible state classes more specific, I had to switch not the class in TypeScript, but use custom attributes instead:

    <div id="share-popup"
     class="data-[open=true]:h-full">
</div>
    What specific areas of your project would you like help with?

    The code ended up cluttered with too many utility classes — perhaps it would be better to extract styles for specific component states into separate definitions.

    Article preview component

    #typescript#tailwind-css
    2
    P
    Olexii Bulhakov•240
    @bulhakovolexii

    Thank you very much for the feedback! I used the SVG icons from the project files and inserted them as inline code so I could change their color depending on the state. Your comment made me realize that this could have been achieved more simply by adding opacity to the icons. Thanks — this approach will definitely result in cleaner code.

  • P
    mohamed-fathy3010•160
    @mohamed-fathy3010
    What are you most proud of, and what would you do differently next time?

    First time using tailwind

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

    understanding how tailwind works and how it is configured specially version 4

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

    any feedback is appreciated

    Article Preview component challenge

    #typescript#tailwind-css
    1
    P
    Olexii Bulhakov•240
    @bulhakovolexii

    Hi! Great work — the design alignment is excellent. The only issue is that responsiveness breaks a bit if you trigger the tooltip first and then resize the viewport.

    It’s interesting that you used a <template> for deferred tooltip rendering.

    However, it might be worth trying to use a single button as the trigger instead of two. This can be achieved purely with CSS by positioning one button above the tooltip using z-index.

  • P
    ReiRev•290
    @ReiRev
    What challenges did you encounter, and how did you overcome them?

    What a complicated design! At first, it seemed simple, but actually it wasn’t.

    In this project, the image layout was the most difficult part. I had to use z-index, relative position, and other CSS techniques. I considered using background-blend-mode, but I found that it wasn’t suitable.

    Tailwind CSS (CDN)

    #tailwind-css
    1
    P
    Olexii Bulhakov•240
    @bulhakovolexii

    Hi! Great job. I also practiced using Tailwind while working on this project.

    Overall, everything looks good, but I noticed you haven’t yet tried using custom classes for components that are used more than once. You can do it like this:

    @layer components {
  .img {
    @apply min-h-36 rounded-lg object-cover md:min-h-40 lg:min-h-64;
  }
}

            <img
          class="img"
          src="./assets/desktop/image-woman-in-videocall.jpg"
          alt="Woman in videocall"
        />

    Hope this helps!

    Marked as helpful
  • P
    Dallas•160
    @Dasaru
    What are you most proud of, and what would you do differently next time?

    I am happy with the way the transitions turned out between the different layouts.

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

    I found a minor issue with the box shadows clipping on top of other elements that were too close. It was a bit counter-intuitive but I was able to fix it by giving each element a background color.

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

    I would like help with my CSS tablet and desktop styles. I used nth-child and grid area labels to align things properly and I feel like it could have been written cleaner.

    Testimonials Grid Section

    #bem
    1
    P
    Olexii Bulhakov•240
    @bulhakovolexii

    Great work! The design match is very close. I have just one small note — you forgot to add the quotation mark image as a background-image on the purple card in the background.

    Also, to prevent the footer from shifting the entire layout upward relative to the page, I recommend positioning it absolutely in relation to the whole page.

    I also noticed that you’re specifying display: grid; in every media query — this isn’t necessary, since the property is inherited from other viewport widths.

    Best of luck!

    Marked as helpful
  • P
    Olexii Bulhakov•240
    @bulhakovolexii

    Great work! It’s awesome that you used a modifier like --orange for the card colors — I somehow didn’t think of that myself.

    The file organization is decent, but it might be easier to navigate the project if the .css and .scss files were placed in separate directories.

    I think it’s also worth spending some more time on responsiveness — currently, at intermediate screen sizes, there’s horizontal scrolling due to the container for the cards having a fixed width.

  • P
    Olexii Bulhakov•240
    @bulhakovolexii

    Hi! Congratulations — from what I can see, you did a great job!

    I really like how you organized your SCSS files and moved all variables into separate documents. The only suggestion I have is that it would be more convenient if the file names were in English.

    I also noticed that in your typography settings file, there’s a commented-out line setting the root font size to 14px. That’s likely the main reason the entire project looks slightly smaller in scale compared to the provided design. Hopefully, uncommenting that line will fix it. It might also be a good idea to review the codebase for any unnecessary comments.

    Best of luck!

View more comments