P
@emawid
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
Time tracking dashboard
#tailwind-css#typescript#viteSubmitted 2 months agoI’d be curious to learn if there’s a more efficient or idiomatic approach to re-rendering content without fully rebuilding the DOM structure.
If there’s a cleaner solution — especially leveraging TypeScript more deeply — I’d be very interested in seeing how it could be implemented.
Newsletter sign-up form with success message
#tailwind-css#typescript#viteSubmitted 2 months agoCurrently, I am resetting the application state by triggering a page reload via an <a href=""> element. I would like to find a more elegant solution using TypeScript, such as resetting the state without a full page reload. However, my current knowledge of TS is not sufficient to implement this yet.
<a href="">Dismiss message</a>Article preview component
#typescript#tailwind-cssSubmitted 3 months agoThe code ended up cluttered with too many utility classes — perhaps it would be better to extract styles for specific component states into separate definitions.
Meet landing page
#tailwind-cssSubmitted 3 months agoOverall, I’m satisfied with the new experience of working with this framework, though it’s clear I still need more practice.
Testimonials grid section
#sass/scss#bemSubmitted 3 months agoI 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.
Four card feature section
#sass/scss#bemSubmitted 3 months agoWhat tools do you use to make life easier when a Figma layout isn’t available, or when it lacks a consistent design system
Latest comments
- @bulhakovolexii
Hi, this is a great piece of work! I really like the responsive layout and how closely it follows the design mockup. I only have a few minor suggestions that you might find useful.
Firstly, the buttons are missing the cursor-pointer and hover state styling, which could make them feel non-interactive to users. Adding those would improve the UX and visual clarity.
As for the content replacement — you’ve implemented it very well. However, fetching data on every update might be a bit resource-intensive. I’d recommend fetching the data once and then dynamically updating the cards based on that cached dataset.
Additionally, you could consider pulling the headings from the fetched data too, rather than hardcoding them. This would make your layout more flexible and future-proof, especially in case the server-side data structure changes.
Great job overall, and best of luck with your next projects!
Marked as helpful - @beasta07@bulhakovolexii
Hi, great job! The core functionality works correctly, but I would like to offer a few suggestions regarding the design and code quality.
I noticed that the font for the heading didn’t load properly — it seems like you accidentally referenced “RoboRto” instead of “Roboto”.
Also, it looks like the mobile version of the layout is not fully implemented. It would be better to remove the border-radius on mobile screens and replace the image with a mobile-optimized version. Additionally, it seems that hover and focus states for the button are missing, as well as the invalid input field styling when a user submits incorrect data.
Finally, it’s generally not a good idea to leave
console.logstatements in production code. I recommend removing them before publishing the project publicly. - @bulhakovolexiiWhat 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:
What specific areas of your project would you like help with?<div id="share-popup" class="data-[open=true]:h-full"> </div>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.
@bulhakovolexiiThank 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-fathy3010What 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
@bulhakovolexiiHi! 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@ReiRevWhat 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.
@bulhakovolexiiHi! 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@DasaruWhat 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.
@bulhakovolexiiGreat work! The design match is very close. I have just one small note — you forgot to add the quotation mark image as a
background-imageon 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
