Skip to content
OverviewSolutions
12
Comments
7
HL Wong
@hl-wong

All comments

  • Fatma Tawfeek•110
    @Fatma-TawfeekSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • Using grid CSS layout and use it to implement responsiveness to mobile and tablet.
    What challenges did you encounter, and how did you overcome them?
    • Implementing grid CSS to desktop, tablet and mobile
    • Take a quick look at its explanation in css-tricks website
    What specific areas of your project would you like help with?
    • determine which breakpoints I should work on in media queries.

    Four card feature section

    1
    HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there! Good job on complete this challenge.

    The breakpoints I can suggest to you is what I usually used:

    1. Tablet - 768px
    2. Laptop/Desktop - 1024px

    I have seen your code that you have use 64em, which is 1024px for laptop/desktop. You can check this from StackOverflow, and this from Reddit for which breakpoints you should work in media queries.

    I hope this is helpful to you. Good luck, and happy coding! :D

    Marked as helpful
    0
  • Pablo Zallio Web Developer•210
    @Pablo-Zallio-DevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In principle I am very happy with my first project done with the Sass preprocessor, I still have a lot to learn, so keep working

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

    The most complicated part of this project was not having the figma file, I had to use an image editor to measure margins, fonts and other things.

    Responsive product card

    2
    HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there! Good job on complete the challenge. You did a great job make it look so similar as the design preview given. :D

    0
  • HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there. Good job on completing this challenge.

    @media screen and (width <= 768px) {
	.l-card__shadow {
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	.l-card__shadow {
		width: 80%;
	}
}

    I just seen your code and preview site. Based on the code above you have write in sass file, I can suggest you to use max-width for your card component.

    <span class="c-card__creator__text">Creation of </span>
<p class="c-card__creator__name">Jules Wyvern</p>

    And this part of code in html, I suggest you should put the <span> tag inside the <p> tag like the code below.

    <p>Creation of <span>Jules Wyvern</span></p>

    Good luck, and happy coding! :D

    Marked as helpful
    0
  • HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there. Good job on complete the challenge.

    I have seen your code indicating that you are using TailwindCSS for this challenge. However, I have little experience with TailwindCSS. The feedback I can give you is that your preview site doesn't show based on the solution you submitted.

    Happy coding!

    Marked as helpful
    0
  • HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there! Good job on complete this challenge.

    For your solution, I just looked at your code.

    <div class="container">
...
</div>

    Your container height and width shouldn't use vh and vw. I can suggest you to use % for width and px for max-width, and should remove the height.

    <ul>
       <li><a></a></li>
</ul>

    Another one will be your social links. You shouldn't remove the height and width from li.

    Happy coding!

    0
  • HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there. Good job on completing the challenge!

    Your solution doesn't work based on your coding, but I just checked with your preview site. Your article illustration and author image doesn't show.

    Happy coding!

    Marked as helpful
    0
  • HL Wong•290
    @hl-wongPosted 3 months ago

    Hello there. Good job on completing the challenge!

    I have few feedback that your code has missing something.

    1. You didn't apply the box-shadow to the cards.
    2. Your attribution in html are missing.

    Other than those feedback, everything is great.

    Happy coding!

    Marked as helpful
    1