Skip to content
OverviewSolutions
16
Comments
18
Muh Suryadi Triputra Rahman
@msuryaditriputraR

All comments

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi There 👋

    Congrats on finishing this challenge 🥳

    The place-items: center only works when the element is a grid, so just change the body's display to grid with display: grid, and don't forget to set the min-height of the body to 100vh;

    for your Accessibility report ⚒

    • Wrap all of the content with <main>tag, All page content should be contained by landmarks.
    • If you just have one heading, you have to use h1 tag for semantic meaning and you can change its style but not the tag. The page should contain a level-one heading. change your h2 tag to h1

    I hope this is helpful😊 after you fix the accessibility issues, don't forget to generate a new report! 📖

    keep it up your good work, Happy Coding ☕

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Julieta Perez 👋

    Firstly, I wanna congrats you on your success finish this challenge 🎉

    However i have some feedbacks for u 🌼

    Accessibility 👀

    • Wrap all of your content with the main tag. All page content should be contained by landmarks.
    • For heading text use h1 instead of h3 if you just have one heading on your page. Page should contain a level-one heading.
    • Wrap attribution div with footer and place it at the bottom of your page for a better experience, or if you want to keep it at the top wrap it with header.

    Code & Design 🛠

    • If you want to place your div at the center of the page with position property. You should use transform: translateX(-50%) when you set the left with 50% and transform: translateY(-50%) when you set the top with 50%. or you just need to use transform: translate(-50%,-50%) for shorthand. learn more about translate
    • For best practice and easy way to make content centered is use grid layouting ⚡
    main{
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    and trada it's magic ☃ . learn more about grid layouting.

    I hope this helps, keep it up your good work and Happy Coding ☕

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Icekid35 👋

    You have amazing work.. Good job 🙌 then adding a copy feature and adorable icons are an impressive idea. Nice! 🤘

    However, i have some suggestions for u

    • You should wrap the advice title with h1 to fix your accessibility issue do you have. Page should contain a level-one heading
    • Add some padding in the copy element and add border-radius too.
    • For Divider, actually you can use the image assets but it's no big deal. Nice try to build your own divider style 😁

    I see you have fixed your code according to the suggestion of the previous comment, but you forget to Generate a new report. Please update them 🛠

    I hope this helps. Keep it up your good work 🔥💥

    Happy Coding ☕

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Good Work, Nice Animations !

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Shane Pinder 👋

    You have an interesting idea to make an image purple with a linear-gradient. But I think the best practice and easier is to use the filter property. check the explaination about the filter property. And you can also use css filter generator to make it easier 😄

    For the Accessibility issue do you have, you should wrap the attribution div with footer tag

    I hope this helps and happy coding ☕

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Suryadi , we have the same name 😅

    First I wanna congrats you for success to finish this challenge 😎🎉 and welcome to the Front-End Mentor community 🔥⚡

    but I have some feedback for your solution ⚒

    • Accessibility Issues
    1. Wrap all of the content with <main> tag, All page content should be contained by landmarks.
    2. If you just have one heading, you have to use h1 for semantic meaning and you can change its style but not the tag. The page should contain a level-one heading.
    3. For the div's attribution, you should wrap it with footer, for better accessibility.
    • Code & Design
    1. You should use CSS for change the background of body. Avoid using bgcolor attribute.
    2. You forget to change the color of the card title, Please check the style guide to see the code hsl colors.
    3. For a style that is close to the origin, you should use box-shadow on the card

    I hope this helps and can improve your code 🙌

    Happy Coding ☕

    Salam dari Makassar 👋😁

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Halo TheCoderGuru, Thanks for your helpful feedback..

    Cheers

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi, I think you forget to add state for the image when it hover/active.. check the design assets for detail..

    and to avoid accessibility issue, wrap the attribution with footer

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi There 👋

    I wanna congrats you for success to finish this challenge 😎🎉

    but I have some feedback for your codes ⚒

    1. I think you don't need to use sections tag, use div instead.
    2. Use box-shadow for adding shadow on your card, not border.

    I hope this helps and can improve your code 🙌

    Happy Coding ☕ Danbo

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    I think you only need to put your CSS style on your stylesheet, not in inline style HTML tags

    for easy to readable, maintainable, and to be consistent

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    For Scale something you can use transform: scale(x,y) for detail you can check this Link.

    Hopefully it is helpful..

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Awesome Work..

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Should icons with an img tag have alternative text? what is the best practice for this?

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Soyeb

    you can make responsive website using media queries

    Marked as helpful
  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi!

    I congrats you for completing this challenge.. cheers 🍷

    I have suggestions for you, You Can Improve your design by reducing the margin-top on your paragraph and for the accessibility issue you should add alternative text in your img tag.

    You can view your own report and improve them to make your code even better.

    Nice Work 🙌

    𝗛𝗮𝗽𝗽𝘆 𝗖𝗼𝗱𝗱𝗶𝗻𝗴 ☕ 𝗗𝗮𝗻𝗯𝗼

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hi Maqsud 👋

    Happy to hear your feedback 😊

    Thanks a lot for giving me a great advice, i really didn't know that this card needed a box-shadow but thanks to remind me. I will fix it and apply it to my next projects 😁

    Happy coding ☕

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    Hy.. thanks a lot for your suggestions, it makes me better..

    I will apply it to my code.. thanks

  • Muh Suryadi Triputra Rahman•380
    @msuryaditriputraR

    I also had the same problem.. you can try this

    git commit --allow-empty -m "Trigger rebuild"

    git push

    and refresh your page

    it worked for me.. happy coding

    Marked as helpful