Skip to content
OverviewSolutions
16
Comments
18

Muh Suryadi Triputra Rahman

@msuryaditriputraRIndonesia380 points

JavaScript Enthusiast ~ Front-End Developer

I’m currently learning...

HTML (PUG), CSS / SASS, Javascript ,React, SEO and Accesibility

Latest solutions

View more solutions

Latest 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
View more comments