Skip to content
OverviewSolutions
8
Comments
11
P

tasosbeast

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

Latest comments

  • P
    tasosbeast•150
    @tasosbeast

    Great job overall! The structure looks solid, and you're clearly paying attention to detail. One small thing I noticed: I wasn’t able to find a link to your GitHub repo for this project—might just be missing it, but it's helpful to include for easier review.

    Also, it looks like there’s a bit less padding around the card compared to the design. That’s causing the text inside to feel a little more cramped and slightly off from the intended spacing. It’s a very minor issue, but tweaking it would bring things even closer to pixel-perfect. Keep it up—you're doing really well! 🙌

    Marked as helpful
  • P
    tasosbeast•150
    @tasosbeast

    Really solid work overall! The layout feels clean, and everything is nicely structured. Just one small thing to improve: there seems to be a bit less margin or padding between the logo and the header. Adding a little more spacing there would give everything a bit more breathing room and polish. Keep up the great work—you're really close to perfection! 💪

    Marked as helpful
  • Ezequiel•1,250
    @3eze3
    What are you most proud of, and what would you do differently next time?

    🌟 Hello community! My name is Ezequiel and this is my solution for this challenge. 🍔

    🔧 I built this project using the following tools and techniques:

    • HTML5: For the structure of the site.🍜

    • SCSS/CSS: For styling and bringing each element to life.🎨

    • BEM notation: For clean and maintainable code. 🎈

    • Adaptive design: Ensuring an optimal experience on all devices. 📱

    • TS: To manage the menu logic in mobile 🍳

    This project was a challenge, in terms of grid made me feel very frustrated, but I solved it, I think the grid is well applied, also if anyone has any corrections on my design and code is welcome. 🍟

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

    I hope my solution will inspire and motivate others to move forward in their learning journey. 🛝

    All feedback is welcome 👁️

    News Homepage Main (Grid Layout) 🦷

    #accessibility#animation#bem#typescript#sass/scss
    1
    P
    tasosbeast•150
    @tasosbeast

    Awesome job!
    You're really nailing it 👏 Just a couple of small things I noticed:

    1. The big red "Read More" button isn’t showing the pointer cursor, so it doesn’t feel clickable. Also, the padding's a tiny bit different from the others—nothing major, just a little off.

    2. Looks like the background color is slightly different than expected—not a big deal, just worth noting.

    Overall though, seriously great work. Keep it up! 😊

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

    In this task, I tried using Tailwind for the first time. I had to apply quite a few different approaches that were new to me. For example, I started by overriding some default variables to match the design:

    @theme {
  --font-sans: "Red Hat Display", sans-serif;

  --color-cyan-300: oklch(0.87 0.0868 215.42);
  --color-cyan-500: oklch(0.76 0.0827 215.89);
  --color-cyan-600: oklch(0.62 0.075853 216.1335);

  --color-white: #fafafa;

  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.1;
}

@layer theme {
  body {
    @apply text-slate-900;
  }
}

    Some repeating elements had to be extracted into components. For example:

    @layer components {
  .img {
    @apply min-h-36 rounded-lg object-cover md:min-h-40 lg:min-h-64;
  }
}
    What challenges did you encounter, and how did you overcome them?

    Initially, I built the page without following a mobile-first approach, which made working with breakpoints inconvenient. So I restructured the layout starting from the mobile design.

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

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

    Meet landing page

    #tailwind-css
    1
    P
    tasosbeast•150
    @tasosbeast

    overall pretty close nice !! some considerations : i think that the borders on the step indicator should be slate-300 and u used slate-600 and on footer and general you have some subtle padding diffrences in tailwind you can use for example pb-[12px] and put your own values but all that is minor and if you dont have the figma file is difficult to match exactly the design so overall great job

    Marked as helpful
  • P
    tasosbeast•150
    @tasosbeast

    Semantic HTML: The components use appropriate HTML elements for structure (div, p, section), but could be improved by using more semantic elements like article, header, footer, and main. Example: Using article for individual testimonials and header for the heading sections would improve the semantic structure.

    Component Reusability: There is some duplication in the testimonial components. Consider creating a reusable TestimonialCard component to reduce repetition and improve maintainability.

  • P
    tasosbeast•150
    @tasosbeast

    its diffrent layout from the design but i like it !! consider using more spacing

View more comments