Skip to content
OverviewSolutions
3
Comments
26
Kyrylo Haiduk
@superpooperxxx

All comments

  • João Pedro Damaceno•10
    @DamacennoSubmitted almost 2 years ago

    The hardest thing for me, as a newbie, is to center the elements on the screen, I always suffer.

    Please feel free to give me feedback.

    QR code component

    1
    Kyrylo Haiduk•420
    @superpooperxxxPosted almost 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 almost 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
  • Boots 😺•1,590
    @adityaphasuSubmitted almost 2 years ago

    Hi everyone! This is my first time using Sass, I would appreciate any helpful tips or advice that anyone could share.

    Clipboard-landing-page

    1
    Kyrylo Haiduk•420
    @superpooperxxxPosted almost 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 almost 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 almost 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 almost 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
  • Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, Fatima, good job on making this project, looks accurate to design.

    I've got a couple of comments to improve your code🔥

    • Give more descriptive name for your classes. Why ? Believe me, after 1 month you would not understand which block is .part1 or .part2, etc, especially if the project was bigger.

    • You definitely can replace this with only one styled with CSS <p> tag.

    ❌
<div class="paragraph">
  <p>Tutorials by industry experts</p>
  <p>Peer & expert code review </p>    
  <p>Coding exercises</p>
  <p>Access to our GitHub repos</p>
  <p>Community forum</p>   
  <p>Flashcard decks</p>    
  <p>New videos every week</p>   
</div>

    ✅
<p>
  Tutorials by industry experts <br>
  Peer & expert code review <br>
  Coding exercises <br>
  Access to our GitHub repos <br>
  Community forum <br>
  Flashcard decks <br>
  New videos every week 
</p>

Happy coding❤️ **Hope this was helpful**
    Marked as helpful
    0
  • Adam Esmurziev•90
    @EsmurzellySubmitted almost 2 years ago

    The main problem is figma elements, that are a bit uncomfortable. I could write logical stuff for 1 day, but adaptive layout was freekly diffucult.

    As I mentioned earlier, my layout is not very well for tablets (it looks okay on Phones and Desktops).

    I would like you give me some pieces of advice after visiting my site :) Thanks for paying attendion!

    Interactive enter data of bank card on ReactJS

    2
    Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, good job on making this project🔥 It is not easy, so don't get discouraged

    I would definitely recommend you first concentrate on your CSS skills and try to remaster this project using CSS Grid as the layout in figma built with 12-column grid.

    Grid settings would take 10 rows at most, but you can achieve beautiful layout that is easy to adapt for different devices.

    I have done this project, so you can study my solution of it. One thing to notice, I used SASS instead of styled components, but you still can open my solution in Mozilla dev tools to see where and how I implemented grid.

    If you have any questions, you are welcome!

    Happy coding❤️ Hope this was helpful

    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, really great job 🔥 By first glance at your code I see that you are moving in the right direction !

    Small tips

    • I see that you are using BEM. This is incorrect ⬇️ Element cannot have own elements and seems like img is the element of element plane. So name it card__img which in code is inside card__plan. Read this
    class="card__plan__img"

    Just, so you understand better ➡️ You have block card everything inside are elements. Elements can be inside each other in code BUT class names must not display this.

    This would be correct ⬇️

            <div class="card__plan">
          <img
            class="card__img"
            src="./images/icon-music.svg"
            alt="Music tune icon"
          />
          <div class="card__plan-wrapper">
            <div class="card__plan-duration">Annual Plan</div>
            <div class="card__plan-price">$59.99/year</div>
          </div>
          <input
            type="button"
            class="card__plan-change-btn"
            value="Change"
          />
        </div>

    Happy coding❤️ Hope this was helpful

    Marked as helpful
    0
  • Luan Matheus•50
    @LuanMFCSubmitted almost 2 years ago

    A Página não está responsiva, ou seja, a estética só fica legal no computador. Ainda estou aprendendo então relevem algumas coisas. Deixem a opinião de vocês para que eu possa melhorar.

    The Page is not responsive, i.e. the aesthetics is only legal on the computer. I'm still learning, so take a few things back. Leave your opinion so I can get better.

    Detalhes de Cartão - Não Responsivo

    1
    Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, good job on trying to accomplish this not easy task🔥

    Really important notes

    • As not all programmers speak your language, please make sure you name your repository and everything in code in English. (every class, etc.)

    • I like how you make notes to navigate in your code.

    To improve the readability of your code I highly recommend to format huge lines of code like this ⬇️

    ❌ <input type="text" name="f_cnumber" class="f_cnumber" placeholder="XXXX XXXX XXXX XXXX" minlength="19" maxlength="19">

✅
<input 
  type="text"
  name="f_cnumber"
  class="f_cnumber"
  placeholder="XXXX XXXX XXXX XXXX"
  minlength="19" 
  maxlength="19">
    • If you want each input to be on new line better use css display: block, than <br><br>

    I recommend you concentrating on easier tasks to master basic styling. Don't worry, it is OK to start from basics.

    Happy coding❤️ Hope this was helpful

    0
  • Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, good job on this🔥

    I highly recommend trying to make as similar to design as possible.

    • I recommend moving icons to css and use background-image. Shortly, <img> is for actual content that has actual meaning, background-image for non-content images, like star here. Read more here

    <img src="./icon-star.svg" alt="star-icon">

    • There is a much better way to style rating buttons ⬇️
    .button-ratings{
   width: 100%;
   display: flex;
   justify-content: space-between;

   padding: **pixel values**;
}

.btn1{
    background-color: hsl(210, 5%, 17%);
    color: hsl(217, 12%, 63%);
    border-radius: 100%;
    text-align: center;
    margin-right: 15px;
    border: none;
    width: 35px;
}

    Happy coding❤️ Hope this was helpful

    Marked as helpful
    1
  • Kyrylo Haiduk•420
    @superpooperxxxPosted almost 2 years ago

    Hi, looks good🔥

    • Set background to .card as a background-image: url(/images/bg-pattern-card.svg) Get rid of this⬇️
    <div class="image"></div>
.image{
    width: 100%;
    height: 35%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: url(/images/bg-pattern-card.svg);
}
    • <body> by default has width: 100%. And better set min-height: 100vh 
    body{
    width: 100%;
    height: 100%;

    Happy coding ❤️ Hope this was helpful

    Marked as helpful
    1