Skip to content
OverviewSolutions
4
Comments
15

Mike Cheshire

@mixchexCanada410 points

A UX Engineer crafting seamless digital experiences for users. I've been working in the digital industry for over 14 years. Still learning. Follow me on Twitter @mixchex

I’m currently learning...

TypeScript Cypress

Latest solutions

Latest comments

  • MohamDah•180
    @MohamDah
    What challenges did you encounter, and how did you overcome them?

    At first, this project seemed very daunting. I've always had trouble with CSS, so I was a bit scared looking at the design. But then I spent time breaking it down and thinking through how I would implement things one by one made it a lot easier. I learned a lot about CSS design and transitions. The logic was also a bit confusing at times, but fortunately I didn't have a lot of trouble with it.

    This is also the first project I made with TypeScript. It's surprisingly not as hard as I thought. It is a bit tedious to deal with the type errors, but it's obviously better in the long run. Better fix the bugs now rather than later.

    MohamDah Rock Paper Scissors Solution

    #react#typescript
    1
    Mike Cheshire•410
    @mixchex

    Nice implementation and it sounds like it was a great learning experience. Those animations really bring this to life.

    One thing that could be beneficial is to replicate the sizing a little more effectively, as the initial view is quite small.

    I think you should also try adding the Lizard Spock bonus variation of the game. :)

    Keep it up. Mike

    Marked as helpful
  • Tarek•120
    @tarek3d
    What specific areas of your project would you like help with?

    Please help in the mobile designe I can't do it write

    Clipboard landing page

    1
    Mike Cheshire•410
    @mixchex

    Hi Tarek3d,

    Overall this is a great effort.

    Here's some feedback on how you can improve your responsive mobile development:

    • start styling mobile-first (from the mobile view first), then add min-width breakpoints and adjust the design as necessary.
    • for images (unless your designs require otherwise), style them with { width: 100%, max-width: 100%, height: auto}
    • try not to fix the heights of elements (unless specifically for a certain breakpoint), so they can adjust with the flow of the design.

    I hope that helps you a little. Keep on trying new things - there's so much to learn by doing projects like these.

    All the best! Mike

    Marked as helpful
  • Mike Cheshire•410
    @mixchex

    Hi Caetano! I like that the form was stopping me from progressing unless certain information was added. For usability, I would suggest to always show the errors as it seems like some errors disappear occasionally. Also, include the id of the form field in the 'for' attribute of the label for greater accessibility. I hope that helps, overall great work! Mike

    Marked as helpful
  • Mike Cheshire•410
    @mixchex

    Hi Jech,

    Nice work - this looks good!

    One thing to look at is the reports to fix validation and accessibility errors. For class naming conventions, try looking into BEM (Block, Element, Modifier) naming conventions. It's really useful to help with this.

    Also, that looks like painstaking work for the icons, but they've come out well.

    I hope that helps. Mike

  • Mike Cheshire•410
    @mixchex

    Hi Irvine,

    Nice work on this.

    Here are a couple of things to look at:

    • Take a look at fixing these accessibility issues in the report above.
    • If you change the plan term length option, the summary value doesn't change.

    Also, love that the validation works great on the first page.

    Hope that helps you! Mike

    Marked as helpful
  • Mike Cheshire•410
    @mixchex

    Hi @huzaifanur

    This looks like a great translation of the design.

    Here are some things to look at:

    • On the mobile version, adjust the header sizing here as it's not very responsive.
    • There are some accessibility errors to fix in the report above.
    • There is no form validation.
    • The form does not update depending on your selections.

    Excellent effort and I look forward to seeing some updates.

    Mike

View more comments