Skip to content
OverviewSolutions
7
Comments
10
thamu-acn
@thamu-acn

All comments

  • Jun Wei•200
    @junwei-wongSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    99% using grid. Only centering the body html tag that I used flexbox.

    For the profile header:

        display: grid;
    align-content: space-between;

    For the overall layout:

        display: grid;
    grid-template-areas: 'danial danial jonathan kira'
      'jeanette patrick patrick kira';
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    What challenges did you encounter, and how did you overcome them?

    • Using grid properly, and lots of mdn, stackoverflow, and googling. I feel that in production or practical experience, everyone is more comfortable with flexbox than grid. This challenge forced me to use grid more effectively than ever before.

    • Figuring out how to add the quotation into the background. Using svg as a background instead of a tag. This is cool ngl.

      background-image: url(../images/bg-pattern-quotation.svg);
  background-size: 7rem 7rem;
  background-repeat: no-repeat;
  background-position: top right 18%;

    Testimonial Grid using Grid, SASS

    1
    thamu-acn•200
    @thamu-acnPosted 2 months ago

    Well done, nice work!

    Just some recommendations:

    • Avoid using element selectors instead add classes to your element tags for code reuse.
    • Consider a naming convention such as BEM in preparation for maintainability in large and complex projects
    Marked as helpful
    0
  • Sadik Rahman•190
    @Coder-SadikSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The arrangement for the tablet screen was a bit difficult for me because I placed two cards inside a different `` element. By using the min-width: CSS property, I was able to partially solve the problem. However, my approach is not perfect yet, so I am eagerly awaiting your advice. Please check it out and let me know.

    Four card feature section solution

    1
    thamu-acn•200
    @thamu-acnPosted 3 months ago
    • Adding alt to <img> tags for accessibility reasons for example on screen readers
    • Setting height and width attribute to <img> will increase performance by reducing layout shifts as space is reserved for image while it's being downloaded.
    0
  • Sylwia•240
    @LesSylSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me was adding an icon to the button. I was able to solve this problem thanks to mdn.

    What specific areas of your project would you like help with?

    Any comments on the project welcome.

    Challenge product-preview-card-component

    1
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    I have noticed that you are still using px in some instances, according to this article from a Frontend mentor dev, Why font-size must NEVER be in pixels, we are advised to always use responsive units instead. .

    0
  • yt021•40
    @yt021Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    making it fully responsive.

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

    how to customize tables and how to make flexbox responsive to small screens.

    recipe page

    2
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    Looks good, just a suggestion as an alternative to using classes on each <td> element you can make use of :nth-child psuedo class

    Marked as helpful
    1
  • thamu-acn•200
    @thamu-acnSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Being able to produce a similar page to given design

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

    Aligning image to center after adding reset stylesheet was a bit tricky. I managed to align it properly using flexbox display on image container div.

    What specific areas of your project would you like help with?

    I wasn't sure of the effects of selecting/clicking the links through the keyboard.

    Social links profile

    2
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    I removed the hover effect and replaced it with focus after I saw the instruction "Ensure visitors can navigate the links only using their keyboard."

    At the moment the background color changes when the button links have focus through keyboard tab

    0
  • thamu-acn•200
    @thamu-acnPosted 3 months ago

    I recommend using 'rem' for setting font-size instead of in pixels.

    Marked as helpful
    0
  • Patolin3084•20
    @Patolin3084Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I've learned a lot more about how to sort elements with flexbox, but I still need a lot of practice with this. I need a lot of help to make my designs responsive, it is still a problem for me. I have managed to get the hover to work but not the focus, I'm not sure I'm using it correctly.

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

    I didn't remember how to use hover and I went over this looking for information. I also had problems adding the fonts on my computer, so I decided to do it through the link.

    What specific areas of your project would you like help with?

    I can help beginners who have problems with flex.

    blog-preview-card-main with hover and focus

    3
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    Hi, I am glad to hear that my suggestions, not criticism :), was of help to you.

    The CSS :hover selector is one of the pseudo-classes that are used to style elements by selecting the element when the users hover their cursor or mouse over the element. This is before the element has been selected or focused. Please read the below link for more details.

    Mozilla Docs

    I hope this is helpful and don't hesitate to reach out if it still doesn't make sense.

    Marked as helpful
    0
  • gurpal-dev•240
    @gurpal-devSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    This is my very first project which I entirely did by myself. I'm happy that i was able to complete it.

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

    I struggled with setting width of the container which holds everything in it and make it responsive to the different screen sizes. At the end, I managed to do it without breaking any content when it changes the screen size.

    What specific areas of your project would you like help with?

    I would like to know more about setting the width of the content and how to make it responsive.

    Blog Preview Card

    1
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    All looks good besides text overflowing on tiny screen size, try wrapping text or use max-width instead of width on container div and set min-height: 100vh on body to allow the card to adjust accordingly

    Marked as helpful
    0
  • Patolin3084•20
    @Patolin3084Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I've learned a lot more about how to sort elements with flexbox, but I still need a lot of practice with this. I need a lot of help to make my designs responsive, it is still a problem for me. I have managed to get the hover to work but not the focus, I'm not sure I'm using it correctly.

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

    I didn't remember how to use hover and I went over this looking for information. I also had problems adding the fonts on my computer, so I decided to do it through the link.

    What specific areas of your project would you like help with?

    I can help beginners who have problems with flex.

    blog-preview-card-main with hover and focus

    3
    thamu-acn•200
    @thamu-acnPosted 3 months ago
    • Author's avator is not visible even though you have added it to your HTML
    • No need to set display: flex; on <main> since it has already been set on parent container body.
    • The hover effect must be set on <h1>HTML & CSS foundations</h1> and setting font color to yellow according to active-states.jpg
    • I also noticed that on small screen size the content is overflowing, maybe setting this property to hidden might do or better wrap the text.

    Maintanability

    • I recommend adding a separate css file for styles and reference it in html page for readability and easy maintenance.

    Accessibility

    • Don't leave alt property empty on image tags as this is what is understood by screen readers
    Marked as helpful
    0
  • Kelvin Ariedi•80
    @Kelvin-AriediSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    The design was simple and fun to do

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

    no challanges

    Simple card design using HTML & CSS

    2
    thamu-acn•200
    @thamu-acnPosted 3 months ago

    Simple and straight forward, however I would suggest a separate css file to make styles more readable and adding 'alt' attribute on <img> for accessibility reasons

    Marked as helpful
    0