Skip to content
OverviewSolutions
16
Comments
6
Humas
@dolomita28

All comments

  • Humas•250
    @dolomita28Posted over 2 years ago

    Hi Divasraj, Well done! I would only suggest you a sligth improvement. You could improve your layout adding a height:100vh to your body css, so the card gets vertically centered. Best

    0
  • Humas•250
    @dolomita28Posted over 2 years ago

    Hi @pawelpiotrowski38 Great job! I would only suggest you using a picture html tag instead of having both images and then hiding/showing them from the css file. Please see this [picture_tag] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) and even better [responsive_images] (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) Best

    Marked as helpful
    0
  • Esther•20
    @estaarrrSubmitted over 2 years ago

    A little bit of background: This is my very first challenge in Frontend Mentor; I picked up HTML and CSS through a Udemy course last year, and currently I am studying React.js. Along the way, I realized nothing is getting internalized, as I am slowly forgetting all the basics and foundations of HTML, CSS, and JS. That is why I wanted to revisit these techniques first before I move on with the rest of React.js.

    As I was working on this first challenge, I realized I did not remember the simplest thing, such as positioning and centering. There are repeated elements in CSS that need grouping but somehow doing that messes up the project. So I am submitting a rough and raw version of this challenge, to see how my first step in working on an actual project is.

    Any feedback would be appreciated. Thank you.

    QR Code Challenge using HTML and CSS

    1
    Humas•250
    @dolomita28Posted over 2 years ago

    Hi Esther, You did a great job. There can be many different solutions to achieve the same. I would only suggest you avoid using px units. It's better to get used to use %, rem or em units. You could also take advantage of flexbox techniques (which I've seen you know how to use them) even for nested containers so you don't need using margins to center items. Finally, check out the report above with some accessibility issues to get extra hints. Best

    1
  • Benolísio•60
    @prettyBcodingSubmitted over 2 years ago

    How can I apply/create the design depending on the device's screen size?

    QR Code component

    5
    Humas•250
    @dolomita28Posted over 2 years ago

    Hi, you could define a width to the bg div, so the card doesn't look so big. Then, use a padding for appliying the inner space between your card and image. You could also, instead of using margin to center containers (in this case the card), make use of flexbox. Hope it helps Best

    1
  • Arnaud HONFIN•50
    @Richy55-maxSubmitted over 2 years ago

    Hi everyone, I've just completed the "QR code component" challenge. Any feedback and suggestions on how I can improve are very welcome!

    Stats preview card component

    2
    Humas•250
    @dolomita28Posted over 2 years ago

    Hi Arnaud, Congrats for such a great work you've done! My only suggestion would be, try to avoid using pixels whenever possible. It is better to get used to use %, rem or em units. Furthermore, although there's a bit of controversial going on, it is better to load fonts earlier in the html instead of importing them in the css file. Best

    Marked as helpful
    0
  • Adeyemi Abiade•60
    @CmdlinerSubmitted over 2 years ago

    This is my solution for the order-preview-card component and is my second solution on front-end mentor. I did this one to correct the mistakes i did in the first one and improve my css. If there is any advice on how i can improve the code, i'm open for suggestions.

    Html, css

    3
    Humas•250
    @dolomita28Posted over 2 years ago

    Hi Adeyemi, Well done! You could remove the flex class at <div class="payment-amount flex"> so that these two items of that dive get closely aligned.

    Marked as helpful
    0