Skip to content
OverviewSolutions
4
Comments
15
Mike Cheshire
@mixchex

All comments

  • MohamDah•150
    @MohamDahSubmitted 28 days ago
    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

    1
    Mike Cheshire•410
    @mixchexPosted 24 days ago

    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
    0
  • Tarek•120
    @tarek3dSubmitted 4 months ago
    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
    @mixchexPosted 4 months ago

    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
    1
  • Mike Cheshire•410
    @mixchexPosted over 1 year ago

    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
    1
  • Jech•100
    @j3rech0Submitted almost 2 years ago
    • Structural naming convention for CSS classes is hard.
    • Creating custom CSS icons is a bit of a time consuming but fun, I know I should be just using the SVG assets, but for this very first challenge I'd like showcase what CSS can do.

    Results Summary Component (Custom CSS icons)

    1
    Mike Cheshire•410
    @mixchexPosted over 1 year ago

    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

    0
  • Mike Cheshire•410
    @mixchexPosted over 1 year ago

    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
    1
  • Mike Cheshire•410
    @mixchexPosted over 1 year ago

    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

    0
  • Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi Ahad,

    Great effort on this challenge.

    Looks like there are some accessibility issues with the report on this one that could be fixed such as adding some (landmarks)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role]. Also, the form seems to allow you to proceed if you only put a phone number in and miss the email and name fields.

    Overall it's come out well and you've included a lot of the adjustable details depending on a user's selection, so well done.

    I hope this helps you!

    Mike

    Marked as helpful
    0
  • LilithNixx•190
    @LilithNixxSubmitted almost 2 years ago

    Until this moment, this is the best I can do. I wanted to make the pink background grow while expanding the screen but with no success.

    Responsive form

    2
    Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi @LilithNixx,

    Currently, your preview site is flagged as dangerous. Not entirely sure why, but something to look into.

    In terms of your comments:

    • for scaling the background with the window, you can use the CSS property background-size:cover to achieve this.
    • For the "All page content should be contained by landmarks" comment, you should add certain HTML tags (<main>, <header> etc) or attributes (role="main") onto certain elements throughout your web page to help with accessibility. Find out more about these here.

    I hope this helps you on your journey in front-end development!

    Mike

    Marked as helpful
    1
  • Brayan Miza•560
    @bramizdevSubmitted almost 2 years ago

    Overlay I didn't know how to create an overlay to an image, this is the approach that I took.

    Since this was a link I used a <a> tag as a container, because I thought when you click at the image it will take you to another page with more details of this NFT.

      <a href="#" class="card__url-container">
    <img
      src="./images/image-equilibrium.jpg"
      alt="A transparent cube balanced in one of its corners in a dark blue background promoting balance and calm"
      width="604"
      height="604"
      class="card__img"
    />
    <div class="overlay">
      <img src="./images/icon-view.svg" alt="" aria-hidden="true" />
    </div>
  </a>

    .card__img {
  border-radius: 0.5rem;
}

.card__url-container {
  position: relative;
}

.overlay {
  position: absolute;
  background-color: var(--clr-primary-500);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  opacity: 0;
  transition: 0.4s ease;
}

.card__url-container:hover .overlay {
  opacity: 1;
  background-color: var(--clr-primary-500-op);
}

    NFT preview card component

    1
    Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi Brayan,

    This looks and feels really nice.

    Your approach for the overlay is good. Another alternative could be using the :before or :after CSS pseudo-elements for your anchor and positioning it absolutely and making it visible on hover.

    Overall it came out really well, so well done.

    Hope that helps.

    Mike

    Marked as helpful
    0
  • Leonardo Henrique•130
    @henrikkudesuSubmitted almost 2 years ago

    I learned that I should avoid manually setting the height of the elements, as it can break the responsiveness of the website. But I had a little problem: there's a big gap between the profile picture and the name that I couldn't figure out how to resolve.

    Profile card component using flexbox

    2
    Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi Leonardo,

    This is a great effort and very close to looking just like the design.

    That space you've found has been caused by your transform property. By using this, the space has been left, but if you use a negative margin-top it will help move the lower content up at the same time.

    I hope this resolves your issue. Great work.

    Mike

    Marked as helpful
    1
  • Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi Joaquin,

    This is really good, well done!

    One little user experience related issue working through the form is that the add-ons listed are not very clickable unless you click on the checkbox. It would be very useful for users to have the whole area clickable. An easy way to do this could be to add a <label> element around the checkbox <input> instead of a <div> element.

    Great effort!

    Marked as helpful
    1
  • Mike Cheshire•410
    @mixchexPosted almost 2 years ago

    Hi Leonard,

    Overall this looks really good.

    • You should check the accessibility report and fix the flagged issues with this including adding text in the buttons for screenreaders and alt text for images.
    • An added UX design tip for your reply box would be to differentiate the 'Cancel' button to be less prominent than the 'Reply' button.

    This is definitely a tricky challenge, so you've done a good job!

    Mike

    Marked as helpful
    0