Skip to content
OverviewSolutions
8
Comments
8
Ryan Barnes
@barnes

All comments

  • Reymart•120
    @Rcasas14Submitted over 2 years ago

    The difficult and most challenging part while building the project is the button position

    3-column-car-type

    1
    Ryan Barnes•250
    @barnesPosted over 2 years ago

    Overall it looks great. When it comes to positioning the button, as the elements are all stacked neatly, you should be able to position just using margins to get the correct positions. I also noticed that you manually uploaded your files to Github. I strongly recommend taking the time to learn to use git in the command line to speed up your process, and be better prepared to work on collaborative projects, especially in a professional setting. Time spent learning git will be time well spent!

    Marked as helpful
    0
  • Phi•10
    @phiphphiSubmitted over 2 years ago

    Professional front-end experience limited: wondering if there's better ways I could organize my CSS! Trying out custom CSS properties, and wondering the best way to use them (always? or when you find yourself writing something multiple times).

    QR Code Component with HTML+CSS

    2
    Ryan Barnes•250
    @barnesPosted over 2 years ago

    Looks great. In terms of formatting CSS, I'd opt for using classes over IDs generally, though IDs are valid. The general best practice is using a class if your CSS may apply to more than one element, and IDs if the CSS is unique to a single element. In this case, IDs meet that criteria, but if the project expanded to include multiple similar cards, you'd opt for classes. Take a look at the generated report as well to catch those tricky / hard to miss accessibility and HTML validation issues. (Don't forget those image alt texts!)

    Marked as helpful
    1
  • Ryan Barnes•250
    @barnesPosted over 2 years ago

    Looks excellent. Only feedback I have is to look into centering the main card using Flexbox or CSS Grid to make sure it stays centered vertically and horizontally, even in mobile. Otherwise, excellent work!

    Marked as helpful
    0
  • Aldo Adabunu•290
    @KwakuAldoSubmitted over 2 years ago

    I want to make this much more beautiful and responsive in portrait mode for mobile phones, but I can't seem to get the size for that right, and the main element won't scroll to show the entire element in portrait mode. Any help on how to get that working, please?

    Stats preview card component made with CSS flexbox

    2
    Ryan Barnes•250
    @barnesPosted over 2 years ago

    Looks good so far! I had the same issues with the mobile design. I had to put a media query around the body to remove the flexbox centering and 100vh when it went to the mobile layout. Good luck!

    Marked as helpful
    0
  • Ryan Barnes•250
    @barnesPosted almost 3 years ago

    Take a look at some of the HTML issues that are in the report. I also see things like your paragraph and h1 tags getting explicit classes. You can clean up your HTML and CSS if you target those elements within the div in the CSS.

    For example:

    .section__link p { 
/* Your section__link paragraph styles here */
}
    0
  • Aliza Aziz•30
    @Aliza02Submitted almost 3 years ago

    If you have any suggestions, feel free to deliver. I would appreciate any improvement suggestion

    NFT Card

    3
    Ryan Barnes•250
    @barnesPosted almost 3 years ago

    Looks good, as @Old1337 stated, go through the accessibility report on your submission and step through each of the issues. I enjoy using a frontend framework like Svelte, as alongside of their VS Code Plugins, I get warnings and errors related to these kinds of issues before I deploy. Take a look at my solution if you're curious about using something like Svelte.

    Marked as helpful
    0
  • Ryan Barnes•250
    @barnesPosted almost 3 years ago

    Looks great! Give the responsive styling a shot. That seemed like the trickier part on this one, I learned a good deal working through it myself.

    Marked as helpful
    0
  • Ryan Barnes•250
    @barnesPosted almost 3 years ago

    Looks good. I did this one today myself, so I'm no expert but I'll provide some feedback;

    You can get rid of the margin on the card itself since it is centered with flexbox.

    I'd avoid the fixed px height of the card. It seems fine on desktop, but take a look as you shrink, you'll end up with dead space around the bottom. I think you'd be fine with no set height, letting it scale as needed.

    In terms of React, I'm no expert, but I'd try to define the component to take in all data fields, the image, title and description so it'll be reusable for any QR code you feed it.

    But overall, nice work!

    Marked as helpful
    1