Skip to content
OverviewSolutions
10
Comments
10
P
Toba
@tobaojo

All comments

  • Toba•190
    @tobaojoPosted about 7 hours ago

    This is brilliant. Code is good and nice that you opted to use React. I had a hard time using plain JS but I got there in the end.

    The designs are really good too.

    So well done all around.

    0
  • Toba•190
    @tobaojoPosted 2 days ago

    I love this. This is perfect and I am learning stuff from the tailwind you used.

    I have no issues with the code. Makes sense and reads well.

    Well done all around!

    1
  • Toba•190
    @tobaojoPosted 4 days ago

    Perfect solution! nothing to add here!

    0
  • Toba•190
    @tobaojoPosted 7 days ago

    This is perfect. No complaints from me. Good Effort all around.

    0
  • Toba•190
    @tobaojoPosted 9 days ago

    Good effort.

    Your font doesn't seem to be coming through.

    A few pointers:

    In your media query, the .card switches to a flex layout on screens smaller than 550px. However, if the intention is to make .card-one occupy full width, adding width: 100% to .card-one may help achieve a consistent look.

    0
  • Toba•190
    @tobaojoPosted 11 days ago

    Looks really good, I think you could benefit from using gap or some padding for your text content. Also It's not responsive. Perhaps try looking at the mobile design provided to get some ideas on how you can make this component responsive.

    Some other pointers:

    The path to the Montserrat font file has a typo: tff should be ttf.

    font-family should be used instead of font-style for applying custom fonts.

    The card width is currently set to 35% of the viewport. While this works on large screens, it may look overly wide on some smaller screens. Adding a media query can make it more responsive

    Your image styling is mostly good, but adding object-fit: cover instead of contain will prevent empty spaces within the image box if the aspect ratio differs

    Ensure text inside the button isn’t wrapped in a <p>, as it’s semantically incorrect and may affect accessibility.

    The min-width and max-width properties of .card may benefit from further tweaking, especially if targeting devices smaller than 340px.

    Marked as helpful
    0
  • Toba•190
    @tobaojoPosted 15 days ago

    Great start so far.

    The code is well structured and makes a sense.

    Though i'm not sure why you opted to use those colours as they differ from the original design a fair bit. I think you should take another look at the designs.

    Additionally, your solution doesn't follow the mobile design. (Though it still works on mobile devices)

    0
  • Govardhan V Prakashmurthy•230
    @Top-Trekx-Im-gvp-98Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my simple resolution & made it responsive.

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

    Biggest challenge was figuring out how to shrink the image & buttons when the card shrinks a bit on mobile

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

    I'm seeking advice from anyone who thinks I could approach the challenge differently and the more efficient way.

    Responsive Social Links Profile using Flex Box

    2
    Toba•190
    @tobaojoPosted 22 days ago

    Looks great all around so good work!

    If I'm being pedantic, the button elements are used for social links. To navigate to external sites, it's better to use <a> tags styled as buttons, rather than <button>. This will make each button behave as a link and allow for setting href attributes

    The alt attribute on the image is currently empty, which is generally discouraged when considering accessibility. Provide a brief description, like "Jessica Randall's profile photo".

    Consider using padding on .flex-wrapper to ensure content isn’t squeezed against the edges of very small screens.

    0
  • Toba•190
    @tobaojoPosted 23 days ago

    This looks really good, the hover states work well. Also looks like you managed to figure out how to incorporate the fonts

    some pointers:

    • The border: 4px black; in .wrapper is missing the solid keyword. Adding "solid" will ensure a consistent border style. (e.g. 1px black solid) for the thickness, colour and style of border
    • In your h1 styling, you have duplicate transition declarations. You only need one.
    • .container .imagess can be confusing due to the double “s”. Renaming it to something like .image-content
    • You have a typo with lin (line 124 in your css) in the .tag class. you can remove any unused or incomplete styles.
    • lastly for your font-weight U I think you need to remove the px so it's just a number (e.g. font-weight: 200)

    Great effort all around!

    Marked as helpful
    0
  • Toba•190
    @tobaojoPosted 23 days ago

    Hi, The HTML looks good! Though I would add a <main> tag around the <div> of the outer card to address / improve accessibility concerns. Your CSS is also a great start though I think the h1 should be center aligned along with taking a closer look at the colours being used from the design file. The other use of the colours is great and I think this is a good effort in terms of code structure.

    Marked as helpful
    1