Skip to content
OverviewSolutions
4
Comments
10
Talisson
@talissoncosta

All comments

  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Try to use

    min-height: 100vh; on your body tag.

    I hope it helps :D

    0
  • Saul Aranguiz•10
    @saranguiz92Submitted over 1 year ago

    The most difficult for me was the positioning because I am still learning how to use it. Also, the code is a bit disorganized. I would like to know how to group the classes in a better way to apply the attributes.

    QR Card with Flexbox

    2
    Talisson•190
    @talissoncostaPosted over 1 year ago

    Hey @saranguiz92, congrats for your solution.

    I've got some tips to you..

    1. Try to apply css to each class individually... even if you are duplicating some props it is gonna be better because it is gonna be explicit to you and later on you can figure out how to handle it.. now you are grouping too much and many of styles are being overwritten.

    2. As you are already using flexbox you can use gap here instead of a <br>

    Anyway, that is a great start, soon you are getting used to flexbox and you will see how helpful it is.

    I hope it helps... Happy coding

    Marked as helpful
    0
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Yep.. let's see :D

    I see that you applied a gap on qr-container

          <div class="qr-container">
        <img src="./images/image-qr-code.png" alt="QR code" class="qr-image">
        <--- It will generate a gap here, between `image` and `text-container`, which is pretty good, you don't need margins between the itens, and also if you need to add a new item inside `qr-container` it will get the same space, making it consistent --->
        <div class="text-container">
          <h1 class="title">Improve your front-end skills by building projects</h1>
          <p class="subtitle">Scan the QR code to visit Frontend Mentor and take your
            coding skills to the next level</p>
        </div>
      </div>

    So the that is a great start using gap congrats!! :D

    Let's check your css...

    .title,
.subtitle{
    margin:0; 
    padding-inline:28px; // what if instead of setting a padding here, you set the same width as you've set on the img ? on `text-container` =>   `width: 90%` and apply  `text-align: center`

    text-align: center;  // so it could also be removed
}
.title{
    margin-bottom: 20px; // you could remove this margin, just applying gap on `text-container`

    font-size: var(--title);
    font-weight: 700;

    color:var(--dark-blue)
}
.subtitle{
    margin-bottom: 40px; // instead of margin, try to explore padding. In order to achieve this, you could just add a `padding: 40px` on `text-container`

    font-size: var(--pharagraph);
    font-weight: 400;

    color:var(--grayish-blue);
}

    I hope it helps!! ping me if you need extra help :D Happy coding!

    Marked as helpful
    1
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Hello @NourElDinEmad

    First of all, congrats for your solution. I've got some tips for your:

    1. Use semantic tags. You should use the tag main to wrap up your solution.
    2. Use a h1 instead of a h3. It will help screen readers to understand where is the title.
    3. Avoid using tag name on your styles. Although it works, it is not a good practice. Use classes or ids instead.
    4. Border-radius does not seem to be accurate, you are using 10px for the img and the card. Nevertheless, on the designs the border radius for the image seems to be less than it is on the card.
    5. Try to explore flexbox in your next projects. As soon as you get used to it you will see how it is helpful, you will write a better code, more concise and easier to manage.

    I hope it helps Happy coding! :D

    Marked as helpful
    0
  • Santiago•80
    @Trianon27Submitted over 1 year ago

    after a long time I come back with these challenges which gives me the inspiration to continue with my learning. I would like to continue with this challenge is right to resume this habit.

    results-summary-component

    1
    Talisson•190
    @talissoncostaPosted over 1 year ago

    Hey @Trianon27

    Congrats for your implementation... If you are open to some suggestions I've a few for you..

    1. Avoid using tag name as a reference on your styles. Although it works fine, it is not a good practice and you shouldn't use it on real projects.
    2. I see you already use flex but still have a lot of margins.. try to explore gap, It is gonna make your code more concise and easier to manage.

    I hope it helps Happy coding! :D

    Marked as helpful
    0
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Hey @Saint-dev

    I've got some tips to you..

    1. Use semantic tags
    2. Use grid or flexbox instead of setting your elements as absolute.
    3. Explore the usage of paddings instead of setting your elements as absolute.

    I hope it helps :D

    0
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Hello @Ataize Congrats for your first project. I just have small tips for now..

    • Avoid using tags (h1, body, p) to refer in your styles. Although it works, it is really dangerous to use it on real projects. So, try to use classes or even ids to refer your elements in the css file.
    • Texts are not properly centered

    I hope it helps.

    Happy coding! :D

    Marked as helpful
    0
  • Matheus•240
    @MatheusVSNSubmitted over 1 year ago

    This challenge is the hardest one so far for me, it took me hours to finish, but was worth in the end as I'm not familiarized with both libraries/tools. Any feedback is welcome 😁

    Tip calculator app using React and TailwindCSS

    1
    Talisson•190
    @talissoncostaPosted over 1 year ago

    Hey @MatheusVSN Congrats for the solution. I just have some small tips.

    1. Break it into small components. In my view, all the comments on Main container could become a separated component.
    2. I see that you are using flex in some components. My opinion is that you should use more, and also explore the usage of flex + gaps it will help you to level up and you won't need to use margins in everywhere. It will make your projects more consistents and easy to manage.
    Marked as helpful
    0
  • thiCha•10
    @thicha0Submitted over 1 year ago

    I always end up tweaking pixels during frontend development, is it a good thing ? Should I use percentages sometimes ? Is there a rule about border-radius for example ? Here I have 20px for the container card and 15px for the image inside. I try different combinations of pixels and I leave the ones that "feel" to fit.

    QR Code component using HTML and CSS

    3
    Talisson•190
    @talissoncostaPosted over 1 year ago

    Hello @thicha0 Congrats for the solution. It seems to be great. About your questions...

    1. Pixels is a great approach, it makes your UI more consistent. Percentages sometimes is hard to manage.
    2. There is no rule related to border-radius, at least I don't know yet. I think you made good usage of it, they are different from each other. I would just suggest you have a look on the The 8-Point Grid. It really worth to get used using this system, it will make your designs more consistents.

    Feedback

    1. You could replace your the element on your qr-code-title to be a h1 instead of a p it is the main text on the screen and using an h1 here will improve accessibility, helping the screen readers understand where is the title in your component.
    2. Take a look on how to use flexbox in your projects it will help you lot and take you to another level. (Most of places you don't need margins, you can use gap to make your layout more consistent and easy to manage).
    3. Also, use the semantic tags to improve your solution... use the tag main to wrap up your main implementation and the tag footer on the footer.
    <body>
<main>
  <div class="qr-code-card">
    <img class="qr-code-img" src="./images/image-qr-code.png" alt="QR code">
    <div class="qr-code-text">
      <h1 class="qr-code-title">Improve your front-end skills by building projects</h1>
      <p class="qr-code-subtitle">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/thicha0">Thicha</a>.
  </footer>
</body>
    Marked as helpful
    2
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Hello, the solution seems to be nice. I just have some tips:

    1. Use semantic tags. You should use the tag main to wrap up your solution.
    2. As you are using flex try to use gap instead of margins
    3. Design 3.1. The QR Code image border-radius seems to be different from the container on the designs and on your implementation it seems to be the same. It seems to be a bit off to me. 3.2 Text seems to be wider than the image. Try to set the text same width as the image and use padding to adjust the spacing around.

    Congrats for the solution and for great use of css variables. I hope it helps.

    Marked as helpful
    1