Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Tarek• 120

    @tarek3d

    Submitted

    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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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

    @j3rech0

    Submitted

    • 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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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

    @LilithNixx

    Submitted

    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• 390

    @mixchex

    Posted

    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

    @bramizdev

    Submitted

    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• 390

    @mixchex

    Posted

    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

    @henrikkudesu

    Submitted

    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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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• 390

    @mixchex

    Posted

    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
  • Ben• 160

    @blue-crona

    Submitted

    Hello, this is my attempt at the profile card component challenge.

    I'd appreciate any feedback or suggestions that you might have regarding this solution. 😊

    Profile card component | CSS, BEM

    1

    Mike Cheshire• 390

    @mixchex

    Posted

    Hey Ben,

    Nice work - love the consistency of your card compared to the design. After having a very quick look at your markup, I suggest you use other elements other than <h1> and <h2> tags for your statistics. <h1> tags should only be used once per page. Elements that may serve better in this instance would potentially be <dl>,<dt>, and <dd> tags. Other than that, I think it came together well for you.

    Hope that helps!

    Marked as helpful

    1