Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
26

Kyrylo Haiduk

@superpooperxxxKyiv, Ukraine420 points

Hi, my name is Kyrylo Haiduk a Front-end dev from Kyiv, Ukraine🇺🇦⁣ Knowledge: HTML5/CSS3, Sass, React/Redux, Git/Github, SQL⁣

I’m currently learning...

React/Redux, GSAP

Latest solutions

  • Planets facts using React, Sass and GSAP

    #gsap#react#sass/scss#bem

    Kyrylo Haiduk•420
    Submitted over 2 years ago

    0 comments
  • Mobile friendly card details form using React.js and Sass

    #react#sass/scss#bem

    Kyrylo Haiduk•420
    Submitted over 2 years ago

    1 comment
  • QR Code card implementation using HTML5 and SASS

    #sass/scss

    Kyrylo Haiduk•420
    Submitted over 2 years ago

    1 comment

Latest comments

  • João Pedro Damaceno•10
    @Damacenno
    Submitted over 2 years ago

    QR code component

    1
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hi, good job on making this task🔥

    • Usually centering is done by flex
    display: flex;
    justify-content: center;
    align-items: center;
    

    You can study more HERE

    • alt attribute is crucial for search engines and screen readers.
    ❌
    <img src="images/image-qr-code.png">
    ✅
    <img
      src="images/image-qr-code.png"
      alt="QR Code leading to frontendmentor.io"
    >
    
    • <b> tag is useless, forget it. If you need to make something bold use font-weight property. Also check out <strong>

    Happy coding❤️ Hope this was helpful

    Marked as helpful
  • David Gichuru•360
    @dxiDavid
    Submitted over 2 years ago

    Single price grid component using Flexbox

    1
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hi, good job on making this task🔥

    • I highly recommend you to think of naming classes better. Imaging this card as a part of a big website Examples
    ❌ Details for what ? Can you potentially name something else just 'details'?
    <div class="details">
    
    ❌ Bottom of what ? Can you potentially name something else just 'bottom' ?
    <div class="bottom">
    
    ❌ Duration of what ? Can you potentially name something else just 'duration' ?
    class="duration">
    

    I think you got the idea, this tip will make your code look more professional I recommend studying BEM methodology

    Happy coding❤️ Hope this was helpful

    Marked as helpful
  • Boots 😺•1,610
    @adityaphasu
    Submitted over 2 years ago

    Clipboard-landing-page

    #sass/scss
    1
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hey, good job on making this task🔥

    I don't see any problems with footer, it is at the bottom of the page already. Maybe I didn't get the question.

    Quick tips

    • As I see you are using BEM. I highly recommend creating separate file for each BEM block (_header.scss, _about.scss etc) and put them in components folder. This will look more professional

    Happy coding❤️ Hope this was helpful

    Marked as helpful
  • Tryt4n•940
    @Tryt4n
    Submitted over 2 years ago

    Interactive Card Details Form with SASS and little REGEX

    #accessibility#sass/scss#bem
    1
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hi, awesome job🔥 Going to study, how you implemented validation

    • I believe you can make it with css background-image, without unnecessary <div>
    ❌
    <div class="background-image"></div>
    
    • Also, implement this with pseudo-element ::before/::after. This will look more professional, they were created for decorative stuff.
    ❌
    <div class="card__front--circles">
      <span aria-hidden="true" class="circle circle__big"></span>
      <span aria-hidden="true" class="circle circle__small"></span>
    </div>
    
    • Speaking of BEM.
    • First of all, would be more correct to have 2 separate blocks .front-card and .back-card as they are logically separate components
    • Also you have misunderstanding of modifiers
    ❌
    <div class="card__front--text">
    ✅
    <div class="front-card__text">
    

    Modifier is usually an adjective (what size? what color?) or Boolean value

    ❌
    <span aria-hidden="true" class="circle circle__small"></span>
    ✅
    <span aria-hidden="true" class="circle circle--small"></span>
    

    Happy coding❤️ Hope this was helpful

    Marked as helpful
  • Michel Moreira•300
    @michel-moreira
    Submitted over 2 years ago

    NFT card component using semantic HTML5 markup and CSS Flexbox

    1
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hi, good job on making this🔥 UI looks awesome

    Suggestions about code structure and readablity⬇️

    • Split tags that have 3+ attributes in multiple lines. That would look more professional.
    ✅
    <img
      src="src/images/image-equilibrium.jpg"
      alt="Equilibrium NFT"
      class="image"
    >
    
    • Improve your class naming. When you want to name a class like this class="duration", ask your self a question: Can I potentially name something else later in the project "duration". Get used to name classes appropriately, I recommend studying BEM Methodology

    Happy coding❤️ Hope this was helpful

    Marked as helpful
  • Adnan Haydir•70
    @adnanhaydir
    Submitted over 2 years ago

    QR Code Component with HTML CSS and FLEXBOX

    #sass/scss
    2
    Kyrylo Haiduk•420
    @superpooperxxx
    Posted over 2 years ago

    Hi, good job on making this project🔥

    • You are using <section> incorrectly. <Section> is some huge part of website, for instance "Testimonials", "Contacts", "About us" and so on. In this project you actually have only one section which is this hole project.
    <section class="qr-image">❌
      <img src="images/image-qr-code.png" alt="" />
    </section>
    <section class="text">❌
      <h1>Improve your front-end skills by building projects</h1>
      <p>
         Scan the QR code to visit Frontend Mentor and take your coding
         skills to the next level
      </p>
    </section>
    
    ✅
    <section class="container"
     ...
    </section>
    
    • Always give alt description to image elements. Those are crucial, as they replace the image if it is broken or cannot load with text in alt.
    ✅
    <img
      src="images/image-qr-code.png"
      alt="QR code to move to frontend mentor website"
    />
    

    Happy coding❤️ Hope this was helpful

    Marked as helpful
View more comments
Frontend Mentor logo

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