Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
6
James
@fivetailsdevelopment

All comments

  • Tarek514•170
    @Tarek514
    Submitted 11 months ago

    Four Card Feature Section Using Flex

    1
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    Well done. Good semantic HTML and clean, organised CSS. It was very easy to follow. Good job!

  • Veena K Venugopal•90
    @Veena-K-Venugopal
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have successfully finished another project and to have gained more practice in responsive webflow.

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

    I had issues with correctly setting the alignment of images. However, I used multiple resources to gain further understanding.

    Responsive mobile-first design

    1
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    The desktop version is pretty close! Well done!

    For mobile displays perhaps consider using max-inline-size (or max-width) to prevent the card from expanding too wide when it first transitions to a narrower display. The layout becomes a little uncontrolled once it dropped below 770px.

    Marked as helpful
  • Asif•130
    @juztasif
    Submitted 12 months ago

    Recipe Blog Page

    1
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    Nice work.

    As a challenge for next time, perhaps see how much you can do without using media queries. Everyone has their own approach, but I recently switched to building mobile first, and found it became much easier to control the layout (and add complexity) as the screen gets bigger rather than removing complexity as it shrinks.

  • AnaghaInowei•110
    @AnaghaInowei
    Submitted 11 months ago

    Social-link

    1
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    I noticed you disabled flex in your code, which has caused it to shift to the top of the screen. If you switch it back on you'll be able to position the card in the center of the display.

    Also when using a non-native font, make sure you import it into the HTML or CSS so that it works on other screens.

    Marked as helpful
  • Divyojyoti Ghosh•60
    @divyodatasci
    Submitted 11 months ago

    Blog Preview Card

    1
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    Nice job!

    One of things I've noticed is that adding a border between two light colours (such as the card and the background) can really help distinguish the two items - especially when I'm getting tired and my eye-sight is starting to get a bit blurry.

    Also perhaps consider what feedback you want the interface to give the user so they know what's a link, etc (such as a cursor change or hover effect).

    Marked as helpful
  • Valeria•30
    @Valleryikl
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I haven't coded in a long time, and I'm glad I was able to remember a little (° * °)

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

    It was difficult to remember everything

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

    No, just appreciate

    CSS FlexBox

    2
    James•120
    @fivetailsdevelopment
    Posted 11 months ago

    Nice job! It was a very accurate representation. Well done remembering everything! 🌟

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub