Skip to content
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

Latest comments

  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    0
  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted about 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
    1
View more comments