Skip to content
OverviewSolutions
3
Comments
3
Maksym Perekhodko
@kinqbert

All comments

  • Maksym Perekhodko•50
    @kinqbertPosted 7 months ago

    Your overall solution looks goof! But I'd also like to markup some points, you may try to improve.

    1. Try building design on Figma file. It is vital for front-end developer to know basic usage of Figma.
    2. I believe you shouldn't make QR-code stretched vertically.. It'll be best to keep it as a square
    3. Try using of padding and margin properties instead of separate margin-top, margin-bottom, margin-right etc.
    4. Avoid using too many div tags. In your code it wasn't necessary to add additonal wraps for image, next and para.
    5. [Non critical] Use more specific class names. For me, it was kinda tough to understand what next and para were, but it could happen because it is written in you language I don't understand :D

    That's all issues I could find looking at your code and site. Good job! Love your solution!

    Marked as helpful
    0
  • like they do•80
    @murdock33Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Responsive Web Design QR Code Component

    1
    Maksym Perekhodko•50
    @kinqbertPosted 7 months ago

    Great job! Your code looks mostly fine to me, but personally I'd suggest some fixes:

    1. Always consult with Figma file, if it is available (in this task it is available for free). It is so useful during front-end development process, as it allows you to see precise pixel sizes of different element, how they should be placed, etc. In your case, sizes seem a bit off, like overall card width and card paddings, for example. Figma's interface may look a bit confusing, but trust be, it is really easy to learn and even easier if everything you need Figma to is checking the design. It is widely used in this industry, so I definetely would recomend learning some basics.
    2. You shouldn't use <br> tags in your card description, as they are not really necessary there. Text will be placed properly without them with proper card width.
    3. I don't really see much profit into your usage of @media queries. If they are used to add some distance between card and page edges on screens with small widths, you should probably add paddings for the whole page.

    Overall, I really like your solution! Code looks pretty clean and good. Great job!

    0
  • Kunwarpreet Singh•50
    @kunwar91Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    this was a quick one, but I am proud that I did not have to google for syntax or css props

    What challenges did you encounter, and how did you overcome them?

    Understanding the Figma images was new to me

    What specific areas of your project would you like help with?

    NA

    Responsive QR code component

    2
    Maksym Perekhodko•50
    @kinqbertPosted 7 months ago

    Looks fine to me! However, personally, I'd recommend some improvements:

    • You can set text-align: center; for the whole card, not to each element of the card (like title, description, etc.), every text inside of it will be alligned to the center.
    • [Not critical] Don't forget about paddings, don't use margins only. It would be more convenient to set padding of 16 pixels for the every card side.
    • [Not critical] You can use padding-inline: 16px; instead of padding: 0 16px;
    • [Not critical] You should use class names instead of just tags as CSS selectors (e.g: .card-title, not .card h1). It doesn't makes any weather in such project, but I believe it would make code more readable in bigger project.

    Great work! Love your solution!

    0