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
Log in with GitHub
OverviewSolutions9Comments33

All comments

  • Mobolaji Olamide• 20

    @Olamstix

    Submitted

    Hello! I have completed this for a while now, however I still wanted to show it here. Your comments are highly welcome.

    Social Proof Section

    #tailwind-css

    1

    LiBee• 390

    @Li-Bee

    Posted

    Well done on the design also looks good on the mobile version 👏. I have a few comments for you consideration which I have listed below:

    1. Remove the width that you have applied to the star icons they automatically scale at the moment the icons look stretched

    2. You need to add the background images to meet the design I could not see them - but it looks good as is too

    3. To clear the accessibility point change the <section class=reviews> to a <div> element instead. You require at least one heading within <section>

    Marked as helpful

    0
  • Wangszz• 130

    @Wangszz

    Submitted

    1. yes, I found some hard parts while building this project. that problem appears because i was a newbie in SAAS and I try to use SAAS in this project.

    2. I feel confident at all.

    3. no, i don't have

    Responsive NFT Preview Card

    #sass/scss

    1

    LiBee• 390

    @Li-Bee

    Posted

    Good job! To fix the accessibilty issues you need to add a landmark. If you add <main></main> around you code this should solve the issue for you. Link to more information if you want it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

    0
  • LiBee• 390

    @Li-Bee

    Posted

    Good job on the challenge - well done! 👏 A have a few comments for your consideration - i have listed below for ease :

    1. The card is not quite in the center consider using flexbox to center the card component:
    body {
 display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

    1. The titles Sedans, Suvs and Luxury need to capitalised in the design so: text-transform: uppercase;

    2. Compared to the design you need to smooth corners of the card component do add a border radius

    3. Compared to the design the background is not white (#fff) need to add shade to the background.

    4. To fix your accessibility issues add <main></main> around your code.

    Marked as helpful

    1
  • riverCodes• 300

    @riverCodes

    Submitted

    Hi, please give me feedback on the responsiveness of this design!

    The desktop design looks close to the original, but I am confused about how to achieve the mobile design. Should I use media queries? How do I make the desktop design transition into the mobile design?

    I am confused with responsive design in general, so any advice on how to alter my code to make it more responsive would be super amazing!

    Order-Summary-Component Challenge

    #accessibility

    2

    LiBee• 390

    @Li-Bee

    Posted

    Hi similar to what @Kamasah-Dickson said it is better to start from mobile first as when you expand from mobile to desktop the adjustments you need to make is less in comparison to doing them the other way round.

    What I did on this challenge was to start with mobile first and I put the card in an article wrapper <div> and did a <width> of 87.2% and <margin> of 0 and auto. So when the viewport is for example 375px the card width is 327px and there is space between the card and end of viewport.

    Link to my challenge: https://www.frontendmentor.io/solutions/order-summary-component-using-mobile-first-approach-and-css-grid-c-HmAvKIr

    I am not saying it is perfect as I am still and learner and still learning about mobile first design but it may help 😁

    Marked as helpful

    1
  • P
    Dave Quah• 670

    @Milleus

    Submitted

    This one's tricky with the image centering but I think I've found a nice way to always have the image centered even with larger heights or font sizes using CSS grid.

    I'd appreciate it if I could get feedback on how to improve, especially on the use of semantic HTML and accessibility considerations. Thanks everyone o/

    Profile card component using CSS grid

    #cube-css#accessibility

    1

    LiBee• 390

    @Li-Bee

    Posted

    Well done on the design. I think you need to add sr-only class to you <h1> element. As the title Profile Card Component is showing on the screen.

    1
  • LiBee• 390

    @Li-Bee

    Submitted

    Hi everyone 👋 - please see my solution to social proof section. Let me know your thoughts and if anything is not in line with best practice. Note my use of flexbox - would it have been better to use CSS grid - in my view I thought this was not required as doing a 1D design.

    Social proof section using flexbox

    1

    LiBee• 390

    @Li-Bee

    Posted

    Also I did max-width on the testimonials at desktop view - is this the correct thing to do?

    0
  • LiBee• 390

    @Li-Bee

    Posted

    This is really good 🎉. If I may ask where did you learn HTML CSS - did you use a course?

    1
  • Kimjunpyo• 10

    @KimJunpyo

    Submitted

    Feedback welcome.

    1. It was my first time working on a project, so it was very difficult. However, I think I learned a lot by searching for tags and attributes.

    2. I'm not sure if the code configuration was efficient. Also, I'm not sure because I've never seen anyone else's code.

    3. I would really appreciate it if you could give me feedback on the best practices and the different parts of my code.

    qr-code-component-main

    #foundation

    2

    LiBee• 390

    @Li-Bee

    Posted

    Hey looks really good well done 👍

    I think you need to change your font on the desciption text - currently different to the design.

    Also to clear your accessibility issues add <main></main> around you code as such, to give a landmark (here is more info on it if you are [interested] (https://dequeuniversity.com/rules/axe/4.3/landmark-one-main?application=axeAPI).

    <body>
<main>
  <div class = "grid">...</div>
  <div class="attribution">...</div>
</main>
</body>
    0
  • Yuko Horita• 645

    @Sloth247

    Submitted

    Hi there, thanks for visiting my solution. I added animation to main hero image and card and make all interactive elements accessible and focusable, including svg icons.

    I still have to improve the following items;

    • The overlap of phone image and the card is not beautiful. I don't want to change the size of phone image by display size so much.
    • The animation is working but they start from translateY(0) position and move to the designated position at last. I don't want to let it happen but I could not figure out.

    Any other feedbacks are welcome.

    Equalizer LP w/ HTML, Dart Sass and Animation

    #accessibility#sass/scss

    2

    LiBee• 390

    @Li-Bee

    Posted

    Hey this looks great. I am also trying to finish this at the moment. I do have a quick question is thats okay? I am new to website design and have been having problems with the background images.May I ask the following questions:

    1. Why for the mobile image did you put the background image in the header and not in the <body> ?
    .header {
  padding-top: 2.5rem;
  background-image: url("../../img/bg-main-mobile.png");
  background-repeat: no-repeat;
  background-position: bottom left;
}
    1. For the tablet version and desktop version I noted you then put the background-image in the <main> may i ask why you did this?Also why did you increase the background-size to 150% for tablet and 130% for desktop? How did you come up with these measurements?
    @media screen and (min-width: 40em) {
  body {
    background-image: url("../../img/bg-main-tablet.png");
    background-repeat: no-repeat;
    background-position: top -10rem left -20rem;
    background-size: 150%;
  }
}

@media screen and (min-width: 62.5em) {
  body {
    background-image: url("../../img/bg-main-desktop.png");
    background-repeat: no-repeat;
    background-position: top -15rem left -18rem;
    background-size: 130%;
  }
    0
  • Luis• 20

    @lnaranjoc

    Submitted

    Hello Everyone! This is my very first challenge in Front End Mentor. You may laugh, but I worked hard to get this QR code done.

    I would really appreciate any feedback. I am sure there's things I can improve, or make in a different (maybe more efficient) ways.

    Thank you very much in advance!

    QR code component

    2

    LiBee• 390

    @Li-Bee

    Posted

    Well done - close to the design. To fix the accessibility issues you need to add a <main></main> landmark

    <main>
    <div class="container">
        ....
    </div>
 </main>
    0
  • LiBee• 390

    @Li-Bee

    Posted

    Very close to the design. To fix the accessibility issues you need to add a <main></main> landmark

    <main>
    <div class="container">
        ....
    </div>
 </main>
    2
  • Akadzani• 10

    @Akadzani

    Submitted

    I would like to get the feedback for how i write the code for this challenge.

    QR Code Component

    #itcss

    2

    LiBee• 390

    @Li-Bee

    Posted

    Pretty close to the design - well done 👏. Compared to the design i think you need to make the heading smaller and add a bit of space between the bottom of the paragraph and the bottom of the card.

    To fix your accessibility issues you need to add <main></main> to your html - to add a landmark.

    <body>
<main>
    <div class="qr-code container">
     ....
    </div>
    <div class="attribution">
    </div>
</main>
</body>

    Marked as helpful

    0
  • LiBee• 390

    @Li-Bee

    Posted

    Really close to the design well done!! 👏

    Only minor comments (and can be ignored as dont really impact the design that much).

    1. Add a box-shadow to the card.

    2. Make the order summary heading a little bigger and the paragraph text a little smaller.

    Marked as helpful

    0
  • LiBee• 390

    @Li-Bee

    Posted

    Good job. Another way to set the background is to do the following:

    body {
background-image: url(../images/pattern-background-mobile.svg);
  background-color: #e0e8ff;
  background-repeat: no-repeat;
  /* not cover as dont want to cover entire element */
  background-size: contain;
  background-attachment: fixed;
}

    Marked as helpful

    2
  • LiBee• 390

    @Li-Bee

    Posted

    Looks very good 😁 - well done on the hover and icon animation on the picture took me ages to do that!

    Few comments for your consideration - most are minor points.

    1. Try and center the card component. Add the following to <body> = height: 100vh

    2. Increase font-weight on 0.041 ETH

    3. The 'font-color' on 3 days left should be the same as the <p> text.

    4. Try and make the avatar picture a bit smaller, it is a bit big

    5. Maybe reduce the shadow color on box-shadow a little bit too dark looks like a line, perhaps change the alpha value to 0.3.

    You also have a few accessibility and html issues to sort out. Broadly:

    1. For your <img>add alternative text which describes what the picture is (e.g. alt="picture of glass cube"). (This will also clear the html issues)

    2. Add <main></main> to you body which surround the card div. This will clear the landmark issue.

    3. Change the <h2> heading to <h1> that will clear the level-one heading issue. Need at least one <h1> on page.

    Marked as helpful

    1
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Social media dashboard with theme switcher

    #tailwind-css

    2

    LiBee• 390

    @Li-Bee

    Posted

    Looks great! I think your Instagram icons are not showing though.

    1
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    At first it was hard for me to figure out how to set the countdown timer's days, hours, mins, and secs relative to the time the user visits the page but luckily found a template here: https://www.w3schools.com/howto/howto_js_countdown.asp

    I just then set the launch date to the specific given number respectively.

    Nonetheless, feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Officelite coming soon site

    #tailwind-css

    2

    LiBee• 390

    @Li-Bee

    Posted

    Really good 👍👏. I see you set the image of the circles at the top as an ‘<img>’ and not a ‘<background-image>‘ may I ask why for my own understanding. Something I am struggling with at the moment.

    Curious did you take a course for learning html css if so can you let me know which one?

    0
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Loopstudios landing page

    #tailwind-css

    2

    LiBee• 390

    @Li-Bee

    Posted

    Very close to the design as usual 👏. You have a couple of accesibility issues but nothing major. Just curious - how long did this take you to do?

    1
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Suite landing page

    #tailwind-css

    4

    LiBee• 390

    @Li-Bee

    Posted

    Really good!! Well done! Have bookmarked for reference. Just curious - did you do mobile first design approach?

    1
  • Han• 340

    @hcxweb

    Submitted

    Hello everyone, I dipped my toes into Sass with this challenge. The image hover effect was a bit challenging, but it was satisfying when finally figuring it out. Any suggestions are highly appreciated. Thank you very much.

    NFT Card Using Sass

    #sass/scss

    1

    LiBee• 390

    @Li-Bee

    Posted

    Very close to the design - well done 👏. Have not used SASS yet still doing pure CSS - does it make it quicker?

    0
  • Patrick Senchim• 50

    @blayzking

    Submitted

    I struggled a bit on this project. Spent a lot of hours on it. Any feedback would be greatly appreciated. The hover effect was a challenge for sure. I am still unfamiliar with flexbox so I used transform for the positioning. My code is a bit of a mess because I was trying different things. For some reason, the live site works well on my mobile and brave browser but doesn't work well on chrome. Or maybe it's my chrome. Any feedback would be welcomed. Thank you very much

    NFT Card Challenge

    2

    LiBee• 390

    @Li-Bee

    Posted

    Really good just two things which are tiny amends and the card looks good anyway.

    1. The ETH and time stats font-weight needs to be increased
    2. the border line needs to be a bit thinner.
    0
  • LiBee• 390

    @Li-Bee

    Posted

    Really like this and well done on getting it close to the design. 👏 You have an accessibility issue you need to fix - to ensure that scaling works properly on different devices i believe.

    Marked as helpful

    1
  • Jeremy Ng• 200

    @lanechanger

    Submitted

    Hi everyone,

    Thanks for checking my solution out.

    Had a question regarding the error message. I implemented it by having its visibility set to none and then just "turning it on" if needed. This way I can plan for the space that it takes when I do the layout around it. But was wondering if that's best practice or it's better to do it by display: none and adjusting the space as needed.

    Jeremy

    SMACSS'ish design with hidden error message

    3

    LiBee• 390

    @Li-Bee

    Posted

    This is great! I was having so much trouble trying to work out the email validation (have not fully learned JavaScript yet!). Have bookmarked as a guide.

    0
  • LiBee• 390

    @Li-Bee

    Posted

    Soooo close to the design well done - will use this as a guide.

    Couple of things i noted -

    1. The width of the font on the right and the button seems to be smaller than the design consider making the width wider.
    2. The first picture underneath the main picture needs the overlay and orange border to simulate it has been selected.
    3. There are a few accessibility and validation issues which need to be solved. Suggest you add <main></main> to the <body> - this should clear the landmarks comments.

    Marked as helpful

    0